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

Question

我想创建一个地图，每次用户使用地理编码器搜索时，地图顶部都会出现一个信息框，地理编码结果(点(下方会显示波浪集的属性。每次使用地理编码器时，我都能触发弹出窗口，并且每当我使用"；map.queryRenderedFeatures"；，但试图将两者结合起来却没有成功。map.queryRenderedFeatures似乎不喜欢使用地理编码中的坐标(几何坐标(。有人能帮我吗？

<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)来获取屏幕坐标。