Mapbox> Géofencing avec Turf.js sur les éléments rendus?

Question

J'essaie d'utiliser Mapbox/Turfjs pour comprendre le nombre de points dans un polygone. J'ai rendu mon polygone et mes points dans map.onload Est-il alors possible d'appeler Turf.js à partir d'une autre fonction APRÈS le polygone et des points ont été rendus à la carte?

Quelque chose comme ça ...?

$(document).ready(function(){ 

    mapboxgl.accessToken = 'eeeeeeeeee'; 

    map = new mapboxgl.Map({ 
     container: 'map', 
     style: 'mapbox://styles/mapbox/streets-v9', 
     center: [ 32.62939453125,1.7355743631421197], 
     zoom: 6.5, 
     pitch: 40,   
     maxZoom: 17 
    }); 


    map.on('load', function() { 

     //geofence data 
     map.addSource('fencedata', { 
      type: 'geojson', 
      data: 'data/fence.geojson' 
     }); 

     map.addLayer({ 
      id: 'fence', 
      type: 'fill', 
      "source": "fencedata", 
      'layout': {}, 
      'paint': { 
       'fill-color': '#FF0000', 
       'fill-opacity': 0.3 
      } 
     }); 


     //points data 
     map.addSource("pointdata", { 
      type: "geojson", 
      data: 'data/points.geojson', 
      cluster: true, 
      clusterRadius: 20 
     }); 

     map.addLayer({ 
      "id": "points", 
      "type": "circle", 
      "source": "pointdata", 
      "paint": { 
       'circle-color': 'rgba(255, 255, 46, 1.0)', 
       'circle-radius': 8 
      } 
     }); 


    }); 

    map.addControl(new mapboxgl.NavigationControl()); 



}); 


geofence();  


function geofence(){ 

    var ptsWithin = turf.within(points, fence); 
} 

Answer 1

Vous avez vos points comme GeoJSON, et votre polygone GeoJSON - donc, oui, vous pouvez utiliser TurfJS pour savoir quels sont les points dans le polygone. Il semble que le code que vous avez proposé est correct. Le fait que vous utilisez Mapbox n'est pas pertinent pour cette tâche particulière.

Si vous rencontrez un problème avec cette approche, indiquez-le dans votre question.

Answer 2

Essayez d'ajouter la fonction geofence() dans la fonction carte en charge après l'ajout de ces couches, par cette façon, vous pouvez vous assurer que la fonction geofence() est appelée après les couches ont été chargées

map.on('load', function() { 

    //geofence data 
    map.addSource('fencedata', { 
     type: 'geojson', 
     data: 'data/fence.geojson' 
    }); 

    map.addLayer({ 
     id: 'fence', 
     type: 'fill', 
     "source": "fencedata", 
     'layout': {}, 
     'paint': { 
      'fill-color': '#FF0000', 
      'fill-opacity': 0.3 
     } 
    }); 


    //points data 
    map.addSource("pointdata", { 
     type: "geojson", 
     data: 'data/points.geojson', 
     cluster: true, 
     clusterRadius: 20 
    }); 

    map.addLayer({ 
     "id": "points", 
     "type": "circle", 
     "source": "pointdata", 
     "paint": { 
      'circle-color': 'rgba(255, 255, 46, 1.0)', 
      'circle-radius': 8 
     } 
    }); 
    geofence(); 
    }); 
map.addControl(new mapboxgl.NavigationControl()); 
}); 

function geofence() { 
    var ptsWithin = turf.within(points, fence); 
}