Почему некоторые функции не отображаются на моей карте Mapbox GL JS при определенных уровнях масштабирования? - PullRequest
Новая
       62

Почему некоторые функции не отображаются на моей карте Mapbox GL JS при определенных уровнях масштабирования?

0 голосов
/ 10 октября 2019

Я новичок в векторных плитках и Mapbox GL и работаю над некоторыми вводными примерами. В приведенном ниже примере вы можете видеть, что некоторые объекты не отображаются при начальном уровне масштабирования. Тем не менее, когда вы увеличиваете масштаб, все функции отображаются. Предположительно, некоторые функции слишком малы для визуализации при определенных уровнях масштабирования. Предполагая, что это происходит, есть ли способ определить уровень масштабирования, при котором будут отображаться все объекты? Векторные плитки, используемые в этом примере, описаны здесь: https://gis -server.data.census.gov / arcgis / rest / services / Hosted / VT_2015_140_00_PY_D1 / VectorTileServer . 

    var mapstyle = {
        "version": 8,
        "name": "TractMap",
        "sources": {
            "tractData": {
                type: "vector",
                tiles: [
                  "https://gis-server.data.census.gov/arcgis/rest/services/Hosted/VT_2015_140_00_PY_D1/VectorTileServer/tile/{z}/{y}/{x}.pbf"
                ]
            }
        },
        "layers": [
            {
              id: "tracts",
              type: "fill",
              source: "tractData",
              "source-layer": "CensusTract",
              paint: {
                "fill-opacity": 0.3,
                "fill-color": "purple"
              }
            }
        ]

      }

      var map = new mapboxgl.Map({
        container: "map",
        style: mapstyle, 
        center: {
          lat: 38,
          lng: -95
        },
        zoom: 6
      });


        map.on("click", "tracts", function(e) {
            var coordinates = e.lngLat;

            new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML(
                coordinates
            )
            .addTo(map);
        });
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js"></script>
<div id="map"></div>
...