Question

我使用来自GeoJSON的Mapbox GL JS显示多边形，其中每个要素在名为color的属性中都有一个额外字段。该字段的值定义了多边形的颜色。

我有大约680个功能，但是当我运行JavaScript时，我收到以下错误：

Geometry exceeds allowed extent, reduce your vector tile buffer size

我的应用程序有完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'mapbox-token';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-74.07231699675322, 4.66336863727521],
    zoom: 12
});

map.on('load', function () {
    map.addSource('fulfillment', {
      'type': 'geojson',
      'data': 'https://gist.githubusercontent.com/vero4karu/b5019c0117876711b6570f188ee9fae8/raw/54c9612d325eaca7e79fda74c405eb019ffdabf4/fulfillment.geojson'
    });

    map.addLayer({
      "id": "fulfillment-polygon",
      "type": "fill",
      "source": "fulfillment",
      "paint": {
        "fill-color": {
          property: 'color',
          type: 'identity'
        },
        "fill-opacity": 0.5
      }
    });
});
</script>

</body>
</html>

mapbox-gl-js版本： v0.39.1

Answer 1

我刚刚通过将缩放比例从14更改为11来修复了此错误“几何超出了允许范围，减小了矢量图块缓冲区的大小”：

    map = new mapboxgl.Map({
      container: 'map',
      style: style,
      center: center,
      zoom: 11
    });

＆＃34;几何超过允许范围＆＃34;使用Mapbox GL JS显示多边形时出错

1 个答案: