如何处理 MAPBOX 中的 "Too many glyphs being rendered in a tile." 警告？

Question

我们有一个用例，我们必须在 Mapbox 的符号层中渲染大约 80,000 个或更多图标。

但根据当前版本的 Mapbox，我无法这样做。一旦达到某个限制（我猜超过 50K），我就会收到一个 mapbox 警告，并且感觉卡顿。

"Too many glyphs being rendered in a tile."

和

[.WebGL-0x7fa29181a600]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 4

附加 JSFiddle：

https://jsfiddle.net/dollysingh3192/jnypxcsd/8/

代码


    var latBounds = [-122, -77];
      var lngBounds = [30, 50];
      
    var features = [];
    
      for( var i=0; i<80000; i++ ){
        var lat = Math.random() * (latBounds[1]- latBounds[0] + 1) + latBounds[0];
        var lng = Math.random() * (lngBounds[1]- lngBounds[0] + 1) + lngBounds[0];
        features.push({
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [lat, lng]
          },
          "properties": {
            "title": "point_" +i,
            "marker-symbol": "harbor"
          }
        });
      }
      var geoJSON = {
        "type": "FeatureCollection",
        "features": features
      };
      
        mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
        var map = new mapboxgl.Map({
            container: 'map',
            center: [-7.370968683627908, -86.98521854932295],
            style: 'mapbox://styles/mapbox/streets-v11'
        });
    
        map.on('load', function() {
            map.loadImage(
                'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
                function(error, image) {
                    if (error) throw error;
                    map.addImage('cat', image);
                    map.addSource('point', {
                        'type': 'geojson',
                        'data':geoJSON
                    });
                    map.addLayer({
                        'id': 'points',
                        'type': 'symbol',
                        'source': 'point',
                        'layout': {
                            'icon-image': 'cat',
                            'icon-size': 0.1,
                            'icon-allow-overlap': true
                        }
                    });
                }
            );
        });

我不知道，如何处理这个用例？

任何人都可以建议我是否遗漏了什么或需要添加什么来解决这个问题或一些解决方法？

Answer 1

您可以使用聚类来减少地图上呈现的要素数量，请参阅 https://docs.mapbox.com/mapbox-gl-js/example/cluster/

中的示例

Answer 2

是的，Mapbox-GL-JS 对每个图块可以呈现的字形数量有限制。讨论了一下here.

因此您将不得不找到一些创造性的解决方法。请注意，限制是每个图块，因此根据您的情况，您可以生成更深的图块（避免过度缩放）。

如何处理 MAPBOX 中的 "Too many glyphs being rendered in a tile." 警告？

How to handle "Too many glyphs being rendered in a tile." warning in MAPBOX?

javascript

mapbox

mapbox-gl-js