MapboxGL添加三维柱状图效果

最新推荐文章于 2025-03-26 10:16:50 发布

原创

最新推荐文章于 2025-03-26 10:16:50 发布 · 2.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #html #css #jquery

本文介绍如何使用MapboxGL在地图上叠加三维柱状图效果，包括准备页面、添加图层、点数据转换为矩形面数据、加载三维柱形图层及加入交互事件。

MapboxGL添加三维柱状图效果

效果

效果

三维地图效果

准备

我们这里只以html+jQuery+css纯demo写法展示如何叠加三维柱状图图层效果！
我们需要mapboxGL的js、css和jQuery.js

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="mapbox-gl.min.js"></script>
    <link type="text/css" rel="stylesheet" href="mapbox-gl.min.css">

还有自己定义的js文件

	 <script type="text/javascript" src="decklayer.js"></script>
	 <script type="text/javascript">
	     styleLoad();
	 </script>

页面添加图层

定义好map容器后在js里将地图添加到容器中

    <div id="map"></div>

 	var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326";
    var map, popup;
    var attribution = "3Dbar-demo";

    map = new mapboxgl.Map({
   
   
        container: 'map',
        style: {
   
   
            "version": 8,
            "sources": {
   
   
                "raster-tiles": {
   
   
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256,
                },
            },
            "layers": [{
   
   
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        },
        center: [104.038567,30.650149],
        zoom: 13,
        pitch: 40,
        bearing: 0
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

点数据转换矩形面数据

我的数据集是geojson点数据集格式

  	/**
     * 初始化数据
     */
    var geometry = {
   
   
        "features":[
            {
   
   
                "geometry":{
   
   
                    "coordinates":[
                        []
                    ],
                    "type":