admin管理员组文章数量:1654289
1. 实现的功能效果图如下图所示:
2.需要用到esri-leaflet.js,然后放到项目中
npm install esri-leaflet --save
3. 先保护区放到地图上
var envLayer = L.esri.dynamicMapLayer({
url:
"mapserver的url",
opacity: 0.8,
transparent: true
});
map.addLayer(this.envLayer);
4. 地图点击事件,图层获取,并显示到地图上
注:代码中visible是发布的mapserver服务中的层级,如下图所示,用的是图层2保护区的
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://www.elefans.com/dongtai/1729649575a1208880.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论