Mapbox GL JS獲取在Geoson邊界內的要素

Question

下面是一個完整的最小示例，該示例顯示了在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", long: "-0.52926" },
          { 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", {
            type: "geojson",
            data: pointMapGeojson
          });
          map.addLayer({
            id: "point_layer",
            type: "circle",
            source: "point_layer",
            layout: {
              visibility: "visible"
            }
          });
        });
      });
  </script>
</body>

Answer 1

您可以看一下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, -23.5513], [-46.663, -23.554], [-46.643, -23.557] ]); var searchWithin = turf.polygon([[ [-46.653,-23.543], [-46.634,-23.5346], [-46.613,-23.543], [-46.614,-23.559], [-46.631,-23.567], [-46.653,-23.560], [-46.653,-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', 'source': { 'type': 'geojson', 'data': points }, 'layout': {}, 'paint': { 'circle-radius': 5, 'circle-color': 'red', 'circle-opacity': 1 } }); // Draw points within polygon feature map.addLayer({ 'id': 'ptsWithin', 'type': 'circle', 'source': { 'type': 'geojson', 'data': ptsWithin }, 'layout': {}, 'paint': { 'circle-radius': 5, '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>

Mapbox GL JS獲取在Geoson邊界內的要素

問題描述

1 個解決方案

解決方案1
0 2019-11-26 12:42:07

Mapbox GL JS獲取在Geoson邊界內的要素

問題描述

1 個解決方案

解決方案1 0 2019-11-26 12:42:07

解決方案1
0 2019-11-26 12:42:07