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

Mapbox＆gt;在渲染元素上使用Turf.js进行地理围栏？

2 个答案: