信息框中的 Mapbox 地理编码搜索结果

Question

我想创建一个地图，每次用户使用地理编码器进行搜索时，地图顶部都会出现一个信息框，其中包含地理编码结果（点）下方的瓦片集的属性。每次使用地理编码器时，我都能够触发弹出窗口，并且每当我使用“map.queryRenderedFeatures”单击地图上的任何位置时都能成功地使信息框出现，但尝试将两者结合起来并不成功。似乎 map.queryRenderedFeatures 不喜欢使用地理编码中的坐标（geometry.coordinates）。谁能帮帮我？

<script>
    mapboxgl.accessToken = 'xxxxx';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'xxxxx',
    center: [-95.925, 29.575],
    zoom: 7
    });


  var businessgeocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    zoom: 15,
    placeholder: 'Business location',
     marker: {
     color: 'red'
     },
    mapboxgl: mapboxgl
    })


  map.addControl(businessgeocoder);


 map.on('load', function() {
      businessgeocoder.on('result', function(resultinfobox) {
          
          
          var point = map.project([resultinfobox.result.center[0], resultinfobox.result.center[1]]); 
                  console.log([resultinfobox.result.center[0], resultinfobox.result.center[1]])
                  console.log(point)
          var test = map.queryRenderedFeatures(point, {
              layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk'] 
              });
              if (!test.length) {
                 return;
                 }
               var censustracts = test[0];
               var censusblockgroups = test[1];
              
              console.log(censusblockgroups.properties.LMIPerc)
      });
    });
    

  
  
  map.on('click', function(clickinfobox) {
  var features = map.queryRenderedFeatures(clickinfobox.point, {
                 layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk'] 
                 });

  if (!features.length) {
    return;
  }

  var censustract = features[0];
  var censusblockgroup = features[1];
  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(clickinfobox.lngLat)
    .setHTML('<h4>' + censustract.properties.CountyName + '</h4><h4>' + censustract.properties.NAMELSAD + '</h4><h4>' + censusblockgroup.properties.NAMELSAD + '</h4>' +
             '<table><tr><th></th><th>CT</th><th>BG</th></tr><tr><td>Poverty Rate</td><td>' 
             + censustract.properties.PovRate + "%" + '</td><td>' 
             + censusblockgroup.properties.PovRate + "%" + '</td></tr><tr><td>LMI</td><td>' 
             + censustract.properties.LMIPerc + "%" + '</td><td>' + censusblockgroup.properties.LMIPerc + "%" + '</td></tr></table>'
            )
    .addTo(map);
  });  
    

</script>

Answer 1

我已经陷入这个陷阱很多次了。

map.queryRenderedFeatures() 采用 屏幕 坐标，以 像素 为单位。不是以度为单位的地理坐标。

您可以使用map.project(result.geometry.coordinates)获取屏幕坐标。