三十四、openlayers官网示例Dynamic clusters解析——动态的聚合图层

最新推荐文章于 2024-06-26 17:57:58 发布
最新推荐文章于 2024-06-26 17:57:58 发布
阅读量851 收藏 6
点赞数 19
分类专栏： openlayers官网示例解析 文章标签： 前端 openlayers官方示例 openlayers 地图 GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaa_div/article/details/139412080
版权

官网demo地址：

https://openlayers.org/en/latest/examples/clusters-dynamic.html

这篇绘制了多个聚合图层。

先初始化地图 ，设置了地图视角的边界extent，限制了地图缩放的范围

 initMap() {
      const raster = new TileLayer({
        source: new XYZ({
          attributions:
            'Base map: <a target="_blank" href="https://basemap.at/">basemap.at</a>',
          url: "https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
        }),
      });

      this.map = new Map({
        layers: [raster],
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2,
          maxZoom: 19,
          extent: [
            ...fromLonLat([16.1793, 48.1124]),
            ...fromLonLat([16.5559, 48.313]),
          ],
          showFullExtent: true,
        }),
      });
      this.map.on("pointermove", this.moveEvent);
      this.map.on("click", this.clickEvent);
    },

创建一个聚合数据源，数据是geoJson格式的。

    const vectorSource = new VectorSource({
        format: new GeoJSON(),
        url: "https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json",
      });

      const clusterSource = new Cluster({
        attributions:
          'Data: <a href="https://www.data.gv.at/auftritte/?organisation=stadt-wien">Stadt Wien</a>',
        distance: 35,
        source: vectorSource,
      });

 然后创建一个聚合图层


      //聚合图层
      this.clustersLayer = new VectorLayer({
        source: clusterSource,
        style: this.clusterStyle,
      });
      this.map.addLayer(this.clustersLayer);

因为每个feature的样式不一样，所以样式这里都绑定了函数。

这里的outerCircle定义为全局变量而并非局部变量，主要是因为clusterStyle函数是个高频触发函数，将outerCircle写成全局的可以不用new那么多次。使用样式组的方法绘制出来了外发光效果，其实就是画了两次圆形。

//黄色圆圈 内外两层 发光效果
    clusterStyle(feature) {
      const size = feature.get("features").length;
      //还有下级
      if (size > 1) {
        return [
          new Style({
            image: this.outerCircle,
          }),
          new Style({
            image: this.innerCircle,
            text: new Text({
              text: size.toString(),
              fill: this.textFill,
              stroke: this.textStroke,
            }),
          }),
        ];
      }
      //没有下级
      const originalFeature = feature.get("features")[0];
      return this.clusterMemberStyle(originalFeature);
    },
 this.textFill = new Fill({
        color: "#fff",
      });
      this.textStroke = new Stroke({
        color: "rgba(0, 0, 0, 0.6)",
        width: 3,
      });
      this.innerCircle = new CircleStyle({
        radius: 14,
        fill: new Fill({
          color: "rgba(255, 165, 0, 0.7)",
        }),
      });
      this.outerCircle = new CircleStyle({
        radius: 20,
        fill: new Fill({
          color: "rgba(255, 153, 102, 0.3)",
        }),
      });

有下级的时候图形是橙色发光的样式，没有下级的时候。根据feature的LEISTUNG字段显示为不同的icon图形。

clusterMemberStyle(clusterMember) {
      return new Style({
        geometry: clusterMember.getGeometry(),
        image:
          clusterMember.get("LEISTUNG") > 5 ? this.darkIcon : this.lightIcon,
      });
    },
 this.darkIcon = new Icon({
     src: "data/icons/emoticon-cool.svg",
 });
 this.lightIcon = new Icon({
     src: "data/icons/emoticon-cool-outline.svg",
 });

 创建一个凸包图层。

凸包是包含给定点集的最小凸多边形，在许多计算几何应用中非常重要，如图形学、地理信息系统（GIS）和形状分析。计算凸包的算法通常基于点的排序和几何性质，可以有效地处理大规模的数据。 

下载引入monotone-chain-convex-hull

npm i monotone-chain-convex-hull
import monotoneChainConvexHull from "monotone-chain-convex-hull";
      //凸包图层样式
      this.convexHullFill = new Fill({
        color: "rgba(255, 153, 0, 0.4)",
      });
      this.convexHullStroke = new Stroke({
        color: "rgba(204, 85, 0, 1)",
        width: 1.5,
      });
      //凸包图层
      this.clusterHulls = new VectorLayer({
        source: clusterSource,
        style: this.clusterHullStyle,
      });
 clusterHullStyle(cluster) {
      if (cluster !== this.hoverFeature) {
        return null;
      }
      const originalFeatures = cluster.get("features");
      const points = originalFeatures.map((feature) =>
        feature.getGeometry().getCoordinates()
      );
      return new Style({
        geometry: new Polygon([monotoneChainConvexHull(points)]),
        fill: this.convexHullFill,
        stroke: this.convexHullStroke,
      });
    },

当鼠标移动到点图层时，显示凸包效果。 

  moveEvent(event) {
      this.clustersLayer.getFeatures(event.pixel).then((features) => {
        if (features[0] !== this.hoverFeature) {
          this.hoverFeature = features[0];
          this.clusterHulls.setStyle(this.clusterHullStyle);
          this.map.getTargetElement().style.cursor =
            this.hoverFeature && this.hoverFeature.get("features").length > 1
              ? "pointer"
              : "";
        }
      });
    },

然后是点线图层

this.clusterCircles = new VectorLayer({
        source: clusterSource,
        style: this.clusterCircleStyle,
      });

当前视图的缩放级别达到了最大缩放级别或者范围的宽度和高度都小于当前视图的分辨率      

往点线图层的style数组中添加两个样式。。

clusterCircleStyle(cluster, resolution) {
      if (cluster !== this.clickFeature || resolution !== this.clickResolution) {
        return null;
      }
      const clusterMembers = cluster.get("features");
      const centerCoordinates = cluster.getGeometry().getCoordinates();
      return this.generatePointsCircle( 
        clusterMembers.length,
        cluster.getGeometry().getCoordinates(),
        resolution
      ).reduce((styles, coordinates, i) => {
        const point = new Point(coordinates);
        const line = new LineString([centerCoordinates, coordinates]);
        styles.unshift(
          new Style({
            geometry: line,
            stroke: this.convexHullStroke,
          })
        );
        styles.push(
          this.clusterMemberStyle(
            new Feature({
              ...clusterMembers[i].getProperties(),
              geometry: point,
            })
          )
        );
        return styles;
      }, []);
    },

generatePointsCircle 方法根据聚类成员的数量、中心坐标和当前分辨率，生成一个圆周上的点坐标数组。 

generatePointsCircle(count, clusterCenter, resolution) {
      //计算圆周长度和每个点的角度步长
      const circumference =
        this.circleDistanceMultiplier * this.circleFootSeparation * (2 + count);
      let legLength = circumference / (Math.PI * 2); 
      const angleStep = (Math.PI * 2) / count;
      const res = [];
      let angle;
      //调整线段长度 确保线段长度至少为 35，并根据分辨率进行调整。
      legLength = Math.max(legLength, 35) * resolution; 
      //生成圆周上的点坐标
      for (let i = 0; i < count; ++i) {
        angle = this.circleStartAngle + i * angleStep;
        res.push([
          clusterCenter[0] + legLength * Math.cos(angle),
          clusterCenter[1] + legLength * Math.sin(angle),
        ]);
      }
      return res;
    },

 点击事件时，获取当前点击的feature的边界值，定位到指定位置。

clickEvent(event) {
      this.clustersLayer.getFeatures(event.pixel).then((features) => {
        if (features.length > 0) {
          const clusterMembers = features[0].get("features");
          if (clusterMembers.length > 1) {
            const extent = createEmpty();
            clusterMembers.forEach((feature) =>
              extend(extent, feature.getGeometry().getExtent())
            );
            const view = this.map.getView();
            const resolution = this.map.getView().getResolution();
            //如果当前视图的缩放级别达到了最大缩放级别 如果范围的宽度和高度都小于当前视图的分辨率
            if (
              view.getZoom() === view.getMaxZoom() ||
              (getWidth(extent) < resolution && getHeight(extent) < resolution)
            ) {
              this.clickFeature = features[0];
              this.clickResolution = resolution;
              this.clusterCircles.setStyle(this.clusterCircleStyle);
            } else {
              view.fit(extent, { duration: 500, padding: [50, 50, 50, 50] });
            }
          }
        }
      });
    },

完整代码：

<template>
  <div class="box">
    <h1>Dynamic clusters</h1>
    <div id="map"></div>
  </div>
</template>

<script>
import Feature from "ol/Feature.js";
import GeoJSON from "ol/format/GeoJSON.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import {
  Circle as CircleStyle,
  Fill,
  Icon,
  Stroke,
  Style,
  Text,
} from "ol/style.js";
import { Cluster, Vector as VectorSource, XYZ } from "ol/source.js";
import { LineString, Point, Polygon } from "ol/geom.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { createEmpty, extend, getHeight, getWidth } from "ol/extent.js";
import { fromLonLat } from "ol/proj.js";
// import convexHull from "convex-hull";
import monotoneChainConvexHull from "monotone-chain-convex-hull";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
      hoverFeature: null,
      convexHullFill: null,
      convexHullStroke: null,
      textFill: null,
      textStroke: null,
      innerCircle: null,
      outerCircle: null,
      darkIcon: null,
      lightIcon: null,
      circleDistanceMultiplier: 1,
      circleFootSeparation: 28,
      circleStartAngle: Math.PI / 2,
      clickFeature: null,
      clustersLayer: null,
      clusterHulls: null,
      clusterCircles: null,
      clickResolution:null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.initMap();
    this.initStyle();
    this.addClusterLayers();
  },
  methods: {
    initMap() {
      const raster = new TileLayer({
        source: new XYZ({
          attributions:
            'Base map: <a target="_blank" href="https://basemap.at/">basemap.at</a>',
          url: "https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
        }),
      });

      this.map = new Map({
        layers: [raster],
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2,
          maxZoom: 19,
          extent: [
            ...fromLonLat([16.1793, 48.1124]),
            ...fromLonLat([16.5559, 48.313]),
          ],
          showFullExtent: true,
        }),
      });
      this.map.on("pointermove", this.moveEvent);
      this.map.on("click", this.clickEvent);
    },
    addClusterLayers() {
      const vectorSource = new VectorSource({
        format: new GeoJSON(),
        url: "https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json",
      });

      const clusterSource = new Cluster({
        attributions:
          'Data: <a href="https://www.data.gv.at/auftritte/?organisation=stadt-wien">Stadt Wien</a>',
        distance: 35,
        source: vectorSource,
      });
      //凸包图层
      this.clusterHulls = new VectorLayer({
        source: clusterSource,
        style: this.clusterHullStyle,
      });
      //聚合图层
      this.clustersLayer = new VectorLayer({
        source: clusterSource,
        style: this.clusterStyle,
      });
      //特定情况下的图层
      this.clusterCircles = new VectorLayer({
        source: clusterSource,
        style: this.clusterCircleStyle,
      });
      this.map.addLayer(this.clusterHulls);
      this.map.addLayer(this.clustersLayer);
      this.map.addLayer(this.clusterCircles);
    },
    initStyle() {
      //凸包图层样式
      this.convexHullFill = new Fill({
        color: "rgba(255, 153, 0, 0.4)",
      });
      this.convexHullStroke = new Stroke({
        color: "rgba(204, 85, 0, 1)",
        width: 1.5,
      });

      this.textFill = new Fill({
        color: "#fff",
      });
      this.textStroke = new Stroke({
        color: "rgba(0, 0, 0, 0.6)",
        width: 3,
      });
      this.innerCircle = new CircleStyle({
        radius: 14,
        fill: new Fill({
          color: "rgba(255, 165, 0, 0.7)",
        }),
      });
      this.outerCircle = new CircleStyle({
        radius: 20,
        fill: new Fill({
          color: "rgba(255, 153, 102, 0.3)",
        }),
      });
      this.darkIcon = new Icon({
        src: "data/icons/emoticon-cool.svg",
      });
      this.lightIcon = new Icon({
        src: "data/icons/emoticon-cool-outline.svg",
      });
    },
    clusterMemberStyle(clusterMember) {
      return new Style({
        geometry: clusterMember.getGeometry(),
        image:
          clusterMember.get("LEISTUNG") > 5 ? this.darkIcon : this.lightIcon,
      });
    },
    clusterCircleStyle(cluster, resolution) {
      if (cluster !== this.clickFeature || resolution !== this.clickResolution) {
        return null;
      }
      const clusterMembers = cluster.get("features");
      const centerCoordinates = cluster.getGeometry().getCoordinates();
      return this.generatePointsCircle( 
        clusterMembers.length,
        cluster.getGeometry().getCoordinates(),
        resolution
      ).reduce((styles, coordinates, i) => {
        const point = new Point(coordinates);
        const line = new LineString([centerCoordinates, coordinates]);
        styles.unshift(
          new Style({
            geometry: line,
            stroke: this.convexHullStroke,
          })
        );
        styles.push(
          this.clusterMemberStyle(
            new Feature({
              ...clusterMembers[i].getProperties(),
              geometry: point,
            })
          )
        );
        return styles;
      }, []);
    },
    generatePointsCircle(count, clusterCenter, resolution) {
      //计算圆周长度和每个点的角度步长
      const circumference =
        this.circleDistanceMultiplier * this.circleFootSeparation * (2 + count);
      let legLength = circumference / (Math.PI * 2); 
      const angleStep = (Math.PI * 2) / count;
      const res = [];
      let angle;
      //调整线段长度 确保线段长度至少为 35，并根据分辨率进行调整。
      legLength = Math.max(legLength, 35) * resolution; 
      //生成圆周上的点坐标
      for (let i = 0; i < count; ++i) {
        angle = this.circleStartAngle + i * angleStep;
        res.push([
          clusterCenter[0] + legLength * Math.cos(angle),
          clusterCenter[1] + legLength * Math.sin(angle),
        ]);
      }
      return res;
    },
    clusterHullStyle(cluster) {
      if (cluster !== this.hoverFeature) {
        return null;
      }
      const originalFeatures = cluster.get("features");
      const points = originalFeatures.map((feature) =>
        feature.getGeometry().getCoordinates()
      );
      return new Style({
        geometry: new Polygon([monotoneChainConvexHull(points)]),
        fill: this.convexHullFill,
        stroke: this.convexHullStroke,
      });
    },
    //黄色圆圈 内外两层 发光效果
    clusterStyle(feature) {
      const size = feature.get("features").length;
      //还有下级
      if (size > 1) {
        return [
          new Style({
            image: this.outerCircle,
          }),
          new Style({
            image: this.innerCircle,
            text: new Text({
              text: size.toString(),
              fill: this.textFill,
              stroke: this.textStroke,
            }),
          }),
        ];
      }
      //没有下级
      const originalFeature = feature.get("features")[0];
      return this.clusterMemberStyle(originalFeature);
    },
    moveEvent(event) {
      this.clustersLayer.getFeatures(event.pixel).then((features) => {
        if (features[0] !== this.hoverFeature) {
          this.hoverFeature = features[0];
          this.clusterHulls.setStyle(this.clusterHullStyle);
          this.map.getTargetElement().style.cursor =
            this.hoverFeature && this.hoverFeature.get("features").length > 1
              ? "pointer"
              : "";
        }
      });
    },
    clickEvent(event) {
      this.clustersLayer.getFeatures(event.pixel).then((features) => {
        if (features.length > 0) {
          const clusterMembers = features[0].get("features");
          if (clusterMembers.length > 1) {
            const extent = createEmpty();
            clusterMembers.forEach((feature) =>
              extend(extent, feature.getGeometry().getExtent())
            );
            const view = this.map.getView();
            const resolution = this.map.getView().getResolution();
            //如果当前视图的缩放级别达到了最大缩放级别 如果范围的宽度和高度都小于当前视图的分辨率
            if (
              view.getZoom() === view.getMaxZoom() ||
              (getWidth(extent) < resolution && getHeight(extent) < resolution)
            ) {
              this.clickFeature = features[0];
              this.clickResolution = resolution;
              this.clusterCircles.setStyle(this.clusterCircleStyle);
            } else {
              view.fit(extent, { duration: 500, padding: [50, 50, 50, 50] });
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}

#info {
  width: 100%;
  height: 24rem;
  overflow: scroll;
  display: flex;
  align-items: baseline;
  border: 1px solid black;
  justify-content: flex-start;
}
</style>

卷新心菜
关注
专栏目录
openlayers：实现地图图层聚合（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-12 122
openlayers：实现地图图层聚合（附完整源码）
Openlayers 教程 17 - 创建聚合图、权重聚合图以及聚合图点击事件
linzi19900517的博客
08-09 2273
本示例基于实际项目中的应用，介绍：加载聚合图、权重聚合图、聚合图参数、聚合图点击事件等功能。
openlayers6【二十六】业务交互：Cluster 聚合标注控制，显示隐藏聚合标注
@必意玲
08-27 2116
文章目录1. 聚合标注是什么，为什么需要聚合标注2. 实现效果3. 核心代码4. 完整代码 1. 聚合标注是什么，为什么需要聚合标注 聚合标注，是指在不同地图分辨率下，通过聚合方式展现标注点的一种方法。 其设计目的是为了减少当前视图下加载标注点的数量，提升客户端渲染速度。因为如果在地图上添加很多标注点，当地图缩放到小级别（即大分辨率）时会出现标注重叠的现象，既不美观，渲染效率也会受到影响。此时，可以根据地图缩放级数（zoom）的大小，将当前视图的标注点进行聚合显示。 OpenLayers也考虑到加载大数据量
openlayers 要素聚合（cluster）、icon聚合
最新发布
无心使然云中漫步
06-26 432
本篇介绍一下使用openlayers 要素聚合（cluster），icon聚合。
openlayers5之聚合分析图层Cluster
aodao8891的博客
08-18 403
openlayers5之聚合分析图层Cluster 点击查看原文 点击下载源码 转载于:https://www.cnblogs.com/dqygiser/p/10464013.html
OpenLayers基础教程——点要素图层的聚合显示
HerryDong的博客
12-10 7042
1、前言 在很多情况下，点要素图层中的要素数量可能会成百上千，这时候如果不做任何处理直接加载到地图上不仅会使用户视觉体验下降，而且也会造成地图界面的卡顿。下面这段代码创建了1000个随机点进行显示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"
OpenLayers
专注JAVA开发
09-26 2234
OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayer
openLayers完整代码示例数据
06-05
OpenLayers允许用户自定义图层的视觉表现，根据属性值来动态改变样式。 4. **图层加载**：在OpenLayers应用中，这些JSON数据可以通过`ol.source.Vector`和`ol.layer.Vector`进行加载和展示。通过读取JSON文件并创建...
Openlayers+EasyUI Tree动态实现图层控制
01-22
本文实例为大家分享了Openlayers+EasyUI Tree动态实现图层控制的具体代码，供大家参考，具体内容如下 功能介绍 主要功能 根据openlayers3.0与easyUI tree 功能实现图层显隐控制功能，达到子节点选择实现单个图层的...
WebGIS之OpenLayers 全面解析第2版示例代码
04-13
WebGIS之OpenLayers全面解析第2版（2019年出版）示例代码，比OpenLayers 官方的示例好用多了，基于 OpenLayers 5.x 编写（可用于 6.x），含国内各种地图的配合调用，各类扩展组件的开发示例，有了这个，就不要在在...
openlayers遮罩示例
01-29
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库，用于在Web上构建交互式的地图应用。这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域...
openLayers-API中文
08-02
openLayers-API中文,全，我找了好久，提供给大家
openLayers-API中文版
11-30
openLayers-API中文版描述，对英文差点的朋友帮助很大，没事可以研究一下地图API。
openlayers中文文档
08-22
ol openlayers 中文 文档 翻译 最新编译、不全、差评的别下、嫌分高别下
openlayers 中文文档
07-02
OpenLayers中文学习文档，原始文档是.md格式的转换成Html后转换成了chm格式，感谢原文作者。
【前端小记】--OpenLayers--1.点位图层动态聚合展示
am_xiao_hui的博客
09-01 1323
通常情况，我们在给地图添加图层时，会new一个VectorSource作为数据源，针对以上这种情况的的出现，OpenLayers给出了一个解决办法——聚类。
Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合
BADAO_LIUMANG_QIZHI的博客
12-25 3087
场景 Openlayers中实现地图上打点并显示图标和文字： Openlayers中实现地图上打点并显示图标和文字_BADAO_LIUMANG_QIZHI的博客-CSDN博客_openlayers 打点 上面实现加载显示离线地图并显示图标元素的效果后。 实现当多个元素堆积在一起时实现聚合显示效果。 并且伴随着地图的缩放实现自动聚合显示和取消聚合。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
openlayers-11-聚合显示
chuanren1991的博客
05-16 729
聚合显示的关键在，ol.source.Cluster,这是聚合标注图层，需要先实例化该类在添加图文标注的基础上，添加一个中间数据源，即聚合标注类，添加图文标注中，是先创建矢量标注数据源（vectorSource）,然后创建矢量标注图层（vectorLayer），最后将矢量标注数据源添加到矢量标注图层，也可以在创建矢量标注图层时制定source属性为矢量标注数据源，具体请看 添加图文标注 章节。总的来说就是。
Openlayers实现高效聚合标注示例与代码详解
Openlayers绘制聚合标注是一种在地理信息系统（GIS）应用中常见的性能优化技术，它允许在地图视图中密集的标注点在不同分辨率下被合并成更少的可视元素，从而提升用户体验和地图渲染效率。在这个过程中，Openlayers...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值