从地图框 API 获取地理 JSON 数据以确定多边形中的点

Get geoJSON data from mapbox API to determine point in polygon

本文关键字：多边形 数据 JSON 地图 API 获取      更新时间：2023-09-26

我最近按照本教程来确定标记显示的点是否位于定义的多边形内：https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/

效果很好，但他们使用 ajax 提取多边形地理 JSON 数据并将其应用于地图。我已经绘制了一张绘制了多边形区域的地图框地图。我正在使用他们的 API 来显示我的地图。我现在需要访问 geoJSON 数据来确定点是否在区域内。如何通过 API 访问该数据？

以下是我如何提取地图、geoJSON 和一个函数来测试一个点是否在 geoJSON 区域中：

//mapbox connection
var mapID = "<map-id>";
L.mapbox.accessToken = "<my-token>";
//init map
var map = L.mapbox.map("mapData", mapID, {
  attributionControl: false, 
  zoomControl: false
}).setView([53.799, -1.548], 13, {
  pan: { animate: true },
  zoom: { animate: true } 
});
//get geoJSON
var geoJson;
$http.get("https://a.tiles.mapbox.com/v4/" + mapID + "/features.json?access_token=" + L.mapbox.accessToken).success(function(data){
  geoJson = data;
});
//determine point in polygon
function determinePointInPolygon(){
  var coords = [-1.3, 5.2];
  var layer = leafletPip.pointInLayer(coords, L.geoJson(geoJson), true);
  if (!layer.length) //point not in polygon
  else //point is in polygon
}

集成功能将加载到L.mapbox.featureLayer中，该可作为L.mapbox.Map实例的成员使用。假设您将地图实例存储在名为map图层将map.featureLayer的引用中：

// Make sure the featureLayer is ready
map.featureLayer.on('ready', function (e) {
    // Loop over the features
    e.target.eachLayer(function (layer) {
        // Do your thing
        // here "layer" holds an instance of the marker/polygon/polyline
        // "layer.feature" holds the actual geojson feature
    });
});

下面是该概念的示例：http://plnkr.co/edit/D5IfRTLV0yXTqOmzNCYA?p=preview

如果您愿意，您还可以单独加载切片和要素，无需mapid即可实例化地图：

var map = L.mapbox.map('mapbox', null, {
    'center': [0, 0],
    'zoom': 1
});
var tileLayer = L.mapbox.tileLayer('yourMapId').addTo(map);
var featureLayer = L.mapbox.featureLayer('yourMapId').addTo(map);

示例：http://plnkr.co/edit/9pYeRu6UmxuVL1TLzwPR?p=preview

然后，您可以省略addTo方法，首先处理要素，然后将图层添加到地图：

var featureLayer = L.mapbox.featureLayer('yourMapId');
// Make sure the featureLayer is ready
featureLayer.on('ready', function (e) {
    // Loop over the features
    e.target.eachLayer(function (layer) {
        // Do your thing
    });
    // Add layer to the map
    e.target.addTo(map);
});

什么最适合你。但是我差点忘了实际回答你的问题（虽然我认为你不再需要这个了），实际的GeoJSON特征集合可以通过使用L.mapbox.FeatureLayer的getGeoJSON方法获得（当然，只有当图层准备好时）：

// Make sure the featureLayer is ready
featureLayer.on('ready', function (e) {
    // Fetch you featurecollection
    var geojson = e.target.getGeoJSON();
});

当你把它拉进去时，你可以将JSON存储在其他地方：

首先定义一个对象，你想在全局的某个地方存储它：

var geoJSON;

然后，当您将其拉入时，只需使用数据定义它

$.ajax({
    url: '/mapbox.js/assets/data/us-states.geojson',
    dataType: 'json',
    success: function load(d) {
        geoJSON = d; // THIS IS THE LINE I ADDED
        var states = L.geoJson(d).addTo(map);
        L.marker([38, -102], {
            icon: L.mapbox.marker.icon({
                'marker-color': '#f86767'
            }),
            draggable: true
        }).addTo(map)
        .on('dragend', function(e) {
            var layer = leafletPip.pointInLayer(this.getLatLng(), states, true);
            if (layer.length) {
              state.innerHTML = '<strong>' + layer[0].feature.properties.name + '</strong>';
            } else {
              state.innerHTML = '';
            }
        });
    }
});
相关文章：