我有一张地图,上面绘制了多个可相互重叠的多边形。我用leafletPip.pointInLayer(点,层)从https://github.com/mapbox/leaflet-pip用于确定哪些多边形确实重叠。这是在过程中发生的点击功能。在Vue对象中,创建带有多边形的地图和GeoJSON图层。我现在想要的是以下功能:如果您单击地图上的一个点,并且该点包含在多个多边形中,则您会拥有诸如选择工具之类的功能(例如在弹出窗口中),以单击这些多边形之一并触发.on('click')函数仅适用于此特定多边形。我搜索了所有Leaflet功能,但找不到任何真正有用的功能。现在,如果单击包含在多个多边形中的点,则只触发空间上包含其他多边形的多边形的.on('click')。
var mapVue = new Vue({
parent: vue_broadcaster,
el: '#map',
data: {
map: null,
layer: null
},
created: function () {
// Adding Leaflet map here
var map = L.map('map').setView([51.959, 7.623], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
this.$set('map', map);
this.get_zones();
},
methods: {
switch_zone: function (zoneid) {
this.$dispatch('zoneSelected', zoneid)
},
get_zones: function () {
this.$http.get('/api/zones/', function (data) {
// Creation of the GeoJSON layer
var geoZone = {
"type": "FeatureCollection",
"features": []
};
for (var i = 0; i < data['Zones'].length; i++) {
geoZone.features.push({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[]]
},
"properties": {
"name": ""
}
})
geoZone.features[i].properties.name = data['Zones'][i]['Name'];
for (var j = 0; j < data['Zones'][i]['Geometry']['Coordinates'].length; j++) {
geoZone.features[i].geometry.coordinates[0].push([data['Zones'][i]['Geometry']['Coordinates'][j][1], data['Zones'][i]['Geometry']['Coordinates'][j][0]])
}
this.layer = new L.geoJson(geoZone)
.bindPopup(data['Zones'][i]['Name'])
.on('click', dispatchZoneID(data['Zones'][i]['Zone-id'], this))
.on('click', function (e) {
processClick(e.latlng.lat, e.latlng.lng)
})
.addTo(this.map)
};
})
}
}
});
// function for processing the clicks on the map
function processClick(lat, lng) {
var info = '';
var point = [lng, lat];
var match = leafletPip.pointInLayer(point, mapVue.layer, false);
if (match.length) {
for (var i = 0; i < match.length; i++) {
info +=
"<b>" + match[i].feature.properties.name + "<br>"
}
}
if (info) {
mapVue.map.openPopup(info, [lat, lng]);
}
};
// not important for this one
function dispatchZoneID(id, vue) {
return function () {
vue.$dispatch('zoneSelected', id)
}
};
我找到了一种对我有用的解决方案,但这可能不是最优雅的解决方案。如果单击的点包含在多个多边形中(match.length> 1),则生成此信息字符串。在每次迭代中,for循环都会创建一个可点击的链接,然后根据id调用click上的函数。因此,我基本上必须在一个字符串中生成大量HTML,并使用文字和字符串连接。然后,我将openPopup函数以info作为我的html参数。
function processClick(lat, lng) {
var info = '';
var point = [lng, lat];
var match = leafletPip.pointInLayer(point, mapVue.layer, false);
if (match.length > 1) {
for (var i = 0; i < match.length; i++) {
id = match[i].feature.properties.zoneid;
name = match[i].feature.properties.name;
info +=
"<b><a onclick='dispatchZoneID(\"" + id + "\")();'>"+ name + "</a><br>"
}
}
else dispatchZoneID(mapVue.zoneid)();
if (info) {
mapVue.map.openPopup(info, [lat, lng]);
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句