传单 - 更改和还原面要素样式

Question

我用传单制作了一个小应用程序来显示有关多边形的信息。 以下是代码的工作原理：

• 十字准线显示在地图顶部的屏幕中央
• 地图平移时，十字准线仍位于屏幕中央
• 当十字准线与多边形重叠时，多边形信息将在div 中展开
• 该系统的目的是帮助移动设备上为非常小的多边形选择多边形

我想出了以下应用程序：https://www.laurentgontier.com/Crosshair/

我需要能够在十字准线重叠时更改多边形样式，并在十字准线离开多边形时恢复为默认样式。

到目前为止，我无法实现这一目标。

这是代码的一部分：

//Geojson layer display     
var geojsonLayer = new L.GeoJSON.AJAX("map.geojson",{       
onEachFeature: onEachFeature
});       
geojsonLayer.addTo(map);
//Crosshair display
var crosshairIcon = L.icon({
iconUrl: 'Cible.png',
iconSize:     [30, 30], // size of the icon
iconAnchor:   [15, 15], // point of the icon which will correspond to marker's location
});
crosshair = new L.marker(map.getCenter(), {icon: crosshairIcon, clickable:false});
crosshair.addTo(map);
// Move the crosshair to the center of the map when the user pans
map.on('move', function(e) {
crosshair.setLatLng(map.getCenter());
});
// Move the crosshair to the center of the map when the user pans
map.on('moveend', function(e) {
var hasHit = false;
var newCenter = map.getCenter();
geoJsonLayers.forEach(function(layer){
var currLayerFeature = layer.feature;
var layerPlace = currLayerFeature.properties.Place;
var layerCoordinates = currLayerFeature.geometry.coordinates[0]
var xp = [], yp =[];
for(var i = 0; i<layerCoordinates.length; i++){
xp.push(layerCoordinates[i][0]); yp.push(layerCoordinates[i][1]);
}
if(checkPointForHit(xp, yp , newCenter.lng, newCenter.lat)){
displayPlace.innerHTML = layerPlace; hasHit = true}
})
if(!hasHit)displayPlace.innerHTML = 'Not overlaping polygon'
});

function checkPointForHit(xp/*array of xpointsOfPolygon*/, yp /*array of ypointsOfPolygon*/, x, y) { 
var i, j, c = 0, npol = xp.length; 
for (i = 0, j = npol-1; i < npol; j = i++) { 
if ((((yp[i] <= y) && (y < yp[j])) || 
((yp[j] <= y) && (y < yp[i]))) && 
(x < (xp[j] - xp[i]) * (y - yp[i]) / (yp[j] - yp[i]) + xp[i])) { 
c =!c; 
} 
} 
return c; 
} 

对此有任何想法吗？

Answer 1

使用turfjs 库，然后使用booleanContains：

map.on('moveend', function(e) {
var hasHit = false;
geojsonLayer.resetStyle()
geoJsonLayers.forEach(function(layer){
var layerPlace = layer.feature.properties.Place;
if(turf.booleanContains(layer.toGeoJSON(),crosshair.toGeoJSON())){
displayPlace.innerHTML = layerPlace; 
hasHit = true;
layer.setStyle({color: 'red'});
}
})
if(!hasHit){
displayPlace.innerHTML = 'Not overlaping polygon';
}
});

将事件从moveend更改为move移动时颜色会更新

添加 DOM 脚本

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/@turf/turf@5.1.6/turf.min.js';    
document.getElementsByTagName('head')[0].appendChild(script);

map.on('move moveend', function(e) {
var hasHit = false;
var newCenter = map.getCenter();
geojsonLayer.resetStyle()
geoJsonLayers.forEach(function(layer){
var layerPlace = layer.feature.properties.Place;

if(turf.booleanContains(layer.toGeoJSON(),crosshair.toGeoJSON())){
displayPlace.innerHTML = layerPlace; 
hasHit = true;
layer.setStyle({color: 'red'});
}
})
if(!hasHit){
displayPlace.innerHTML = 'Not overlaping polygon';
}
});