三十七、openlayers官网示例Earthquakes Heatmap解析——在地图上加载热力图

官网demo地址:
Earthquakes Heatmap
这篇主要介绍了热力图HeatmapLayer
HeatmapLayer 是一个用于在地图上显示热力图的图层类型,通常用于表示地理数据中的密度或强度。例如,它可以用来显示地震、人口密度或其他空间数据的热点区域。在这个示例中,HeatmapLayer 被用来显示从 KML 文件中提取的地震数据。
const vector = new HeatmapLayer({source: new VectorSource({url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",format: new KML({extractStyles: false,}),}),//热力图的模糊半径,以像素为单位。blur: parseInt(blur.value, 10),//每个点的影响半径,以像素为单位。radius: parseInt(radius.value, 10),//用于根据特征属性计算热力图中每个点的权重 权重值 应介于 0 到 1 之间weight: function (feature) {const name = feature.get("name");const magnitude = parseFloat(name.substr(2));console.log("magnitude", magnitude);return magnitude - 5;},});
通过滑块的改变控制图层的半径和模糊度
blur.addEventListener("input", function () {vector.setBlur(parseInt(blur.value, 10));});radius.addEventListener("input", function () {vector.setRadius(parseInt(radius.value, 10));});
完整代码:
<template><div class="box"><h1>Earthquakes Heatmap</h1><div id="map"></div><form><label for="radius">radius size</label><input id="radius" type="range" min="1" max="50" step="1" value="5" /><label for="blur">blur size</label><input id="blur" type="range" min="1" max="50" step="1" value="15" /></form></div>
</template><script>
import KML from "ol/format/KML.js";
import Map from "ol/Map.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
import VectorSource from "ol/source/Vector.js";
import View from "ol/View.js";
import { Heatmap as HeatmapLayer, Tile as TileLayer } from "ol/layer.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const blur = document.getElementById("blur");const radius = document.getElementById("radius");const vector = new HeatmapLayer({source: new VectorSource({url: "https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml",format: new KML({extractStyles: false,}),}),//热力图的模糊半径,以像素为单位。blur: parseInt(blur.value, 10),//每个点的影响半径,以像素为单位。radius: parseInt(radius.value, 10),//用于根据特征属性计算热力图中每个点的权重 权重值 应介于 0 到 1 之间weight: function (feature) {const name = feature.get("name");const magnitude = parseFloat(name.substr(2));console.log("magnitude", magnitude);return magnitude-5;},});const raster = new TileLayer({source: new StadiaMaps({layer: "stamen_toner",}),});new Map({layers: [raster, vector],target: "map",view: new View({center: [0, 0],zoom: 2,}),});blur.addEventListener("input", function () {vector.setBlur(parseInt(blur.value, 10));});radius.addEventListener("input", function () {vector.setRadius(parseInt(radius.value, 10));});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
</style>
相关文章:
三十七、openlayers官网示例Earthquakes Heatmap解析——在地图上加载热力图
官网demo地址: Earthquakes Heatmap 这篇主要介绍了热力图HeatmapLayer HeatmapLayer 是一个用于在地图上显示热力图的图层类型,通常用于表示地理数据中的密度或强度。例如,它可以用来显示地震、人口密度或其他空间数据的热点区域。在这个示…...
curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL
source ~/.bash_profile flutter clean Command exited with code 128: git fetch --tags Standard error: 错误:RPC 失败。curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8) 错误:预期仍然需要 2737 个字节的正文 fetch-pack: unexpec…...
Spring Security 注册过滤器关键点与最佳实践
在 Spring Security 框架中,注册过滤器是实现身份验证和授权的关键组件。正确配置和使用注册过滤器对于确保应用程序的安全性至关重要。以下是一些关于 Spring Security 注册过滤器的注意事项和最佳实践。 过滤器链顺序: 注册过滤器通常位于过滤器链的末…...
力扣2024.考试的最大困扰度
力扣2024.考试的最大困扰度 注意同时>k才处理 class Solution {public:int maxConsecutiveAnswers(string answerKey, int k) {int n answerKey.size(),res0;unordered_map<int,int> cnt;for(int i0,j0;i<n;i){cnt[answerKey[i] - a] ;while(cnt[T - a] > k …...
java配置文件解析yml/xml/properties文件
XML 以mybatis.xml:获取所有Environment中的数据库并连接session为例 import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.Node; import org.w3c.dom.NodeList; import org.xml.sax.SAXException;import javax.xml.parsers.DocumentBuilder; impo…...
grpc接口调用
grpc接口调用 准备依赖包clientserver 参考博客: Grpc项目集成到java方式调用实践 gRpc入门和springboot整合 java 中使用grpc java调用grpc服务 准备 因为需要生成代码,所以必备插件 安装后重启 依赖包 <?xml version"1.0" encoding&…...
通信技术振幅键控(ASK)调制与解调硬件实验
一、实验目的 1. 掌握用键控法产生ASK信号的方法; 2. 掌握ASK非相干解调的原理。 二、实验内容 1. 观察ASK已调信号的波形; 2. 观察ASK解调信号的波形。 三、实验器材 1. 双踪示波器; 2. 通信原理实验箱信号源模块、③、④、⑦号模块。…...
自动化办公02 用openpyxl库操作excel.xlsx文件(新版本)
目录 一、文件读操作 二、文件写操作 三、修改单元格样式 openpyxl 是一个处理Excel表格的第三方库。openpyxl 库可以处理Excel2010以后的电子表格格式,包括:xlsx/xlsm/xltx/xltm。 openpyxl教程 一、文件读操作 工作簿(workbook): excel文件 工作表…...
用户反馈解决方案 —— 兔小巢构建反馈功能
目录 01: 前言 02: 用户反馈整体实现方案分析 03: 兔小巢全解析 04: 基于兔小巢实现用户反馈 05: 总结 01: 前言 在前台系统中,用户反馈 功能也是一个非常常见的需求。 通过反馈功能,我们可以知道当前的应用存在的一些不足和用户相应的一些诉求。…...
git 下载失败
-- 错误0 加 sudo git config --global http.postBuffer 524288000 -- 错误 $ git clone https://github.com/espressif/arduino-esp32.git -b release/v2.x arduino Cloning into arduino... remote: Enumerating objects: 53886, done. remote: Counting objects: 100% (1…...
力扣1438.绝对差不超过限制的最长连续子数组
力扣1438.绝对差不超过限制的最长连续子数组 难点:保存数组缩小后的最大最小值 用两个单调队列分别处理最大值和最小值 class Solution {public:int longestSubarray(vector<int>& nums, int limit) {deque<int> quemax,quemin;int n nums.size…...
如何避免Python中默认参数带来的陷阱
Python编程中,我们有时会给函数或方法提供默认参数。然而,这种做法在某些情况下可能会导致意想不到的行为,尤其是当默认参数是可变对象(例如列表、字典或类实例对象)时。本文将通过几个具体的例子来解释这个问题&#…...
代码随想录算法训练营第五十天|198.打家劫舍、213.打家劫舍II、337.打家劫舍III
代码随想录算法训练营第五十天 198.打家劫舍 题目链接:198.打家劫舍 确定dp数组以及下标的含义:dp[i]:考虑下标i(包括i)以内的房屋,最多可以偷窃的金额为dp[i]。确定递推公式:max(dp[i - 1],…...
VB.net 进行CAD二次开发(二)
利用参考文献2,添加面板 执行treeControl New UCTreeView()时报一个错误: 用户代码未处理 System.ArgumentException HResult-2147024809 Message控件不支持透明的背景色。 SourceSystem.Windows.Forms StackTrace: 在 System.Windows…...
安徽某高校数据挖掘作业6
1 根据附件中year文件,编辑Python程序绘制年销售总额分布条形图和年净利润分布条形图,附Python程序和图像。 2 根据附件中quarter和quarter_b文件,编辑Python程序绘制2018—2020年销售额和净利润折线图,附Python程序和图像。 3 …...
CMakeLists.txt和Package.xml
CMakeLists.txt和Package.xml CMakeLists.txt 总览 CMakeLists.txt 是用于定义如何构建 ROS (Robot Operating System) 包的 CMake 脚本文件。CMake 是一个跨平台的构建系统,用于自动化编译过程。在 ROS 中,CMakeLists.txt 文件指定了如何编译代码和链…...
Debian常用命令详解
Debian常用命令详解 Debian是一个流行的Linux发行版,它以其稳定性、强大的包管理系统和丰富的软件仓库而著称。对于Debian用户来说,掌握一些常用的命令行工具和命令是日常系统管理和维护的基础。下面,我们将介绍一些Debian系统中常用的命令。…...
代码随想录算法训练营day29|491.递增子序列、46.全排列、47.全排列II
递增子序列 491. 非递减子序列 - 力扣(LeetCode) 非递减子序列,则答案的子集中,需保持下一个元素大于等于前一个元素的顺序,由于题目中指出,所有的子序列长度需大于等于2,考虑当条件为path.siz…...
【ARM Cache 与 MMU 系列文章 7.8 – ARMv8/v9 MMU Table 表分配原理及其代码实现 2】
请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 MMU Table 表分配原理及其代码实现MMU Table 分配代码实现MMU Table 表分配原理及其代码实现 在做映射的时候所映射的地址范围最大只能是某一级 level table 中 entry 所能支持的最大…...
SAP PP学习笔记17 - MTS(Make-to-Stock) 按库存生产(策略70)
上几章讲了几种策略,策略10,11,30,40。 SAP PP学习笔记14 - MTS(Make-to-Stock) 按库存生产(策略10),以及生产计划的概要-CSDN博客 SAP PP学习笔记15 - MTS(Make-to-St…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一:使用Read()读取文件2.3、方式二:bufio读取文件2.4、方式三:os.ReadFile读取2.5、写…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...
