Javascript 使用mapbox gl js在地图上显示侧列表中所选项目的弹出窗口

我遵循本教程，并设法使其适应我的数据，即多边形而不是点

但是，侧边菜单上的弹出窗口不会显示，当我将鼠标放在其中一个位置上时，弹出窗口不会显示在地图上，指示应该显示的位置。 我认为问题在于，由于它是一个多边形而不是一个点（一对坐标），代码无法显示位置，因此控制台中的错误是：

"Uncaught Error:` LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>] "

下面是一个类似代码的代码笔：

---

调试：

长话短说，您使用的源包括

多边形

和

多多边形

特征，因此您选择的特征坐标有时是数组，有时是多维数组

有不同的方法来解决这个问题

又快又脏

弹出窗口
.setLngLat（feature.geometry.coordinates[0][0]）//只需添加[0][0]
塞特克斯先生(
feature.properties.NM_UF+
' (' +
feature.properties.SIGLA_UF+
')'
)
.addTo（地图）；

这只是工作，但位置上的第一个多边形的第一点弹出提示。。。不一定是最好的，但它很管用

第二种方法是我要做的

通过方法找到任何特征的中心

我已经基于您的更改创建了这个，包括了一个

getFeatureCenter

方法

函数getFeatureCenter（功能）{
设中心=[]；
设纬度=0；
设经度=0；
设高度=0；
设坐标=[]；
特征。几何。坐标。forEach（函数（c）{
让dupe=[]；
如果（feature.geometry.type==“MultiPolygon”）
dupe.push（…c[0]）；//深度克隆以避免修改原始阵列
其他的
dupe.push（…c）；//深度克隆以避免修改原始阵列
dupe.splice（-1，1）；//mapbox中的特征重复末尾的第一个坐标。我们将其删除。
坐标=坐标concat（dupe）；
});
如果（feature.geometry.type==“点”）{
中心=坐标[0]；
}
否则{
坐标。forEach（函数（c）{
纬度+=c[0]；
经度+=c[1]；
});
中心=[纬度/坐标.length，经度/坐标.length]；
}
返回中心；
}

然后在您的呼叫中切换到弹出窗口

弹出窗口
.setLngLat（getFeatureCenter（feature））//调用新方法并享受！
塞特克斯先生(
feature.properties.NM_UF+
' (' +
feature.properties.SIGLA_UF+
')'
)
.addTo（地图）；

如果特征中心是

点

、

多边形

或

多多边形

，则会独立查找特征中心

---

注-如果此答案解决了您的问题，请将其标记为“已接受答案”，这样也会帮助其他用户知道它是正确的解决方案。

它成功了！你的回答启发了我用另一种方法来解决这个问题。在QGIS中，我计算了多边形的质心，并将它们保存在X列和Y列中。然后我将它们加载到一个变量中：var X=feature.properties.X；var Y=feature.properties.Y；坐标=[X，Y]如果我能帮上忙，我很高兴！

var prop = feature.properties;
var item = document.createElement('a');
item.href = prop.wikipedia;
item.target = '_blank';
item.textContent = prop.NM_UF + ' (' + prop.SIGLA_UF + ')';
item.addEventListener('mouseover', function () {
    // Highlight corresponding feature on the map
    popup
        .setLngLat(feature.geometry.coordinates)
        .setText(
            feature.properties.NM_UF +
            ' (' +
            feature.properties.SIGLA_UF +
            ')'
        )
        .addTo(map);
});
listingEl.appendChild(item);
    });