• 三十六、openlayers官网示例Earthquake Clusters解析——在聚合图层鼠标触摸显示五角星

    官网demo地址：

    Earthquake Clusters

    这篇展示了鼠标触摸聚合图层点位显示五角星的效果。

    首先是初始化地图，加载了一个KML格式的矢量数据源，extractStyles为false表示不从kml数据源中提取样式。使用Select添加了鼠标选中的交互事件

    1. vector = new VectorLayer({
    2.       source: new Cluster({
    3.         distance: 40,
    4.         source: new VectorSource({
    5.           url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",
    6.           format: new KML({
    7.             extractStyles: false,
    8.           }),
    9.         }),
    10.       }),
    11.       style: styleFunction,
    12.     });
    13.     const raster = new TileLayer({
    14.       source: new StadiaMaps({
    15.         layer: "stamen_toner",
    16.       }),
    17.     }); 
    18. const map = new Map({
    19.       layers: [raster, vector],
    20.       interactions: defaultInteractions().extend([
    21.         new Select({
    22.           condition: function (evt) {
    23.             return evt.type == "pointermove" || evt.type == "singleclick";
    24.           },
    25.           style: selectStyleFunction,
    26.         }),
    27.       ]),
    28.       target: "map",
    29.       view: new View({
    30.         center: [0, 0],
    31.         zoom: 2,
    32.       }),
    33.     });

    其中有两个样式函数，先来看第一个styleFunction。

    如果有子feature就显示为黄色圆圈，如果没有子feature则绘制成五角星。

    1.  let currentResolution;
    2.     function styleFunction(feature, resolution) {
    3.       if (resolution != currentResolution) {
    4.         calculateClusterInfo(resolution);
    5.         currentResolution = resolution;
    6.       }
    7.       let style;
    8.       const size = feature.get("features").length;
    9.       if (size > 1) {
    10.         style = new Style({
    11.           image: new CircleStyle({
    12.             radius: feature.get("radius"),
    13.             fill: new Fill({
    14.               color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)],
    15.             }),
    16.           }),
    17.           text: new Text({
    18.             text: size.toString(),
    19.             fill: textFill,
    20.             stroke: textStroke,
    21.           }),
    22.         });
    23.       } else {
    24.         const originalFeature = feature.get("features")[0];
    25.         style = createEarthquakeStyle(originalFeature);
    26.       }
    27.       return style;
    28.     }

    使用calculateClusterInfo 函数计算圆圈的半径，将子feature的extent合并到了一起，结合分辨率算出半径。

    1. const calculateClusterInfo = function (resolution) {
    2.       maxFeatureCount = 0;
    3.       const features = vector.getSource().getFeatures();
    4.       let feature, radius;
    5.       for (let i = features.length - 1; i >= 0; --i) {
    6.         feature = features[i];
    7.         const originalFeatures = feature.get("features");
    8.         const extent = createEmpty(); //创建一个空的范围对象，用来存储聚类的总范围。
    9.         let j, jj;
    10.         for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
    11.         //获取当前原始特征的几何范围。将这个几何范围合并到总范围 extent 中
    12.           extend(extent, originalFeatures[j].getGeometry().getExtent());
    13.         }
    14.         maxFeatureCount = Math.max(maxFeatureCount, jj);
    15.         radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution;
    16.         feature.set('radius',radius)
    17.       }
    18.     };

    extend方法示例

    假设你有一个聚类包含三个特征，其范围分别为：

    • 特征1: [0, 0, 1, 1]
    • 特征2: [2, 2, 3, 3]
    • 特征3: [1, 1, 4, 4]

    通过逐步扩展 extent:

    • 初始 extent 是空的。
    • 扩展第一个特征后，extent 变为 [0, 0, 1, 1]。
    • 扩展第二个特征后，extent 变为 [0, 0, 3, 3]。
    • 扩展第三个特征后，extent 变为 [0, 0, 4, 4]。

    最终的 extent 包含了所有特征的范围，即 [0, 0, 4, 4]。

     createEarthquakeStyle是绘制星星的方法，主要用了RegularShape这个类。

    1. function createEarthquakeStyle(feature) {
    2.       const name = feature.get("name");
    3.       const magnitude = parseFloat(name.substr(2));
    4.       const radius = 5 + 20 * (magnitude - 5);
    5.       return new Style({
    6.         geometry: feature.getGeometry(),
    7.         image: new RegularShape({
    8.           radius: radius,
    9.           radius2: 3,
    10.           points: 5,
    11.           angle: Math.PI,
    12.           fill: earthquakeFill,
    13.           stroke: earthquakeStroke,
    14.         }),
    15.       });
    16.     }

    写一个小demo来理解RegularShape

    1. //小demo
    2.     let piontArr = [-213399.46385070545, -7204129.9025042085];
    3.     let pointFeature = new Feature({
    4.       geometry: new MultiPoint([piontArr]),
    5.     });
    6.     let newLayer = new VectorLayer({
    7.       source: new VectorSource({
    8.         features: [pointFeature],
    9.       }),
    10.       style: [
    11.         new Style({
    12.           image: new RegularShape({
    13.             radius: 50,
    14.             radius2:20,
    15.             points: 5,
    16.             angle: Math.PI,
    17.             fill: earthquakeFill,
    18.             stroke: earthquakeStroke,
    19.           }),
    20.         }),
    21.       ],
    22.     });
    23.     map.addLayer(newLayer)

     RegularShape参数解释：

    • radius:

      • 含义: 图形的外半径，即从图形中心到外顶点的距离。

    • radius2:

      • 含义: 图形的内半径，仅在绘制星形时有效。表示从图形中心到内顶点的距离。

    • points:

      • 含义: 图形的顶点数。如果 radius2 被定义，则 points 表示星形的顶点数（外顶点和内顶点的总数），否则表示多边形的边数。
      • 示例值: 6 表示绘制一个六边形或六角星形。

    • angle:

      • 含义: 图形的旋转角度，以弧度为单位。Math.PI 表示旋转 180 度。
      • 示例值: Math.PI 表示图形旋转 180 度。

     然后是第二个样式函数selectStyleFunction

    鼠标触摸的时候获取到feature自定义属性features取出来，把每一个子feature绘制成星星形状展示。

    1. function selectStyleFunction(feature) {
    2.       const styles = [
    3.         new Style({
    4.           image: new CircleStyle({
    5.             radius: feature.get("radius"),
    6.             fill: invisibleFill,
    7.           }),
    8.         }),
    9.       ];
    10.       const originalFeatures = feature.get("features");
    11.       let originalFeature;
    12.       for (let i = originalFeatures.length - 1; i >= 0; --i) {
    13.         originalFeature = originalFeatures[i];
    14.         styles.push(createEarthquakeStyle(originalFeature));
    15.       }
    16.       return styles;
    17.     }

    完整代码：

    1. <template>
    2.   <div class="box">
    3.     <h1>Earthquake Clusters</h1>
    4.     <div id="map"></div>
    5.   </div>
    6. </template>
    7.  
    8. <script>
    9. import KML from "ol/format/KML.js";
    10. import Map from "ol/Map.js";
    11. import View from "ol/View.js";
    12. import {
    13.   Circle as CircleStyle,
    14.   Fill,
    15.   RegularShape,
    16.   Stroke,
    17.   Style,
    18.   Text,
    19.   Circle,
    20. } from "ol/style.js";
    21. import { MultiPoint, Point } from "ol/geom.js";
    22. import { Cluster, StadiaMaps, Vector as VectorSource } from "ol/source.js";
    23. import { Select, defaults as defaultInteractions } from "ol/interaction.js";
    24. import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
    25. import { createEmpty, extend, getHeight, getWidth } from "ol/extent.js";
    26. import Feature from "ol/Feature.js";
    27. export default {
    28.   name: "",
    29.   components: {},
    30.   data() {
    31.     return {
    32.       map: null,
    33.     };
    34.   },
    35.   computed: {},
    36.   created() {},
    37.   mounted() {
    38.     const earthquakeFill = new Fill({
    39.       color: "rgba(255, 153, 0, 0.8)",
    40.     });
    41.     const earthquakeStroke = new Stroke({
    42.       color: "rgba(255, 204, 0, 0.2)",
    43.       width: 1,
    44.     });
    45.     const textFill = new Fill({
    46.       color: "#fff",
    47.     });
    48.     const textStroke = new Stroke({
    49.       color: "rgba(0, 0, 0, 0.6)",
    50.       width: 3,
    51.     });
    52.     const invisibleFill = new Fill({
    53.       color: "rgba(255, 255, 255, 0.01)",
    54.     });
    55.  
    56.     function createEarthquakeStyle(feature) {
    57.       const name = feature.get("name");
    58.       const magnitude = parseFloat(name.substr(2));
    59.       const radius = 5 + 20 * (magnitude - 5);
    60.       return new Style({
    61.         geometry: feature.getGeometry(),
    62.         image: new RegularShape({
    63.           radius: radius,
    64.           radius2: 3,
    65.           points: 5,
    66.           angle: Math.PI,
    67.           fill: earthquakeFill,
    68.           stroke: earthquakeStroke,
    69.         }),
    70.       });
    71.     }
    72.  
    73.     let maxFeatureCount;
    74.     let vector = null;
    75.     const calculateClusterInfo = function (resolution) {
    76.       maxFeatureCount = 0;
    77.       const features = vector.getSource().getFeatures();
    78.       let feature, radius;
    79.       for (let i = features.length - 1; i >= 0; --i) {
    80.         feature = features[i];
    81.         const originalFeatures = feature.get("features");
    82.         const extent = createEmpty();
    83.         let j, jj;
    84.         for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
    85.           extend(extent, originalFeatures[j].getGeometry().getExtent());
    86.         }
    87.         maxFeatureCount = Math.max(maxFeatureCount, jj);
    88.         radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution;
    89.         feature.set('radius',radius)
    90.       }
    91.     };
    92.  
    93.     let currentResolution;
    94.     function styleFunction(feature, resolution) {
    95.       if (resolution != currentResolution) {
    96.         calculateClusterInfo(resolution);
    97.         currentResolution = resolution;
    98.       }
    99.       let style;
    100.       const size = feature.get("features").length;
    101.       if (size > 1) {
    102.         style = new Style({
    103.           image: new CircleStyle({
    104.             radius: feature.get("radius"),
    105.             fill: new Fill({
    106.               color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)],
    107.             }),
    108.           }),
    109.           text: new Text({
    110.             text: size.toString(),
    111.             fill: textFill,
    112.             stroke: textStroke,
    113.           }),
    114.         });
    115.       } else {
    116.         const originalFeature = feature.get("features")[0];
    117.         style = createEarthquakeStyle(originalFeature);
    118.       }
    119.       return style;
    120.     }
    121.  
    122.     function selectStyleFunction(feature) {
    123.       const styles = [
    124.         new Style({
    125.           image: new CircleStyle({
    126.             radius: feature.get("radius"),
    127.             fill: invisibleFill,
    128.           }),
    129.         }),
    130.       ];
    131.       const originalFeatures = feature.get("features");
    132.       let originalFeature;
    133.       for (let i = originalFeatures.length - 1; i >= 0; --i) {
    134.         originalFeature = originalFeatures[i];
    135.         styles.push(createEarthquakeStyle(originalFeature));
    136.       }
    137.       return styles;
    138.     }
    139.  
    140.     vector = new VectorLayer({
    141.       source: new Cluster({
    142.         distance: 40,
    143.         source: new VectorSource({
    144.           url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",
    145.           format: new KML({
    146.             extractStyles: false,
    147.           }),
    148.         }),
    149.       }),
    150.       style: styleFunction,
    151.     });
    152.     const raster = new TileLayer({
    153.       source: new StadiaMaps({
    154.         layer: "stamen_toner",
    155.       }),
    156.     });
    157.  
    158.     const map = new Map({
    159.       layers: [raster,vector],
    160.       interactions: defaultInteractions().extend([
    161.         new Select({
    162.           condition: function (evt) {
    163.             return evt.type == "pointermove" || evt.type == "singleclick";
    164.           },
    165.           style: selectStyleFunction,
    166.         }),
    167.       ]),
    168.       target: "map",
    169.       view: new View({
    170.         center: [0, 0],
    171.         zoom: 2,
    172.       }),
    173.     });
    174.  
    175.     //小demo
    176.     let piontArr = [-213399.46385070545, -7204129.9025042085];
    177.     let pointFeature = new Feature({
    178.       geometry: new MultiPoint([piontArr]),
    179.     });
    180.     let newLayer = new VectorLayer({
    181.       source: new VectorSource({
    182.         features: [pointFeature],
    183.       }),
    184.       style: [
    185.         new Style({
    186.           image: new RegularShape({
    187.             radius: 50,
    188.             radius2:20,
    189.             points: 5,
    190.             angle: Math.PI,
    191.             fill: earthquakeFill,
    192.             stroke: earthquakeStroke,
    193.           }),
    194.         }),
    195.       ],
    196.     });
    197.     // map.addLayer(newLayer)
    198.   },
    199.   methods: {},
    200. };
    201. </script>
    202.  
    203. <style lang="scss" scoped>
    204. #map {
    205.   width: 100%;
    206.   height: 500px;
    207. }
    208. .box {
    209.   height: 100%;
    210. }
    211. </style>
    212.

  • 相关阅读:
    gdb调试
    英语单词(二)
    不会接口测试？用Postman轻松入门（七）——文件上传请求
    文件目录操作——Linux命令核心
    ubuntu 20.04 docker 安装 mysql
    深入浅出Java的多线程编程——第一篇
    51单片机STC89C52RC——2.2 独立按键控制LED亮灭Plus
    自创Web框架之过度Django框架
    枚举--用枚举封装一个工具类
    战神引擎传奇假设教程
  • 原文地址：https://blog.csdn.net/aaa_div/article/details/139447243