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

    官网demo地址：

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

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

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

    1.  initMap() {
    2.       const raster = new TileLayer({
    3.         source: new XYZ({
    4.           attributions:
    5.             'Base map: basemap.at',
    6.           url: "https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
    7.         }),
    8.       });
    9.  
    10.       this.map = new Map({
    11.         layers: [raster],
    12.         target: "map",
    13.         view: new View({
    14.           center: [0, 0],
    15.           zoom: 2,
    16.           maxZoom: 19,
    17.           extent: [
    18.             ...fromLonLat([16.1793, 48.1124]),
    19.             ...fromLonLat([16.5559, 48.313]),
    20.           ],
    21.           showFullExtent: true,
    22.         }),
    23.       });
    24.       this.map.on("pointermove", this.moveEvent);
    25.       this.map.on("click", this.clickEvent);
    26.     },

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

    1.     const vectorSource = new VectorSource({
    2.         format: new GeoJSON(),
    3.         url: "https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json",
    4.       });
    5.  
    6.       const clusterSource = new Cluster({
    7.         attributions:
    8.           'Data: Stadt Wien',
    9.         distance: 35,
    10.         source: vectorSource,
    11.       });

     然后创建一个聚合图层

    1.  
    2.       //聚合图层
    3.       this.clustersLayer = new VectorLayer({
    4.         source: clusterSource,
    5.         style: this.clusterStyle,
    6.       });
    7.       this.map.addLayer(this.clustersLayer);

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

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

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

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

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

     创建一个凸包图层。

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

    下载引入monotone-chain-convex-hull

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

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

    1.   moveEvent(event) {
    2.       this.clustersLayer.getFeatures(event.pixel).then((features) => {
    3.         if (features[0] !== this.hoverFeature) {
    4.           this.hoverFeature = features[0];
    5.           this.clusterHulls.setStyle(this.clusterHullStyle);
    6.           this.map.getTargetElement().style.cursor =
    7.             this.hoverFeature && this.hoverFeature.get("features").length > 1
    8.               ? "pointer"
    9.               : "";
    10.         }
    11.       });
    12.     },

    然后是点线图层

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

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

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

    1. clusterCircleStyle(cluster, resolution) {
    2.       if (cluster !== this.clickFeature || resolution !== this.clickResolution) {
    3.         return null;
    4.       }
    5.       const clusterMembers = cluster.get("features");
    6.       const centerCoordinates = cluster.getGeometry().getCoordinates();
    7.       return this.generatePointsCircle( 
    8.         clusterMembers.length,
    9.         cluster.getGeometry().getCoordinates(),
    10.         resolution
    11.       ).reduce((styles, coordinates, i) => {
    12.         const point = new Point(coordinates);
    13.         const line = new LineString([centerCoordinates, coordinates]);
    14.         styles.unshift(
    15.           new Style({
    16.             geometry: line,
    17.             stroke: this.convexHullStroke,
    18.           })
    19.         );
    20.         styles.push(
    21.           this.clusterMemberStyle(
    22.             new Feature({
    23.               ...clusterMembers[i].getProperties(),
    24.               geometry: point,
    25.             })
    26.           )
    27.         );
    28.         return styles;
    29.       }, []);
    30.     },

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

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

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

    1. clickEvent(event) {
    2.       this.clustersLayer.getFeatures(event.pixel).then((features) => {
    3.         if (features.length > 0) {
    4.           const clusterMembers = features[0].get("features");
    5.           if (clusterMembers.length > 1) {
    6.             const extent = createEmpty();
    7.             clusterMembers.forEach((feature) =>
    8.               extend(extent, feature.getGeometry().getExtent())
    9.             );
    10.             const view = this.map.getView();
    11.             const resolution = this.map.getView().getResolution();
    12.             //如果当前视图的缩放级别达到了最大缩放级别 如果范围的宽度和高度都小于当前视图的分辨率
    13.             if (
    14.               view.getZoom() === view.getMaxZoom() ||
    15.               (getWidth(extent) < resolution && getHeight(extent) < resolution)
    16.             ) {
    17.               this.clickFeature = features[0];
    18.               this.clickResolution = resolution;
    19.               this.clusterCircles.setStyle(this.clusterCircleStyle);
    20.             } else {
    21.               view.fit(extent, { duration: 500, padding: [50, 50, 50, 50] });
    22.             }
    23.           }
    24.         }
    25.       });
    26.     },

    完整代码：

    1. <template>
    2.   <div class="box">
    3.     <h1>Dynamic clusters</h1>
    4.     <div id="map"></div>
    5.   </div>
    6. </template>
    7.  
    8. <script>
    9. import Feature from "ol/Feature.js";
    10. import GeoJSON from "ol/format/GeoJSON.js";
    11. import Map from "ol/Map.js";
    12. import View from "ol/View.js";
    13. import {
    14.   Circle as CircleStyle,
    15.   Fill,
    16.   Icon,
    17.   Stroke,
    18.   Style,
    19.   Text,
    20. } from "ol/style.js";
    21. import { Cluster, Vector as VectorSource, XYZ } from "ol/source.js";
    22. import { LineString, Point, Polygon } from "ol/geom.js";
    23. import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
    24. import { createEmpty, extend, getHeight, getWidth } from "ol/extent.js";
    25. import { fromLonLat } from "ol/proj.js";
    26. // import convexHull from "convex-hull";
    27. import monotoneChainConvexHull from "monotone-chain-convex-hull";
    28. export default {
    29.   name: "",
    30.   components: {},
    31.   data() {
    32.     return {
    33.       map: null,
    34.       hoverFeature: null,
    35.       convexHullFill: null,
    36.       convexHullStroke: null,
    37.       textFill: null,
    38.       textStroke: null,
    39.       innerCircle: null,
    40.       outerCircle: null,
    41.       darkIcon: null,
    42.       lightIcon: null,
    43.       circleDistanceMultiplier: 1,
    44.       circleFootSeparation: 28,
    45.       circleStartAngle: Math.PI / 2,
    46.       clickFeature: null,
    47.       clustersLayer: null,
    48.       clusterHulls: null,
    49.       clusterCircles: null,
    50.       clickResolution:null,
    51.     };
    52.   },
    53.   computed: {},
    54.   created() {},
    55.   mounted() {
    56.     this.initMap();
    57.     this.initStyle();
    58.     this.addClusterLayers();
    59.   },
    60.   methods: {
    61.     initMap() {
    62.       const raster = new TileLayer({
    63.         source: new XYZ({
    64.           attributions:
    65.             'Base map: basemap.at',
    66.           url: "https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
    67.         }),
    68.       });
    69.  
    70.       this.map = new Map({
    71.         layers: [raster],
    72.         target: "map",
    73.         view: new View({
    74.           center: [0, 0],
    75.           zoom: 2,
    76.           maxZoom: 19,
    77.           extent: [
    78.             ...fromLonLat([16.1793, 48.1124]),
    79.             ...fromLonLat([16.5559, 48.313]),
    80.           ],
    81.           showFullExtent: true,
    82.         }),
    83.       });
    84.       this.map.on("pointermove", this.moveEvent);
    85.       this.map.on("click", this.clickEvent);
    86.     },
    87.     addClusterLayers() {
    88.       const vectorSource = new VectorSource({
    89.         format: new GeoJSON(),
    90.         url: "https://openlayers.org/en/latest/examples/data/geojson/photovoltaic.json",
    91.       });
    92.  
    93.       const clusterSource = new Cluster({
    94.         attributions:
    95.           'Data: Stadt Wien',
    96.         distance: 35,
    97.         source: vectorSource,
    98.       });
    99.       //凸包图层
    100.       this.clusterHulls = new VectorLayer({
    101.         source: clusterSource,
    102.         style: this.clusterHullStyle,
    103.       });
    104.       //聚合图层
    105.       this.clustersLayer = new VectorLayer({
    106.         source: clusterSource,
    107.         style: this.clusterStyle,
    108.       });
    109.       //特定情况下的图层
    110.       this.clusterCircles = new VectorLayer({
    111.         source: clusterSource,
    112.         style: this.clusterCircleStyle,
    113.       });
    114.       this.map.addLayer(this.clusterHulls);
    115.       this.map.addLayer(this.clustersLayer);
    116.       this.map.addLayer(this.clusterCircles);
    117.     },
    118.     initStyle() {
    119.       //凸包图层样式
    120.       this.convexHullFill = new Fill({
    121.         color: "rgba(255, 153, 0, 0.4)",
    122.       });
    123.       this.convexHullStroke = new Stroke({
    124.         color: "rgba(204, 85, 0, 1)",
    125.         width: 1.5,
    126.       });
    127.  
    128.       this.textFill = new Fill({
    129.         color: "#fff",
    130.       });
    131.       this.textStroke = new Stroke({
    132.         color: "rgba(0, 0, 0, 0.6)",
    133.         width: 3,
    134.       });
    135.       this.innerCircle = new CircleStyle({
    136.         radius: 14,
    137.         fill: new Fill({
    138.           color: "rgba(255, 165, 0, 0.7)",
    139.         }),
    140.       });
    141.       this.outerCircle = new CircleStyle({
    142.         radius: 20,
    143.         fill: new Fill({
    144.           color: "rgba(255, 153, 102, 0.3)",
    145.         }),
    146.       });
    147.       this.darkIcon = new Icon({
    148.         src: "data/icons/emoticon-cool.svg",
    149.       });
    150.       this.lightIcon = new Icon({
    151.         src: "data/icons/emoticon-cool-outline.svg",
    152.       });
    153.     },
    154.     clusterMemberStyle(clusterMember) {
    155.       return new Style({
    156.         geometry: clusterMember.getGeometry(),
    157.         image:
    158.           clusterMember.get("LEISTUNG") > 5 ? this.darkIcon : this.lightIcon,
    159.       });
    160.     },
    161.     clusterCircleStyle(cluster, resolution) {
    162.       if (cluster !== this.clickFeature || resolution !== this.clickResolution) {
    163.         return null;
    164.       }
    165.       const clusterMembers = cluster.get("features");
    166.       const centerCoordinates = cluster.getGeometry().getCoordinates();
    167.       return this.generatePointsCircle( 
    168.         clusterMembers.length,
    169.         cluster.getGeometry().getCoordinates(),
    170.         resolution
    171.       ).reduce((styles, coordinates, i) => {
    172.         const point = new Point(coordinates);
    173.         const line = new LineString([centerCoordinates, coordinates]);
    174.         styles.unshift(
    175.           new Style({
    176.             geometry: line,
    177.             stroke: this.convexHullStroke,
    178.           })
    179.         );
    180.         styles.push(
    181.           this.clusterMemberStyle(
    182.             new Feature({
    183.               ...clusterMembers[i].getProperties(),
    184.               geometry: point,
    185.             })
    186.           )
    187.         );
    188.         return styles;
    189.       }, []);
    190.     },
    191.     generatePointsCircle(count, clusterCenter, resolution) {
    192.       //计算圆周长度和每个点的角度步长
    193.       const circumference =
    194.         this.circleDistanceMultiplier * this.circleFootSeparation * (2 + count);
    195.       let legLength = circumference / (Math.PI * 2); 
    196.       const angleStep = (Math.PI * 2) / count;
    197.       const res = [];
    198.       let angle;
    199.       //调整线段长度 确保线段长度至少为 35，并根据分辨率进行调整。
    200.       legLength = Math.max(legLength, 35) * resolution; 
    201.       //生成圆周上的点坐标
    202.       for (let i = 0; i < count; ++i) {
    203.         angle = this.circleStartAngle + i * angleStep;
    204.         res.push([
    205.           clusterCenter[0] + legLength * Math.cos(angle),
    206.           clusterCenter[1] + legLength * Math.sin(angle),
    207.         ]);
    208.       }
    209.       return res;
    210.     },
    211.     clusterHullStyle(cluster) {
    212.       if (cluster !== this.hoverFeature) {
    213.         return null;
    214.       }
    215.       const originalFeatures = cluster.get("features");
    216.       const points = originalFeatures.map((feature) =>
    217.         feature.getGeometry().getCoordinates()
    218.       );
    219.       return new Style({
    220.         geometry: new Polygon([monotoneChainConvexHull(points)]),
    221.         fill: this.convexHullFill,
    222.         stroke: this.convexHullStroke,
    223.       });
    224.     },
    225.     //黄色圆圈 内外两层 发光效果
    226.     clusterStyle(feature) {
    227.       const size = feature.get("features").length;
    228.       //还有下级
    229.       if (size > 1) {
    230.         return [
    231.           new Style({
    232.             image: this.outerCircle,
    233.           }),
    234.           new Style({
    235.             image: this.innerCircle,
    236.             text: new Text({
    237.               text: size.toString(),
    238.               fill: this.textFill,
    239.               stroke: this.textStroke,
    240.             }),
    241.           }),
    242.         ];
    243.       }
    244.       //没有下级
    245.       const originalFeature = feature.get("features")[0];
    246.       return this.clusterMemberStyle(originalFeature);
    247.     },
    248.     moveEvent(event) {
    249.       this.clustersLayer.getFeatures(event.pixel).then((features) => {
    250.         if (features[0] !== this.hoverFeature) {
    251.           this.hoverFeature = features[0];
    252.           this.clusterHulls.setStyle(this.clusterHullStyle);
    253.           this.map.getTargetElement().style.cursor =
    254.             this.hoverFeature && this.hoverFeature.get("features").length > 1
    255.               ? "pointer"
    256.               : "";
    257.         }
    258.       });
    259.     },
    260.     clickEvent(event) {
    261.       this.clustersLayer.getFeatures(event.pixel).then((features) => {
    262.         if (features.length > 0) {
    263.           const clusterMembers = features[0].get("features");
    264.           if (clusterMembers.length > 1) {
    265.             const extent = createEmpty();
    266.             clusterMembers.forEach((feature) =>
    267.               extend(extent, feature.getGeometry().getExtent())
    268.             );
    269.             const view = this.map.getView();
    270.             const resolution = this.map.getView().getResolution();
    271.             //如果当前视图的缩放级别达到了最大缩放级别 如果范围的宽度和高度都小于当前视图的分辨率
    272.             if (
    273.               view.getZoom() === view.getMaxZoom() ||
    274.               (getWidth(extent) < resolution && getHeight(extent) < resolution)
    275.             ) {
    276.               this.clickFeature = features[0];
    277.               this.clickResolution = resolution;
    278.               this.clusterCircles.setStyle(this.clusterCircleStyle);
    279.             } else {
    280.               view.fit(extent, { duration: 500, padding: [50, 50, 50, 50] });
    281.             }
    282.           }
    283.         }
    284.       });
    285.     },
    286.   },
    287. };
    288. </script>
    289.  
    290. <style lang="scss" scoped>
    291. #map {
    292.   width: 100%;
    293.   height: 500px;
    294. }
    295. .box {
    296.   height: 100%;
    297. }
    298.  
    299. #info {
    300.   width: 100%;
    301.   height: 24rem;
    302.   overflow: scroll;
    303.   display: flex;
    304.   align-items: baseline;
    305.   border: 1px solid black;
    306.   justify-content: flex-start;
    307. }
    308. </style>
    309.

  • 相关阅读:
    心情碎片~
    web前端设计与开发期末作品/期末大作业-疫情
    基于SSM的生活缴费系统的设计与实现
    操作系统（三）| 进程管理上 进程状态 同步 互斥
    shell脚本中加入这条可以执行完一个脚本回到这个目录下
    大麦网回流票监控，sing参数分析
    DNS、ICMP和NAT
    AlexNet 06
    【概率论基础进阶】多维随机变量及其分布-随机变量的独立性
    英语学习笔记
  • 原文地址：https://blog.csdn.net/aaa_div/article/details/139412080