Mapbox

Question

TLDR；如何向 mapbox "line" 类型图层添加弹出窗口？

我有一个加载 mapbox 地图并向其添加线条图层的功能。

我的目标是在单击该行时添加一个弹出窗口。我按照示例添加了一个点击事件。但这给了我一个错误。关于我做错了什么的任何指示？

   function renderLineLayer(layerName,data) {
        map.on('load', function() {
            map.addLayer({
                "id": layerName,
                "type": "line",
                "source": {
                    "type": "geojson",
                    "data": data

                },
                "layout": {
                    "line-join": "round",
                    "line-cap": "round",
                    "visibility":"visible"
                },
                "paint": {
                    "line-color": "blue",
                    "line-width": 8
                }
            });

            console.log(map.getLayer(layerName));        

            map.on('click', layerName, function (e) {
                console.log('click');                
                new mapboxgl.Popup()
                  .setLngLat(e.lngLat)
                  .setHTML(e.features[0].properties.name)
                  .addTo(map);

            });
        });

    }

我得到的错误是。

TypeError: listeners[i].call is not a function[Learn More]  mapbox-gl-dev.js:29779:13

Answer 1

这有点猜测，但是 on('click') 事件 API 最近发生了变化。以前它没有层参数 (IIRC)。如果您使用的是旧版本的 Mapbox-GL-JS 库，它会尝试调用您的第二个参数（图层名称），就好像它是一个函数一样，它会给出错误消息。

解决方法：更新到最新的Mapbox-GL-JS库版本(0.36)。

（我认为在线要素上鼠标点击的响应过程与点或多边形没有任何不同。）

Mapbox - 将 'on click' 事件添加到线层

Mapbox - adding 'on click' event to a line layer

mapbox-gl-js