从click事件设置mapbox-gl标记会导致奇怪的工件出现在VueJS中的地图上

问题描述 投票:0回答:1

mapbox-gl-js版本:0.53.1

浏览器:谷歌Chrome版本73.0.3683.86(官方版本)(64位)和Firefox 66.0.2(64位)

操作系统:MacOS Mojave 10.14.4

触发行为的步骤

  1. 在VueJS单页面应用程序中实现mapbox
  2. 在标记上选择要素所选要素触发使用this.currentMap.on('click', layerId, callbackFunc)单击事件
  3. callbackFunc运行下面描述的函数来在地图上设置标记。只有在地图上设置标记而不是单击事件时,才会显示工件
  4. 删除地图并销毁侦听器,但创建新的地图集实例仍会显示工件;只有完整的浏览器重新加载才会清除它,直到再次单击该功能

这些功能位于由定义的源构成的层上(如下所示):

{
      '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'
       }
    }

预期的行为

使用标记,地图应显示为正常

enter image description here

实际行为

使用以下代码添加地图标记时,地图会显示特别是在道路等上的乱码文物:

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 })
    }
}

地图显示了这个:

enter image description here

最初在Mapbox GL的github上发布这个可能暗示地图正在街道上绘制虚线路径。我发现它似乎发生在下面的地图进行一些移动时,如平移或缩放。如果我在地图上放置标记而不引起任何移动,则不会出现工件。

vue.js vuejs2 mapbox single-page-application mapbox-gl-js
1个回答
0
投票

到目前为止,我已经找到了解决问题的方法,但我仍然不知道为什么。

我将事件对象传递给其他一些函数,点击并从事件对象中拉出地图特征。

如果我在将事件对象传递给其他函数之前深度克隆事件对象中的特征,则不会出现该工件。

© www.soinside.com 2019 - 2024. All rights reserved.