如何使用MapBox-GL在弹出窗口中显示多个Geojson属性

Question

我正在尝试从带有点的地图上的弹出窗口中显示两个propeties。

这是Geojson文件中一项的示例：

{ "type": "Feature", "properties": { "LONG": 144.760809, "LAT": -37.866606, "STOP_ID": 19924, "STOP_NAME": "Aircraft  ", "2016_17_PATRONAGE": 294702, "2016_17_PATRONAGE_DAILY": 805.2, "METRO": "Yes" }, "geometry": { "type": "Point", "coordinates": [ 144.760809, -37.866606 ] } },

我试图同时显示stop_name和2016_17_patronage_daily属性。

我尝试查看此示例和这个示例，但似乎都没有用。

这是我到目前为止的代码（可行）：

map.on('click', 'layername', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.STOP_NAME;
    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(name)
    .addTo(map);
});

我使用以上示例尝试了此代码：

map.on('click', 'layername', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.STOP_NAME;
    var patronage = e.features[0].properties.2016_17_PATRONAGE;
    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(name) + ' (' + properties.2016_17_PATRONAGE + ')')
    .addTo(map);
});

这不起作用，我收到了一条消息：" syntaxerror：标识符在数字字面之后立即开始"

我是MapBox-GL-JS的新手，所以感谢任何帮助。

Answer 1

你很接近。只需将setHTML行更改为包括引用这两个属性的表达式：

.setHTML(e.features[0].properties.STOP_NAME + ' (' + e.feature[0].properties.2016_17_PATRONAGE + ')')

为方便起见，我倾向于这样做：

var p = e.features[0].properties;

所以这是：

.setHTML(p.STOP_NAME + ' (' + p.2016_17_PATRONAGE + ')')