无法从 Mapbox GL 中的构建源层获取功能

Question

我在这里想要实现的是当有人搜索地址时粉刷建筑物。这可以通过单击事件中的地图来实现。但它不适用于地理编码器结果事件。要从构建层获取功能，我必须将 {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

所以如果我理解正确的话：

用户搜索地址
地图以所选地址为中心缩放
现在您想知道所选地址的屏幕X/Y坐标是什么

很简单：它正好位于视口的中心。所以你可以做类似的事情：

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

在第 1 步之后，您可能必须等到地图实际完成移动并且源要素已加载。我会使用 map.once('idle', ...)

无法从 Mapbox GL 中的构建源层获取功能

Cannot get features from building source layer in Mapbox GL

javascript

jquery

mapbox

mapbox-gl-js