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

官网demo地址：

Earthquake Clusters

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

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

vector = new VectorLayer({source: new Cluster({distance: 40,source: new VectorSource({url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",format: new KML({extractStyles: false,}),}),}),style: styleFunction,});const raster = new TileLayer({source: new StadiaMaps({layer: "stamen_toner",}),}); 
const map = new Map({layers: [raster, vector],interactions: defaultInteractions().extend([new Select({condition: function (evt) {return evt.type == "pointermove" || evt.type == "singleclick";},style: selectStyleFunction,}),]),target: "map",view: new View({center: [0, 0],zoom: 2,}),});

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

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

 let currentResolution;function styleFunction(feature, resolution) {if (resolution != currentResolution) {calculateClusterInfo(resolution);currentResolution = resolution;}let style;const size = feature.get("features").length;if (size > 1) {style = new Style({image: new CircleStyle({radius: feature.get("radius"),fill: new Fill({color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)],}),}),text: new Text({text: size.toString(),fill: textFill,stroke: textStroke,}),});} else {const originalFeature = feature.get("features")[0];style = createEarthquakeStyle(originalFeature);}return style;}

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

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

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这个类。

function createEarthquakeStyle(feature) {const name = feature.get("name");const magnitude = parseFloat(name.substr(2));const radius = 5 + 20 * (magnitude - 5);return new Style({geometry: feature.getGeometry(),image: new RegularShape({radius: radius,radius2: 3,points: 5,angle: Math.PI,fill: earthquakeFill,stroke: earthquakeStroke,}),});}

写一个小demo来理解RegularShape

//小demolet piontArr = [-213399.46385070545, -7204129.9025042085];let pointFeature = new Feature({geometry: new MultiPoint([piontArr]),});let newLayer = new VectorLayer({source: new VectorSource({features: [pointFeature],}),style: [new Style({image: new RegularShape({radius: 50,radius2:20,points: 5,angle: Math.PI,fill: earthquakeFill,stroke: earthquakeStroke,}),}),],});map.addLayer(newLayer)

 RegularShape参数解释：

  • radius:

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

  • radius2:

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

  • points:

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

  • angle:

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

 然后是第二个样式函数selectStyleFunction

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

function selectStyleFunction(feature) {const styles = [new Style({image: new CircleStyle({radius: feature.get("radius"),fill: invisibleFill,}),}),];const originalFeatures = feature.get("features");let originalFeature;for (let i = originalFeatures.length - 1; i >= 0; --i) {originalFeature = originalFeatures[i];styles.push(createEarthquakeStyle(originalFeature));}return styles;}

完整代码：

<template><div class="box"><h1>Earthquake Clusters</h1><div id="map"></div></div>
</template><script>
import KML from "ol/format/KML.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import {Circle as CircleStyle,Fill,RegularShape,Stroke,Style,Text,Circle,
} from "ol/style.js";
import { MultiPoint, Point } from "ol/geom.js";
import { Cluster, StadiaMaps, Vector as VectorSource } from "ol/source.js";
import { Select, defaults as defaultInteractions } from "ol/interaction.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { createEmpty, extend, getHeight, getWidth } from "ol/extent.js";
import Feature from "ol/Feature.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const earthquakeFill = new Fill({color: "rgba(255, 153, 0, 0.8)",});const earthquakeStroke = new Stroke({color: "rgba(255, 204, 0, 0.2)",width: 1,});const textFill = new Fill({color: "#fff",});const textStroke = new Stroke({color: "rgba(0, 0, 0, 0.6)",width: 3,});const invisibleFill = new Fill({color: "rgba(255, 255, 255, 0.01)",});function createEarthquakeStyle(feature) {const name = feature.get("name");const magnitude = parseFloat(name.substr(2));const radius = 5 + 20 * (magnitude - 5);return new Style({geometry: feature.getGeometry(),image: new RegularShape({radius: radius,radius2: 3,points: 5,angle: Math.PI,fill: earthquakeFill,stroke: earthquakeStroke,}),});}let maxFeatureCount;let vector = null;const calculateClusterInfo = function (resolution) {maxFeatureCount = 0;const features = vector.getSource().getFeatures();let feature, radius;for (let i = features.length - 1; i >= 0; --i) {feature = features[i];const originalFeatures = feature.get("features");const extent = createEmpty();let j, jj;for (j = 0, jj = originalFeatures.length; j < jj; ++j) {extend(extent, originalFeatures[j].getGeometry().getExtent());}maxFeatureCount = Math.max(maxFeatureCount, jj);radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution;feature.set('radius',radius)}};let currentResolution;function styleFunction(feature, resolution) {if (resolution != currentResolution) {calculateClusterInfo(resolution);currentResolution = resolution;}let style;const size = feature.get("features").length;if (size > 1) {style = new Style({image: new CircleStyle({radius: feature.get("radius"),fill: new Fill({color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)],}),}),text: new Text({text: size.toString(),fill: textFill,stroke: textStroke,}),});} else {const originalFeature = feature.get("features")[0];style = createEarthquakeStyle(originalFeature);}return style;}function selectStyleFunction(feature) {const styles = [new Style({image: new CircleStyle({radius: feature.get("radius"),fill: invisibleFill,}),}),];const originalFeatures = feature.get("features");let originalFeature;for (let i = originalFeatures.length - 1; i >= 0; --i) {originalFeature = originalFeatures[i];styles.push(createEarthquakeStyle(originalFeature));}return styles;}vector = new VectorLayer({source: new Cluster({distance: 40,source: new VectorSource({url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",format: new KML({extractStyles: false,}),}),}),style: styleFunction,});const raster = new TileLayer({source: new StadiaMaps({layer: "stamen_toner",}),});const map = new Map({layers: [raster,vector],interactions: defaultInteractions().extend([new Select({condition: function (evt) {return evt.type == "pointermove" || evt.type == "singleclick";},style: selectStyleFunction,}),]),target: "map",view: new View({center: [0, 0],zoom: 2,}),});//小demolet piontArr = [-213399.46385070545, -7204129.9025042085];let pointFeature = new Feature({geometry: new MultiPoint([piontArr]),});let newLayer = new VectorLayer({source: new VectorSource({features: [pointFeature],}),style: [new Style({image: new RegularShape({radius: 50,radius2:20,points: 5,angle: Math.PI,fill: earthquakeFill,stroke: earthquakeStroke,}),}),],});// map.addLayer(newLayer)},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/22937.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

充电桩软硬件，赚钱新招数！

充电桩软硬件，赚钱新招数！

开源 | 愣子充电桩平台 | 慧哥充电桩平台V2.5.2&#xff08;支持 汽车 电动自行车 云快充1.5、云快充1.6 微服务 &#xff09;https://liwenhui.blog.csdn.net/article/details/134773779?spm1001.2014.3001.5502 充电桩软件和硬件一体化的盈利方向可以清晰地归纳为以下几个主…
阅读更多...
【Kubernetes】 emptyDir、nfs存储卷 和 PV、PVC

【Kubernetes】 emptyDir、nfs存储卷 和 PV、PVC

emptyDir存储卷 当pod被分配给节点 容器和容器之间进行共享存储 hostPath nfs共享存储卷 NAS 专业的存储设备&#xff1b;一般是与NFS 搭配&#xff0c;然后共享出去 GFS 自己搭&#xff1b;CEPH(至少要9台) 第三方&#xff1b;NAS 第三方&#xff1b; 云端 oss …
阅读更多...
【wiki知识库】05.分类管理模块--后端SpringBoot模块

【wiki知识库】05.分类管理模块--后端SpringBoot模块

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 一、&#x1f525;今日目标 二、☀SpringBoot代码修改 1.使用逆向工程生成Category表结构 2. 新增CategoryQueryParam 3.新增CategorySaveParam 4.新增CategotyQueryVo 三、&#x1f916;新增分类管理的相关接口…
阅读更多...
学习分享-面向分布式服务架构的流量管理工具Apache Sentinel

学习分享-面向分布式服务架构的流量管理工具Apache Sentinel

前言 最近学习过程中有接触到Apache Sentinel这个工具&#xff0c;所以就分享一下相关的资料和知识。 Apache Sentinel是阿里巴巴开源的一款面向分布式服务架构的流量管理工具&#xff0c;主要用于流量控制、熔断降级和系统负载保护。Sentinel提供了一整套完善的流量管理方案&…
阅读更多...
人脸识别系统代码--相机抓取

人脸识别系统代码--相机抓取

1.导入库 import cv2 import os import tkinter as tk from tkinter import filedialog import subprocess from PIL import Image, ImageTk 2.设置窗口 win tk.Tk() win.title(相机抓取) win.geometry(750x600) 3.设置背景 image Image.open("11.gif") image…
阅读更多...
v1.2.70-FastJson的AutoType机制研究

v1.2.70-FastJson的AutoType机制研究

v1.2.70-FastJson的AutoType机制研究 最近在对接Alexa亚马逊语音技能&#xff0c;Smart Home Skill Apis时&#xff0c;有一个配置的JSON字符串是这样的&#xff1a; { "capabilityResources": {"friendlyNames": [{"type": "asset",…
阅读更多...
python图像识别库-pytesseract

python图像识别库-pytesseract

内容目录 一、安装1.安装tesseract OCR1) MAC中安装2) Windows中安装3) 中文报下载 二、pytesseract的简单使用 pytesseract是python的一个用于图像提取的库, 它实际上是对Tesseract OCR引擎的封装。pytesseract使得在Python项目中调用Tesseract变得更加简便&#xff0c;主要用…
阅读更多...
17K star，一款开源免费的手机电脑无缝同屏软件

17K star，一款开源免费的手机电脑无缝同屏软件

导读&#xff1a;白茶清欢无别事&#xff0c;我在等风也等你。 作为程序员&#xff0c;在我们的工作中经常需要把手机投票到电脑进行调试工作&#xff0c;选择一款功能强大的投屏软件是一件很必要的事情。今天给大家介绍一款开源且免费的投屏软件&#xff0c;极限投屏&#xff…
阅读更多...
Arthas调优工具使用

Arthas调优工具使用

1&#xff0c;服务器端下载 curl -O https://arthas.aliyun.com/arthas-boot.jar 2&#xff0c;服务器端启动 java -jar arthas-boot.jar 选定要绑定的Java进程ID 3&#xff0c;本地idea安装Arthas idea 4&#xff0c;选定方法右键trace,生成命令 trace com.xxx.xxx.xxx.vouche…
阅读更多...
C语言数据结构快速排序的非递归、归并排序、归并排序的非递归等的介绍

C语言数据结构快速排序的非递归、归并排序、归并排序的非递归等的介绍

文章目录 前言一、快速排序非递归二、归并排序五、归并排序非递归总结 前言 C语言数据结构快速排序的非递归、归并排序、归并排序的非递归等的介绍 一、快速排序非递归 快速排序非递归的定义 快速排序非递归&#xff0c;需要使用栈来实现。将左右下标分别push到栈中。在栈为…
阅读更多...
处理机调度

处理机调度

目录 处理机调度概述 1. 作业调度&#xff08;Job Scheduling&#xff09; 2. 中级调度&#xff08;Medium-term Scheduling&#xff09; 3. 进程调度&#xff08;Process Scheduling&#xff09; 调度算法 1. 先来先服务&#xff08;FCFS&#xff09; 2. 最短作业优先&a…
阅读更多...
基于Tricore的Tasking链接文件解读

基于Tricore的Tasking链接文件解读

目录 1.链接文件有什么用&#xff1f; 2.文件结构和语法解析 2.1 文件结构 2.2 语法解析 3.小结 玩惯了ld文件&#xff0c;突然让搞lsl&#xff0c;被其中花里胡哨的语法搞晕了&#xff0c;例如&#xff1a; memory cpu0_dlmu{mau 8;size 64k;type ram;map cached …
阅读更多...
qt 加载字体 c++

qt 加载字体 c++

目录 qt 加载字体 c label设置大小和字体&#xff1a; pro配置&#xff1a; resource.qrc qt 加载字体 c #include <QApplication> #include <QLabel> #include <QFontDatabase> #include <QVBoxLayout> #include <QWidget>int main(int ar…
阅读更多...
腾讯中视频计划项目玩法,号称执行就有收入

腾讯中视频计划项目玩法,号称执行就有收入

腾讯中视频掘金计划是一个创新的短视频创作与分享平台&#xff0c;类似于西瓜视频&#xff0c;允许用户发布原创视频内容&#xff0c;并将其同步至腾讯旗下的多个平台&#xff0c;用户基数大&#xff0c;相信视频播放量也会比较大。 操作流程&#xff1a; 1. 注册并登录腾讯中…
阅读更多...
深入对比：Transformer与RNN的详细解析

深入对比：Transformer与RNN的详细解析

在深度学习领域&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;中&#xff0c;循环神经网络&#xff08;RNN&#xff09;和Transformer模型都扮演着举足轻重的角色。然而&#xff0c;随着技术的不断发展&#xff0c;Transformer模型逐渐崭露头角&#xff0c;成为…
阅读更多...
OrangePi 安装 CANN 套件及体验 AI 应用

OrangePi 安装 CANN 套件及体验 AI 应用

CANN 环境安装&#xff08;桌面端跳过&#xff09; CANN 环境存在于下载页面的官方工具中&#xff0c;点击下载即可进入下载页面。 CANN 安装包就在倒数第二项&#xff0c;下载后传到开发板上。 给 CANN 安装包赋予运行权限并运行即可。 chmod x Ascend-cann-toolkit_7.0.0_l…
阅读更多...
N叉树的层序遍历-力扣

N叉树的层序遍历-力扣

本题同样是二叉树的层序遍历的扩展&#xff0c;只不过二叉树每个节点的子节点只有左右节点&#xff0c;而N叉树的子节点是一个数组&#xff0c;层序遍历到一个节点时&#xff0c;需要将这个节点的子节点数组的每个节点都入队。 代码如下&#xff1a; /* // Definition for a N…
阅读更多...
maxwell同步mysql到kafka（一个服务器启动多个）

maxwell同步mysql到kafka（一个服务器启动多个）

创建mysql同步用户 CREATE USER maxwell% IDENTIFIED BY 123456; GRANT ALL ON maxwell.* TO maxwell%; GRANT SELECT, REPLICATION CLIENT, REPLICATION SLAVE on *.* to maxwell%; 开启mysql binlog a.修改 /etc/my.cnf 配置 log-binmysql-bin # 开启binlog binlog-forma…
阅读更多...
2024前端面试准备2-JS基础知识回顾

2024前端面试准备2-JS基础知识回顾

变量类型和计算 1.值类型和引用类型的区别 常见值类型:undefined(定义undefined只能用let,不能用const)、字符串、bool、number、 Symbol; 常见引用类型: 对象, 数组、null(特殊引用类型,指针指向为空地址) 、function(特殊引用类型); 值类型的值直接存储在栈中;引用类型值存储…
阅读更多...
如何避免Python中默认参数带来的陷阱

如何避免Python中默认参数带来的陷阱

Python编程中&#xff0c;我们有时会给函数或方法提供默认参数。然而&#xff0c;这种做法在某些情况下可能会导致意想不到的行为&#xff0c;尤其是当默认参数是可变对象&#xff08;例如列表、字典或类实例对象&#xff09;时。本文将通过几个具体的例子来解释这个问题&#…
阅读更多...
最新文章

Copyright @ 2022~2023