Mapbox>在呈現的元素上使用Turf.js進行地理圍欄？

Question

我正在嘗試使用Mapbox/Turfjs來了解多邊形中有多少個點。我已經渲染了我的多邊形和點map.onload然後可以調用Turf.js從另一個函數後多邊形和點已渲染到地圖？

這樣的事情......？

$(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

你有你的點作爲GeoJSON的，和你的多邊形作爲GeoJSON的 - 所以，是的，你可以使用TurfJS找出哪些點是多邊形內。看起來你提出的代碼是正確的。您使用Mapbox的事實與此特定任務無關。

如果您遇到此方法的問題，請在您的問題中指出。

Answer 2

嘗試添加geofence()功能在地圖上加載函數中添加這些層，通過這種方式後，就可以確保該geofence()函數被調用層已經被加載後

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); 
}