四章-32-点要素的聚合

作者: 彩云飘过 | 来源:发表于2020-04-21 11:25 被阅读0次

四章-32-点要素的聚合
百度地图点聚合填坑指南
四章-33-地震信息的要素聚合
如何增强数据玩转数据分析
搜扣 sql
第十四章 SQL窗口函数概述（一）
姜乐文魁大脑思维导图武林计划No26
乡村振兴是多要素聚合嬗变
《写作学习：从“教知识”走向“教知识运用”——对统编小学语文“习
高德地图使用聚合点的时候，获取得到聚合点的原始数据

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1032.html ，对应的官网示例 https://openlayers.org/en/latest/examples/cluster.html

https://openlayers.org/en/latest/examples/earthquake-clusters.html?q=Cluster

image.png

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css">
  <script src="../include/ol.js"></script>
</head>

<body>
  <form>
    <label>聚合间距</label>
    <input id="distance" type="range" min="0" max="100" step="1" value="40" />
  </form>
  <div id="map" class="map"></div>

  <script>
    
    var distance = document.getElementById('distance');

    //用随机数生成点状要素的坐标，生成2万个坐标点
    var count = 20000;
    var features = new Array(count);
    var e = 4500000;
    for (var i = 0; i < count; ++i) {
      var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
      features[i] = new ol.Feature(new ol.geom.Point(coordinates));
    }

    var source = new ol.source.Vector({
      features: features
    });

    //聚合数据源
    var clusterSource = new ol.source.Cluster({
      distance: parseInt(distance.value, 10),//控制两点聚合间距，若小于distance，以聚合方式显示
      source: source
    });

    var styleCache = {};
    
    var clusters = new ol.layer.Vector({
      source: clusterSource,
      style: function (feature) {//每一个要素 显示时样式控制，
        var size = feature.get('features').length;
        var style = styleCache[size];
        if (!style) {
          style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#fff'
              }),
              fill: new ol.style.Fill({
                color: '#3399CC'
              })
            }),
            text: new ol.style.Text({
              text: size.toString(),
              fill: new ol.style.Fill({
                color: '#fff'
              })
            })
          });
          styleCache[size] = style;
        }
        return style;
      }
    });

    var raster = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    var map = new ol.Map({
      layers: [raster, clusters],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });

    distance.addEventListener('input', function () {
      clusterSource.setDistance(parseInt(distance.value, 10));
    });
  </script>
</body>

</html>