Leaflet加载ArcGIS图层：使用esri-leaflet.js的identify方法实现点击获取保护区和面积

1. 实现的功能效果图如下图所示：

２.需要用到esri-leaflet.js，然后放到项目中

npm install esri-leaflet --save

３. 先保护区放到地图上

var envLayer = L.esri.dynamicMapLayer({ url: "mapserver的url", opacity: 0.8, transparent: true }); map.addLayer(this.envLayer);

４. 地图点击 事件 ，图层获取,并显示到地图上

  注：代码中visible是发布的mapserver服务中的层级，如下图所示，用的是图层２保护区的

 var selectedFeature; var queryCoordinates; map.on('click', function (e) {      if (selectedFeature) {        map.removeLayer(selectedFeature);      };       queryCoordinates = e.latlng;      envLayer.identify().at([e.latlng.lat, e.latlng.lng])        .on(map)        .layers("visible:2")        .tolerance(0)         .run(function (error, results) {                     selectedFeature = L.geoJson(results, {     //获取边界并定义            style: {              weight: 2,              opacity: 1,              color: 'red',              dashArray: '4',              fillOpacity: 0.2,              fillColor: '#FFEDA0'            },            onEachFeature: ((feature, layer) => { //对每个小块进行定义              var content = "<div style='width:180px; max-height:260px;overflow-y:auto'>";              console.log(feature);              delete feature.properties.bbox;               content = content + "<b>保护区名称:</b> " + feature.properties["保护区名称"] + "<br>";              content = content + "<b>功能分区:</b> " + feature.properties["功能分区"] + "<br>";              content = content + "<b>面积:</b> " + (parseInt(feature.properties["Shape_Area"]) / 1000 / 1000).toFixed(2) + "平方公里<br>";              content += "</div>";               var popup = L.popup()                .setLatLng(queryCoordinates)                .setContent(content)                .openOn(map);               layer.bindPopup(content);              })          }).addTo(map);                    map.fitBounds(selectedFeature.getBounds());          });     });    });

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删