mapbox-gl-js版本:0.53.1
浏览器:谷歌Chrome版本73.0.3683.86(官方版本)(64位)和Firefox 66.0.2(64位)
操作系统:MacOS Mojave 10.14.4
触发行为的步骤
this.currentMap.on('click', layerId, callbackFunc)
单击事件这些功能位于由定义的源构成的层上(如下所示):
{
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [X, Y]
},
'properties': o
}, ...]
}
以及下面定义的图层:
{
'id': <layerId>,
'type': 'circle',
'source': <sourceId>,
'minzoom': <displayAtZoomLevel>,
'icon-allow-overlap': true,
'paint': {
// make circles larger as the user zooms from <displayAtZoomLevel> to z22
'circle-radius': {
'base': 2,
'stops': [[<displayAtZoomLevel>, 3], [22, 180]]
},
// https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
'circle-color': '#fff',
'circle-stroke-width': 1,
'circle-stroke-color': '#204da2'
}
}
预期的行为
使用标记,地图应显示为正常
实际行为
使用以下代码添加地图标记时,地图会显示特别是在道路等上的乱码文物:
setMarker (markerContext, { lng, lat }, requestRouteCallback) {
let lngLat = [Number(lng), Number(lat)]
if (lngLat.length) {
const marker = new mapboxgl.Marker().setLngLat(lngLat).addTo(this.currentMap)
if (markerContext === 'start') {
if (this.startEndMarkers.start) {
this.startEndMarkers.start.remove()
}
this.startEndMarkers.start = marker
} else if (markerContext === 'end') {
if (this.startEndMarkers.end) {
this.startEndMarkers.end.remove()
}
this.startEndMarkers.end = marker
}
this.currentMap.flyTo({ center: lngLat, zoom: 12, curve: 2 })
}
}
地图显示了这个:
最初在Mapbox GL的github上发布这个可能暗示地图正在街道上绘制虚线路径。我发现它似乎发生在下面的地图进行一些移动时,如平移或缩放。如果我在地图上放置标记而不引起任何移动,则不会出现工件。
到目前为止,我已经找到了解决问题的方法,但我仍然不知道为什么。
我将事件对象传递给其他一些函数,点击并从事件对象中拉出地图特征。
如果我在将事件对象传递给其他函数之前深度克隆事件对象中的特征,则不会出现该工件。