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

そのところであなたは層が

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

をロードされた後 geofence()関数が呼び出されることを確認することができ、これらの層を追加した後、マップ上のロード関数内 geofence()機能を追加しよう