Mapbox GL JS 在一定的缩放/距离后不渲染图层

Question

我有一张用mapbox-gl 渲染的地图，只有两层，一个标记和一个以点为中心的圆圈。距离是动态的，因为它基于以米为单位的预定义距离。

但是，在放大并远离中心后，图层会突然从地图渲染中消失。我尝试在 geojson 源上实现 maxzoom 并将容差设置为 0，但是在距中心一定的缩放/距离后，图层似乎仍然消失。

显示平移时发生的情况的 GIF：https://imgur.com/a/fzfX6z7

我是否错过了一些提高/扩大渲染距离的属性？我不打算使用很多点，所以性能不应该成为这个用例的问题。

<template>
  <div id="mapContainer" class="basemap"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import mapboxgl, { CircleLayer } from 'mapbox-gl'

export default defineComponent({
  name: 'Map',
  mounted: function () {
    mapboxgl.accessToken =
      'abc'
    const map: mapboxgl.Map = new mapboxgl.Map({
      container: 'mapContainer',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [101.58165, 3.03837],
      zoom: 13,
      maxZoom: 17
    })

    const geofence = [
      {
        name: 'Location 1',
        lat: 3.037479466090297,
        lng: 101.58102250675641,
        distance: 1000
      }
    ]

    map.on('load', function () {
      map.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', function (error, image) {
        if (error) throw error
        if (image) {
          map.addImage('custom-marker', image)

          map.addSource('points', {
            type: 'geojson',
            data: {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [geofence[0].lng, geofence[0].lat]
              },
              properties: {
                title: geofence[0].name,
                distance: geofence[0].distance
              }
            },
            maxzoom: 22,
            tolerance: 0
          })

          map.addLayer({
            id: 'points',
            type: 'symbol',
            source: 'points',
            layout: {
              'icon-image': 'custom-marker',
              'text-field': ['get', 'title'],
              'text-font': ['Open Sans Semibold'],
              'text-offset': [0, 1.25],
              'text-anchor': 'top'
            }
          })

          const circleLayer: CircleLayer = {
            id: 'geofence',
            type: 'circle',
            source: 'points',
            paint: {
              'circle-radius': {
                stops: [
                  [0, 0],
                  [21, metersToPixelsAtMaxZoom(geofence[0].distance, geofence[0].lat)]
                ],
                base: 2
              },
              'circle-opacity': 0.5,
              'circle-color': 'blue',
              'circle-stroke-width': 2,
              'circle-stroke-color': 'black'
            }
          }
          map.addLayer(circleLayer)
        }
      })
    })
  }
})

const metersToPixelsAtMaxZoom = (meters: any, latitude: any) => meters / 0.075 / Math.cos((latitude * Math.PI) / 180)
</script>

<style lang="scss">
#mapContainer {
  width: auto;
  height: 400px;
}
</style>

显示的代码在 TypeScript 中，但我确信删除类型会呈现它。

Answer 1

我认为您看到了 Mapbox GL JS 并不真正支持的边缘案例。

处理这个问题的更好方法是使用 TurfJS 创建一个带有circle() 的多边形并将其添加为geojson 层。