mapbox创建集群和样式设置

最新推荐文章于 2023-11-17 09:51:03 发布

roc_blog

最新推荐文章于 2023-11-17 09:51:03 发布

阅读量1.1k

点赞数

分类专栏： vue+mapboxgl 文章标签： html

本文链接：https://blog.csdn.net/hfpjl/article/details/108999242

版权

vue+mapboxgl 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用Mapbox GL JS的内置函数将点可视化为群集，并对集群的样式进行设置，具体代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Create and style clusters</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/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 = 'pk.eyJ1IjoiaHpzejIwMjAiLCJhIjoiY2tjdm9kdGFqMDYyODJ5czRsYnk4aDVscCJ9.DryU0-YwREpTBZ5qKXSqUQ';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/dark-v10',
      center: [-103.59179687498357, 40.66995747013945],
      zoom: 3
    });

    map.on('load', function () {
      // Add a new source from our GeoJSON data and
      // set the 'cluster' option to true. GL-JS will
      // add the point_count property to your source data.
      map.addSource('earthquakes', {
        type: 'geojson',
        // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
        // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
        data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
      });

      map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: 'earthquakes',
        filter: ['has', 'point_count'],
        paint: {
          // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
          // with three steps to implement three types of circles:
          //   * Blue, 20px circles when point count is less than 100
          //   * Yellow, 30px circles when point count is between 100 and 750
          //   * Pink, 40px circles when point count is greater than or equal to 750
          'circle-color': [
            'step',
            ['get', 'point_count'],
            '#51bbd6',
            100,
            '#f1f075',
            750,
            '#f28cb1'
          ],
          'circle-radius': [
            'step',
            ['get', 'point_count'],
            20,
            100,
            30,
            750,
            40
          ],
          "circle-stroke-color": [
            "step",
            ["get", "point_count"],
            "rgba(81, 187, 214, 0.2)",
            100,
            "rgba(241, 240, 117, 0.2)",
            750,
            "rgba(242, 140, 177, 0.2)"
          ],
          // 这个是外边框晕染的范围
          "circle-stroke-width": [
            "step",
            ["get", "point_count"],
            10, //蓝色晕染长度，当点数小于100时为5px晕染
            100, //对应上面circle-color 数字，意思为100以内
            20, //点计数在100到750之间时为黄色，6px晕染
            750, //对应上面circle-color 数字，意思为750以内
            30 //点计数大于或等于750时为7px像素的粉红色晕染
          ]
        }
      });

      map.addLayer({
        id: 'cluster-count',
        type: 'symbol',
        source: 'earthquakes',
        filter: ['has', 'point_count'],
        layout: {
          // 'text-field': '{point_count_abbreviated}', 
          'text-field': '{point_count}',

          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
          'text-size': 12
        }
      });

      map.addLayer({
        id: 'unclustered-point',
        type: 'circle',
        source: 'earthquakes',
        filter: ['!', ['has', 'point_count']],
        paint: {
          'circle-color': '#11b4da',
          'circle-radius': 4,
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff'
        }
      });

      // inspect a cluster on click
      map.on('click', 'clusters', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['clusters']
        });
        var clusterId = features[0].properties.cluster_id;
        map.getSource('earthquakes').getClusterExpansionZoom(
          clusterId,
          function (err, zoom) {
            if (err) return;

            map.easeTo({
              center: features[0].geometry.coordinates,
              zoom: zoom
            });
          }
        );
      });

      // When a click event occurs on a feature in
      // the unclustered-point layer, open a popup at
      // the location of the feature, with
      // description HTML from its properties.
      map.on('click', 'unclustered-point', function (e) {
        var coordinates = e.features[0].geometry.coordinates.slice();
        var mag = e.features[0].properties.mag;
        var tsunami;

        if (e.features[0].properties.tsunami === 1) {
          tsunami = 'yes';
        } else {
          tsunami = 'no';
        }

        // Ensure that if the map is zoomed out such that
        // multiple copies of the feature are visible, the
        // popup appears over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        new mapboxgl.Popup()
          .setLngLat(coordinates)
          .setHTML(
            'magnitude: ' + mag + '<br>Was there a tsunami?: ' + tsunami
          )
          .addTo(map);
      });

      map.on('mouseenter', 'clusters', function () {
        map.getCanvas().style.cursor = 'pointer';
      });
      map.on('mouseleave', 'clusters', function () {
        map.getCanvas().style.cursor = '';
      });
    });

  </script>

</body>

</html>

实现效果如下：

期待与大家一起交流学习！！

roc_blog

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
mapbox创建集群和样式设置

使用Mapbox GL JS的内置函数将点可视化为群集，并对集群的样式进行设置，具体代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Create and style clusters</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,u
复制链接

扫一扫