ege*_*geo 1 javascript leaflet
我创建了几个 geoJSON 层。每个图层对象都有许多属性。当您单击任何图层的对象时,会显示一个弹出窗口,其中包含一个按钮,该按钮应显示有关图层和对象的扩展信息。如何:
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
let map = L.map('map').setView([10.1497326, -67.9283981], 7);
let data1 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-67.9283981, 10.1497326]
},
"properties": {
"id": 10,
"text": "Marker1"
}
}]
};
let data2 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-68.9283981, 11.1497326]
},
"properties": {
"id": 20,
"text": "Marker2"
}
}]
};
let lay1 = L.geoJson(data1, {
onEachFeature: function(feature, layer) {
layer.bindPopup(
feature.properties.id + '<br />' +
'<button id="open-div">Info</button>');
}
});
let lay2 = L.geoJson(data2, {
onEachFeature: function(feature, layer) {
layer.bindPopup(
feature.properties.id + '<br />' +
'<button id="open-div">Info</button>');
}
});
lay1.addTo(map);
lay2.addTo(map);
map.on('popupopen', function (e) {
$('#open-div').click(function (e) {
$(".leaflet-popup-close-button")[0].click();
showInfo();
});
});
function showInfo() {
// 1) How to get 'lay1' or 'lay2' object
// 2) How to get feature which was clicked
// 3) How to get all feature properties which was clicked
alert('Info');
}
</script>
Run Code Online (Sandbox Code Playgroud)
从弹出窗口获取源(标记),然后获取功能和属性
map.on('popupopen', function (e) {
var layer = e.popup._source;
$('#open-div').click(function (e) {
$(".leaflet-popup-close-button")[0].click();
showInfo(layer); // <-- pass layer to the function
});
});
function showInfo(layer) {
var properties = layer.feature.properties;
console.log(properties)
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1806 次 |
| 最近记录: |