如何处理“在图块中渲染的字形过多”在MAPBOX中警告？

问题描述

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

但是，根据当前版本的Mapbox，我无法执行此操作。一旦达到一定的限制（我猜是超过5万），我会收到一个地图框警告，并且也感觉发臭。

“在图块中渲染的字形过多。”

和

[。WebGL-0x7fa29181a600] GL错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性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
                        }
                    });
                }
            );
        });

我不知道如何处理此用例？

任何人都可以建议我缺少什么，或者需要添加什么来解决此问题或一些解决方法吗？

解决方法

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

,

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

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