admin管理员组

文章数量:1654293

 

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());


        });

    });
    });

 

本文标签： 保护区图层加载面积事件

版权声明：本文标题：leaflet 加载arcgis图层（esri-leaflet.js中的identify方法），点击事件，获取保护区，面积 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729649575a1208880.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。