时间戳

首页 > 解决方案 > 传单 - 更改和恢复多边形要素样式

leaflet - 传单 - 更改和恢复多边形要素样式

问题描述

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

我想出了以下应用程序：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; 
}

有什么想法吗？

标签： leafletstylespolygonoverlap

解决方案

使用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';
    }
});

推荐阅读