Question

我正在尝试向Mapbox GL JS中的地图图标添加弹出窗口。到目前为止，我一直没有成功。

当我创建一个图层时，在该图层的数据中，我指定了几个属性。但是，当我尝试向图标添加弹出窗口时，所有属性都不存在。尝试访问它们只会返回undefined。

添加图层：

function addRedAirports() {
    map.addSource('hoggitRed', {
        type: 'geojson',
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 10, // Radius of each cluster when clustering points (defaults to 50)
        data: redAirportArray[0]
    });
    map.addLayer({
        "id": 'reds',
        "type": "symbol",
        "source": "hoggitRed",
        "layout": {
            "icon-image": "redIcon",
            "icon-size": 0.075,
            "icon-anchor": "bottom",
            "icon-allow-overlap": true
        }
    });

以下是数据的内容（redAirportArray [0]）。我正在遍历一个api获取此数据。

当我将此数据传递到mapbox时，属性是完整且正确的。但是，当我尝试访问它们以弹出窗口时，却无法定义。控制台记录mapbox层时，控制台不显示任何输入的属性。

（我将代码略作压缩。每个循环我创建一个功能，然后将其推送到功能集合。为了简单起见，我将这两个代码合并在一起）

let redAirportArray = [{
    "type": "FeatureCollection",
    "features": [{
    "type": "Feature",
    "properties": { //SETTING THE PROPERTIES
        "test": 'test',
        "ID": airportsRed[x].Id,
        "team": airportsRed[x].Coalition
    },
    "geometry": {
        "type": "Point",
        "coordinates": [airportsRed[x].LatLongAlt.Long, airportsRed[x].LatLongAlt.Lat]
    }
}]

点击添加弹出窗口

map.on('click', 'reds', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    let team = e.features[0].properties.ID;


    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(team)
    .addTo(map);
});

预先感谢，希望您能提供帮助！

Answer 1

使用当前添加图层的方式，您正在错误的位置寻找properties。由于e.features[0]是您刚刚单击的功能，因此未定义e。您的弹出代码应如下所示：

map.on('click', 'reds', function (e) {
    var coordinates = e.geometry.coordinates.slice(); // Changed
    let team = e.properties.ID; // Changed


    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(team)
    .addTo(map);
});

Mapbox-未定义点击指针

1 个答案: