三十六、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.rhkb.cn/news/341791.html

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

相关文章

《微服务大揭秘：SpringBoot与SpringCloud的魔法组合》

《微服务大揭秘：SpringBoot与SpringCloud的魔法组合》

加入我们的探险队伍&#xff0c;一起深入SpringBoot与SpringCloud构建的微服务世界。以轻松幽默的笔触&#xff0c;带你一步步揭开微服务架构的神秘面纱&#xff0c;从服务发现的智能地图Eureka&#xff0c;到API网关Zuul的城市门卫&#xff0c;每一个环节都充满了惊喜。不仅如…
阅读更多...
htb_solarlab

htb_solarlab

端口扫描 80,445 子域名扫描 木有 尝试使用smbclient连接445端口 Documents目录可查看 将Documents底下的文件下载到本地看看 xlsx文件里有一大串用户信息&#xff0c;包括username和password 先弄下来 不知道在哪登录&#xff0c;也没有子域名&#xff0c;于是返回进行全端…
阅读更多...
chat4-Server端保存聊天消息到mysql

chat4-Server端保存聊天消息到mysql

本文档描述了Server端接收到Client的消息并转发给所有客户端或私发给某个客户端 同时将聊天消息保存到mysql 服务端为当前客户端创建一个线程&#xff0c;此线程接收当前客户端的消息并转发给所有客户端或私发给某个客户端同时将聊天消息保存到mysql 本文档主要总结了将聊天…
阅读更多...
UnityAPI学习之游戏物体的方法使用

UnityAPI学习之游戏物体的方法使用

目录 游戏物体 创建游戏物体的三种方式 组建的获取和查找 游戏物体的方法与其他成员变量 游戏物体的生成 游戏物体的激活状态/标签(tag)/层级(layer) 游戏物体的激活与失活 游戏物体的查找 1. 名称查找(Find) 2. 通过标签查找游戏物体&#xff08;FindGameObjectWithT…
阅读更多...
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",…
阅读更多...
json和axion结合

json和axion结合

目录 java中使用JSON对象 在pom.xml中导入依赖 使用 public static String toJSONString(Object object)把自定义对象变成JSON对象 json和axios综合案例 使用的过滤器 前端代码 响应和请求都是普通字符串 和 请求时普通字符串&#xff0c;响应是json字符串 响应的数据是…
阅读更多...
使用 Django 连接 MySQL 数据库

使用 Django 连接 MySQL 数据库

文章目录 步骤一&#xff1a;安装必要的库和驱动步骤二&#xff1a;配置数据库连接步骤三&#xff1a;执行数据库迁移步骤四&#xff1a;开始使用 MySQL 数据库创建一个模型迁移模型到数据库使用模型进行数据操作创建新记录&#xff1a;查询记录&#xff1a;更新记录&#xff1…
阅读更多...
基于百度接口的实时流式语音识别系统

基于百度接口的实时流式语音识别系统

目录 基于百度接口的实时流式语音识别系统 1. 简介 2. 需求分析 3. 系统架构 4. 模块设计 4.1 音频输入模块 4.2 WebSocket通信模块 4.3 音频处理模块 4.4 结果处理模块 5. 接口设计 5.1 WebSocket接口 5.2 音频输入接口 6. 流程图 程序说明文档 1. 安装依赖 2.…
阅读更多...
Element ui图片上传

Element ui图片上传

前言 对于广大小白来说&#xff0c;图片上传简直是上传难&#xff0c;难于上青天&#xff01;废话不多说&#xff0c;步入正题&#xff0c;您就瞧好吧&#xff01; 步骤一&#xff1a;前端使用element ui组件&#xff08;upload上传&#xff09; 我个人喜欢使用第二个组件&a…
阅读更多...
运放应用1 - 反相放大电路

运放应用1 - 反相放大电路

1.前置知识 反相放大电路存在 负反馈电路 &#xff0c;工作在线性区&#xff0c;可以利用 虚短 概念来分析电路。 注&#xff1a;运放的 虚断 特性是一直存在的&#xff0c;虚短特性则需要运放工作在 线性区 有关运放的基础知识&#xff0c;可以参考我的另外一篇文章&#xff…
阅读更多...
BGP基础配置

BGP基础配置

BGP 邻居关系建立&#xff0c;与路由条目宣告是分开的配置的 1)直连的 EBGP 邻居关系建立 [r1]bgp1 启动 BGP 协议&#xff0c;启动时需要键入 AS号&#xff1b;没有多进程概念 [r1-bgp]router-id 1.1.1.1 建议配置 RID;若不配置将自动生成一规则同 OSPF 相同 [r1-bgp]pe…
阅读更多...
门面模式Api网关(SpringCloudGateway)

门面模式Api网关(SpringCloudGateway)

1. 前言 当前通过Eureka、Nacos解决了服务注册和服务发现问题&#xff0c;使用Spring Cloud LoadBalance解决了负载均衡的需求&#xff0c;同时借助OpenFeign实现了远程调用。然而&#xff0c;现有的微服务接口都直接对外暴露&#xff0c;容易被外部访问。为保障对外服务的安全…
阅读更多...
【kubernetes】探索k8s集群的pod控制器详解（Deployment、StatefulSet、DaemonSet、Job、CronJob）

【kubernetes】探索k8s集群的pod控制器详解（Deployment、StatefulSet、DaemonSet、Job、CronJob）

目录 一、Pod控制器及其功用 二、pod控制器有多种类型 2.1ReplicaSet 2.1.1ReplicaSet主要三个组件组成 2.2Deployment 2.3DaemonSet 2.4StatefulSet 2.5Job 2.6Cronjob 三、Pod与控制器之间的关系 3.1Deployment 3.2SatefulSet 3.2.1StatefulSet三个组件 3.2.2为…
阅读更多...
引擎：UI

引擎：UI

一、控件介绍 Button 按钮 创建一个按钮 按钮禁用 精灵模式 颜色模式 缩放模式 绑定点击事件 EditBox 输入框 Layout 布局 支持水平排列、垂直排列、背包排列 PageView 页面视图 ProgressBar 进度条 RichText 富文本 绑定点击事件 事件可以被其它标签包裹 图文混排 Scroll…
阅读更多...
Redis位图

Redis位图

简介 在我们平时开发过程中&#xff0c;会有一些bool型数据需要存取&#xff0c;比如用户一年的签到记录&#xff0c;签了是1&#xff0c;没签是0&#xff0c;要记录365天。如果使用普通的key/value&#xff0c;每个用户要记录365个&#xff0c;当用户上亿的时候&#xff0c;需…
阅读更多...
本地知识库开源框架Fastgpt、MaxKB产品体验

本地知识库开源框架Fastgpt、MaxKB产品体验

本地知识库开源框架Fastgpt、MaxKB产品体验 背景fastgpt简介知识库共享部署 MaxKB总结 背景 上一篇体验了Quivr、QAnything两个开源知识库模型框架&#xff0c;这次介绍两款小众但是体验比较好的产品。 fastgpt 简介 FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&am…
阅读更多...
kubeedge v1.17.0部署教程

kubeedge v1.17.0部署教程

文章目录 前言一、安装k8s平台二、部署kubeedge1.部署MetalLB(可选)2.cloud3.edge4. 部署nginx到edge端 总结参考 前言 本文主要介绍kubeedge v1.17.0的安装过程 主要环境如下表 应用版本centos7.0k8s1.28.2kubeedge1.17.0docker24.0.8centos7.0 一、安装k8s平台 本文主要参…
阅读更多...
大数据学习问题记录

大数据学习问题记录

问题记录 node1突然无法连接finalshell node1突然无法连接finalshell 今天我打开虚拟机和finalshell的时候&#xff0c;发现我的node1连接不上finalshell,但是node2、node3依旧可以链接&#xff0c;我在网上找了很多方法&#xff0c;但是是关于全部虚拟机连接不上finalshell&a…
阅读更多...
跨域请求解决方法----不允许有多个 ‘Access-Control-Allow-Origin‘ CORS 头

跨域请求解决方法----不允许有多个 ‘Access-Control-Allow-Origin‘ CORS 头

后端配置了代码&#xff1a; spring:application:name: spzx-server-gatewaycloud:nacos:discovery:server-addr: localhost:8848gateway:discovery:locator:enabled: trueglobalcors:cors-configurations:[/**]:allowedOriginPatterns: "*"# 允许请求中携带的头信息…
阅读更多...
【Linux系统】进程信号

【Linux系统】进程信号

本篇博客整理了进程信号从产生到处理的过程细节&#xff0c;通过不同过程中的系统调用和其背后的原理&#xff0c;旨在让读者更深入地理解操作系统的设计与软硬件管理手段。 目录 一、信号是什么 1.以生活为鉴 2.默认动作与自定义动作 3.信号的分类、保存、产生 二、产生…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023