前端之家

  1. 首页
  2. 问答

Mapbox GL JS获取在Geoson边界内的要素

• 问答

下面是一个完整的最小示例，该示例显示了在Choropleth层之上的点层。您只需要添加访问令牌即可使用。当用户在一个弧度边界内单击时，我想获取该边界内的点的列表。这样一来，我就可以使用这些数据来填充页面上其他位置的元素。我知道有些界限重叠，但是我不担心如何处理。

<head>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"></script>
  <link
    href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css"
    rel="stylesheet"
  />
</head>
<body>
  <div id="map" style="width: 800px; height: 800px;"></div>
  <script>
    mapboxgl.accessToken =
      "your token here";

    const geojson_url =
      "https://opendata.arcgis.com/datasets/d4d519d1d1a1455a9b82331228f77489_4.geojson";

    fetch(geojson_url)
      .then(res => res.json())
      .then(geojson => {
        const data = [
          { lat: "52.04009",long: "-0.52926" },{ lat: "51.45906",long: "-2.60329" },{ lat: "51.24257",long: "-0.58795" },{ lat: "51.51161",long: "-0.11625" },{ lat: "51.38113",long: "-2.36011" },{ lat: "51.449824",long: "-2.60034" },{ lat: "52.04009",{ lat: "51.06386",long: "-2.90667" },{ lat: "50.72623",long: "-3.5222" }
        ];

        const map = new mapboxgl.Map({
          container: "map",style: "mapbox://styles/mapbox/light-v10",zoom: 5.5,center: [-2.2,53]
        });

        map.on("load",function() {
          // choropleth
          geojson.features = geojson.features.map(feature => {
            feature["id"] = feature.properties.objectid;
            return feature;
          });
          map.addSource("leps",{
            type: "geojson",data: geojson
          });
          map.addLayer({
            id: "leps-fills",type: "fill",source: "leps",paint: {
              "fill-color": "green","fill-opacity": 0.5
            }
          });

          map.on("click","leps-fills",function(e) {
            // using this event,I would like to find all the points within the clicked boundary
            console.log("list of points here");
          });

          // point data layers
          // create points geojson data
          const pointMapGeojson = {
            type: "FeatureCollection",features: data.map((g,i) => {
              return {
                type: "Feature",properties: g,id: i,geometry: {
                  type: "Point",coordinates: [g.long,g.lat]
                }
              };
            })
          };

          map.addSource("point_layer",data: pointMapGeojson
          });
          map.addLayer({
            id: "point_layer",type: "circle",source: "point_layer",layout: {
              visibility: "visible"
            }
          });
        });
      });
  </script>
</body>
qzc105 回答：Mapbox GL JS获取在Geoson边界内的要素

您可以查看Turf.js。它提供了查找多边形内任何点的功能。 https://turfjs.org/docs/#pointsWithinPolygon

这里是示例：

mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlcHUiLCJhIjoiY2l6dXZ5OXVkMDByZDMycXI2NGgyOGdyNiJ9.jyTchGQ8N1gjPdra98qRYg';

var map = new mapboxgl.Map({
  container: 'map',style: 'mapbox://styles/mapbox/light-v10',center: [-46.6062,-23.5513],zoom: 11
});

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

  var points = turf.points([
      [-46.6318,-23.5523],[-46.6246,-23.5325],[-46.6062,[-46.663,-23.554],[-46.643,-23.557]
  ]);
  
  var searchWithin = turf.polygon([[
      [-46.653,-23.543],[-46.634,-23.5346],[-46.613,[-46.614,-23.559],[-46.631,-23.567],[-46.653,-23.560],-23.543]
  ]]);
  
  // Find point within polygon
  var ptsWithin = turf.pointsWithinPolygon(points,searchWithin);
  
  // Draw polygon
  map.addLayer({
    'id': 'searchWithin','type': 'fill','source': {
      'type': 'geojson','data': searchWithin
    },'layout': {},'paint': {
      'fill-color': '#525252','fill-opacity': 0.5
    }
  });
  // Draw all points
  map.addLayer({
    'id': 'points','type': 'circle','data': points
    },'paint': {
      'circle-radius': 5,'circle-color': 'red','circle-opacity': 1
    }
  });
  // Draw points within polygon feature
  map.addLayer({
    'id': 'ptsWithin','data': ptsWithin
    },'circle-color': 'blue','circle-opacity': 1
    }
  });
});
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<div id='map'></div>

javascriptmapboxmapbox-gl-js
本文链接：https://www.f2er.com/3029404.html

大家都在问