时间戳

首页 > 解决方案 > 从 geoJson 源设置标记可见性

geojson - 从 geoJson 源设置标记可见性

问题描述

我正在使用一个包含意大利城市的geojson，在那里我可以读取“数据”；数据存储在properties字段中。我可以添加更多数据，例如我们正在考虑添加每个城市的人口密度，以使城市或多或少相关，以翻译之前在地图上显示的城市。

geojson：

{
  type: "geojson",
  data: {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [11.433, 46.883],
        },
        properties: {
          title: "Vipiteno",
          /* etc */
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [11.326, 46.46],
        },
        properties: {
          title: "Bolzano",
          /* etc */
        },
      },
    ],
  },
}

在我的页面上，我使用以下函数将 geojson 添加到地图中：

map.on("load", function () {
  // Add an image to use as a custom marker
  map.loadImage("img", function (error, image) {
    if (error) throw error;
    map.addImage("custom-marker", image);
    // Add a GeoJSON source with 2 points
    map.addSource("points", geoJson);

    map.addLayer({
      id: "points",
      type: "symbol",
      source: "points",
      layout: {
        "icon-image": "custom-marker",
        // get the title name from the source's "title" property
        "text-field": ["get", "title"],
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 1.25],
        "text-anchor": "top",
      },
    });
  });
});

那么如何控制在第一次加载时显示哪些标记，然后在用户放大时显示更多点？

现在只有少数以起始缩放级别渲染，但无法控制哪个，小城市在首都之前渲染（例如）。

我怎样才能覆盖这个？

标签： geojsonmapbox-gl-js

解决方案

您可以通过设置缩放/为动态可见性更改添加缩放表达式来覆盖它。下面的 Mapbox 示例做了类似的事情。通过使用动态缩放表达式，圆形图层的不透明度会逐渐改变。你可以为你的图层做同样的事情。因此，您可以控制哪个图层在哪个缩放和哪个特定不透明度下可见。请看这个例子：

https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/#add-a-zoom-expression

（要运行，请交换“您的访问令牌”） 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Minneapolis Landmarks</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.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 = 'YOUR ACCESS TOKEN';
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/light-v10', // stylesheet location
      center: [-93.261, 44.971], // starting position [lng, lat]
      zoom: 10.5 // starting zoom
    });

    map.on('load', function() {
      map.addLayer({
        id: 'historical-places',
        type: 'circle',
        source: {
          type: 'vector',
          url: 'mapbox://your-tileset-id-here'
        },
        'source-layer': 'your-source-layer-here',
        paint: {
          'circle-radius': [
            'interpolate', ['linear'], ['zoom'],
            10, ['/', ['-', 2017, ['number', ['get', 'Constructi'], 2017]], 30],
            13, ['/', ['-', 2017, ['number', ['get', 'Constructi'], 2017]], 10],
          ],
          'circle-opacity': 0.8,
          'circle-color': 'rgb(171, 72, 33)'
        }
      });
    });
  </script>
  </body>
</html>

推荐阅读