mapboxgl根据GeoJSON点线面创建及定位操作

mapboxgl的开发很方便,图层创建、图层的要素更新、图层要素点击、要素信息框、定位到要素、地图鼠标样式等操作很多,总结了一些代码,共享给大家。

关键是:map.addSource、 map.addLayer、设置layer的paint、mapboxgl.Popup、map.fitBounds、map.flyTo、map.getCanvas().style.cursor、 map.getSource('geodataPolygon').setData

先创建一个mapboxgl的地图吧,代码如下:

 var map, graphicLayer;

      
        map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": ["https:///mt0.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}", "https:///mt1.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}", "https:///mt2.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}", "https:///mt3.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"],
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [104.064013, 30.54742],
            zoom: 12.64
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

 

mapboxgl根据多类型的GeoJSON数据(含Point Polygon LineString)创建

//多类型的数据含Point Polygon LineString
        var geojson = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {
                    "name": "天府三街"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [104.06303023033792, 30.54675753000589]
                }
            },
              {
                  "type": "Feature",
                  "properties": {
                      "name": "天府五街"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [104.06056505865428, 30.537889923501893]
                  }
              }
              ,
              {
                  "type": "Feature",
                  "properties": {
                      "name": "银泰城"
                  },
                  "geometry": {
                      "coordinates": [[[104.05734538204854, 30.542126961366336], [104.05733923297134, 30.540628203046936], [104.06044451507631, 30.540659979072146], [104.06041991880102, 30.542142849135033], [104.05734538204854, 30.542126961366336]]],
                      "type": "Polygon"
                  }
              },
              {
                  "type": "Feature",
                  "geometry": {
                      "type": "LineString",
                      "properties": { "name": "天府大道" },
                      "coordinates": [
                          [104.06913702979529, 30.546739585129146],
                          [104.06907454389955, 30.54592791405807],
                          [104.06912588372228, 30.544417223111353],
                          [104.06914299695103, 30.542508560460377]
                      ]
                  }
              }
            ]
        };

 //多种类型的数据一起初始化
        function initGeometryMutil() {
            map.addSource('geodata', { type: 'geojson', data: geojson });
            map.addLayer({
                "id": "polygonlayer",
                "type": "fill",
                "source": "geodata",
                "paint": {
                    "fill-color": "red",
                    "fill-opacity": 0.4
                },
                "filter": ["==", "$type", "Polygon"]
            });

            map.addLayer({
                'id': 'pointlayer',
                'type': 'circle',
                'source': "geodata",
                "filter": ["==", "$type", "Point"],
                'paint': {
                    // make circles larger as the user zooms from z12 to z22
                    'circle-radius': {
                        'base': 1.75,
                        'stops': [[12, 2], [22, 180]]
                    },
                    "circle-color": "#B42222"
                }
            });
            map.addLayer({
                'id': 'linelayer',
                'type': 'line',
                'source': "geodata",
                "filter": ["==", "$type", "LineString"],
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#BF93E4",
                    "line-width": 5
                }
            });

        }

单独的点、线、面类型GeoJSON创建

 var geojsonPoints = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {
                    "name": "天府三街"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [104.06303023033792, 30.54675753000589]
                }
            },
              {
                  "type": "Feature",
                  "properties": {
                      "name": "天府五街"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [104.06056505865428, 30.537889923501893]
                  }
              }
              
            ]
        };
        var geojsonPolygon = {
            "type": "FeatureCollection",
            "features": [
              {
                  "type": "Feature",
                  "properties": {
                      "id":1,
                      "name": "银泰城"
                  },
                  "geometry": {
                      "coordinates": [[[104.05734538204854, 30.542126961366336], [104.05733923297134, 30.540628203046936], [104.06044451507631, 30.540659979072146], [104.06041991880102, 30.542142849135033], [104.05734538204854, 30.542126961366336]]],
                      "type": "Polygon"
                  }
              }
            ]
        };
        var geojsonLine = {
            "type": "FeatureCollection",
            "features": [
              {
                  "type": "Feature",
                  "properties": {
                      "id": 1,
                      "name": "天府大道"
                  },
                  "geometry": {
                      "type": "LineString",
                      "coordinates": [
                          [104.06913702979529, 30.546739585129146],
                          [104.06907454389955, 30.54592791405807],
                          [104.06912588372228, 30.544417223111353],
                          [104.06914299695103, 30.542508560460377]
                      ]
                  }
              }
            ]
        };

//仅初始化点类型
        function initPoints()
        {
            map.addSource('geodataPoint', { type: 'geojson', data: geojsonPoints });
            map.addLayer({
                'id': 'pointlayer',
                'type': 'circle',
                'source': "geodataPoint",
                'paint': {
                    // make circles larger as the user zooms from z12 to z22
                    'circle-radius': {
                        'base': 1.75,
                        'stops': [[12, 2], [22, 180]]
                    },
                    //'circle-radius':13,
                    "circle-color": "#B42222"
                }
            });
        }
        //仅初始化线类型
        function initLines() {
            map.addSource('geodataLine', { type: 'geojson', data: geojsonLine });
            map.addLayer({
                'id': 'linelayer',
                'type': 'line',
                'source': "geodataLine",
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#BF93E4",
                    "line-width": 5
                }
            });
        }
        //仅初始化面类型
        function initPolygon()
        {
            map.addSource('geodataPolygon', { type: 'geojson', data: geojsonPolygon });
            map.addLayer({
                "id": "polygonlayer",
                "type": "fill",
                "source": "geodataPolygon",
                "paint": {
                    "fill-color": "red",
                    "fill-opacity": 0.4
                }
            });
        }

 

点击线、面图层,显示信息框

// 点击 面 图层的符号,显示信息
        map.on('click', 'polygonlayer', function (e) {
            //map.flyTo({ center: e.features[0].geometry.coordinates });
            //var boundingBox = getPolygonBoundingBox(e.features[0]);
            //map.fitBounds(boundingBox, { padding: 200 });
            var coordinates = e.lngLat;
            var description = e.features[0].properties.id + "
" + e.features[0].properties.name; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; }//防止数据越界 new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); }); //点击 线 图层的符号,显示信息 map.on('click', 'linelayer', function (e) { var coordinates = e.lngLat; var description = e.features[0].properties.id + "
" + e.features[0].properties.name; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; }//防止数据越界 new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); });

 

定位到点、线、面

//定位到某一个面
        document.getElementById("btnZoom2FirstPolygon").onclick = function () {
            if (geojsonPolygon.features.length == 0) {
                alert("已经没有多边形面Feature了,至少有一条才能定位");
                return;
            };
            var boundingBox = getPolygonBoundingBox(geojsonPolygon.features[0]);
            map.fitBounds(boundingBox, { padding: 200 });
        };

        //定位到某一条线
        document.getElementById("btnZoom2FirstLine").onclick = function () {
            if (geojsonLine.features.length == 0) {
                alert("已经没有线Feature了,至少有一条才能定位");
                return;
            };
            // Geographic coordinates of the LineString
            var coordinates = geojsonLine.features[0].geometry.coordinates;

            // Pass the first coordinates in the LineString to `lngLatBounds` &
            // wrap each coordinate pair in `extend` to include them in the bounds
            // result. A variation of this technique could be applied to zooming
            // to the bounds of multiple Points or Polygon geomteries - it just
            // requires wrapping all the coordinates with the extend method.
            var bounds = coordinates.reduce(function (bounds, coord) {
                return bounds.extend(coord);
            }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

            map.fitBounds(bounds, {
                padding: 20
            });
        };

        //定位到某一个点
        document.getElementById("btnZoom2FirstPoint").onclick = function () {
            if (geojsonPoints.features.length == 0) {
                alert("已经没有线Feature了,至少有一点才能定位");
                return;
            };
            // Geographic coordinates of the LineString
            var coordinates = geojsonPoints.features[0].geometry.coordinates;
            var xy = new mapboxgl.LngLat(coordinates[0], coordinates[1]);
            map.flyTo({center:xy,  zoom:16});

          
        };
        
        function getPolygonBoundingBox(feature) {
            // bounds [xMin, yMin][xMax, yMax]
            var bounds = [[], []];
            var polygon;
            var latitude;
            var longitude;

            for (var i = 0; i < feature.geometry.coordinates.length; i++) {
                if (feature.geometry.coordinates.length === 1) {
                    // Polygon coordinates[0][nodes]
                    polygon = feature.geometry.coordinates[0];
                } else {
                    // Polygon coordinates[poly][0][nodes]
                    polygon = feature.geometry.coordinates[i][0];
                }

                for (var j = 0; j < polygon.length; j++) {
                    longitude = polygon[j][0];
                    latitude = polygon[j][1];

                    bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude;
                    bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude;
                    bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude;
                    bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude;
                }
            }

            return bounds;
        }

设置mapboxgl图层鼠标的样式

 // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
        map.on('mouseenter', 'polygonlayer', function () {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'polygonlayer', function () {
            map.getCanvas().style.cursor = '';
        });

通过操作mapboxgl中GeoJSON的数据,更新Source来实现图层数据的新增、修改、删除

 document.getElementById("btnAddData").onclick = function () {
            geojsonPolygon.features.push(
                {
                    "type": "Feature",
                    "properties": {
                        "id":2,
                        "name": "香年广场"
                    },
                    "geometry": {
                        "coordinates": [[[104.06580881154582, 30.545463011873835], [104.06579777330768, 30.54478171727888], [104.06711500077967, 30.544753197865305], [104.06711132135428, 30.54549153107891], [104.06580881154582, 30.545463011873835]]],
                        "type": "Polygon"
                    }
                }
            );

            map.getSource('geodataPolygon').setData(
               geojsonPolygon
            );
        };
        document.getElementById("btnGetDataAndUpdate").onclick = function () {
            for(var i=0; i

 

 

你可能感兴趣的:(GIS开发,mapboxgl)