时间戳

首页 > 解决方案 > 您如何为 MapBox GS JS 中的点分配小文本标签，并将悬停/单击信息框分配给相同的？

javascript - 您如何为 MapBox GS JS 中的点分配小文本标签，并将悬停/单击信息框分配给相同的？

问题描述

我有这个：

...
map.addSource('houses', { type: 'geojson', data: 'http://127.0.0.1/houses/houses.geojson' });
map.addLayer
({
    'id': 'houses-layer',
    'type': 'circle',
    'source': 'houses',
    'paint':
    {
        'circle-radius': 8,
        'circle-stroke-width': 2,
        'circle-color': 'red',
        'circle-stroke-color': 'white'
    }
});

这会在我的地图上放置一堆红点。这是一个好的开始。但我不知道如何在红色圆圈上方放置一个小文本，以及如何制作，如果您将鼠标光标悬停在其中一个上方，或单击其中一个，它会弹出一个信息框更多信息。

你如何做到这一点？我已经浏览 MapBox GS JS 手册好几个小时了，除了纯属意外之外，我什么也没找到。

标签： javascriptmapbox-gl-js

解决方案

但我不知道如何在红色圆圈上方放置一个小文字

使用具有值的symbol图层text-offset。

如果您将鼠标光标悬停在其中一个上方

map.on('mouseover', 'mytextlabels', e => ...)

或单击其中之一

map.on('click', 'mytextlabels', e => ...)

它会弹出一个包含更多信息的信息框。

使用Popup.

推荐阅读