無法從 Mapbox GL 中的構建源層獲取功能

Question

我在這里想要實現的是在有人搜索地址時粉刷建築物。 這可以通過 map on click 事件來實現。 但它不適用於地理編碼器結果事件。 要從構建層獲取功能，我必須將 {x, y} 指向可以通過點擊事件實現的層。 但是當我使用地理編碼器“結果”事件時，它給出的是 {latitude, longitude} 坐標而不是 {x, y} 點。 我還嘗試使用 map.project() 轉換這些坐標，但沒有正確指向。 有沒有解決方法來實現這一點？ 檢查我的代碼：

 const bounds = [
        [-97.846976993, 30.167105159], // Southwest coordinates
        [-97.751211018, 30.242129961], // Northeast coordinates
      ];

      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/smallcrowd/cl07a4926001b15pnu5we767g",
        center: [-79.4512, 43.6568],
        zoom: 13,
        // maxBounds: bounds,
      });

      // Add the control to the map.
      const geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl,
      });

      map.on("load", function () {
        var layers = map.getStyle().layers;

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
          if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
            labelLayerId = layers[i].id;
            break;
          }
        }

        map.addLayer(
          {
            id: "3d-buildings",
            source: "composite",
            "source-layer": "building",
            type: "fill",
            minzoom: 10,
            paint: {
              "fill-color": "#aaa",
            },
          },
          labelLayerId
        );

        map.addSource("currentBuildings", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [],
          },
        });
        map.addLayer(
          {
            id: "highlight",
            source: "currentBuildings",
            type: "fill",
            minzoom: 15,
            paint: {
              "fill-color": "#f00",
            },
          },
          labelLayerId
        );

        // Working perfectly on click, it is painting the address but I do not want the address to be clicked rather it should be painted on searched.
        map.on("click", "3d-buildings", (e) => {
          map.getSource("currentBuildings").setData({
            type: "FeatureCollection",
            features: e.features,
          });
        });

        //not working because the 3d-building layer wants input as x,y point which I tried to convert result's coordinates into point but map.project is giving wrong points as compared to mouse clicked points
        geocoder.on("result", (e) => {
          var coordinates = e.result.geometry.coordinates;
          const point = map.project(coordinates);

          const selectedFeatures = map.queryRenderedFeatures(point, {
            layers: ["3d-buildings"],
          });
          console.log(point);
          map.getSource("currentBuildings").setData({
            type: "FeatureCollection",
            features: selectedFeatures.features,
          });
        });
       });

任何幫助將不勝感激 ！

Answer 1

所以如果我理解正確的話：

1. 用戶搜索地址
2. Map 以所選地址為中心縮放
3. 現在您想知道所選地址的屏幕 X/Y 坐標是多少

很簡單：它恰好位於視口的中心。 所以你可以做類似的事情：

const x = map.getContainer().getClientRects()[0].width / 2;
const y = map.getContainer().getClientRects()[0].height / 2;

在第 1 步之后，您可能需要等到 map 實際完成移動並加載源功能。我會使用map.once('idle', ...)