openlayers 行政区划 鼠标移入 圆扩散动画 打点

在这里插入图片描述

封装了一个类似全局动画控制器的类 用于播放所有动画

  	// 动画播放总控制器class animationSupper {funList = {}//所有的动画//修改动画setAnimationAct(animationAct) {this.funList.map(item => {item.animationAct()})this.setAnimationAct = animationActreturn this}//动画播放方法animationFun() {if (!Object.keys(this.funList).length) returnObject.values(this.funList).map(item => {item()})requestAnimationFrame(() => this.animationFun())}// 修改动画setFun(keyValue, fun) {let key = keyValue ? keyValue : Math.random()this.funList[key] = funthis.animationFun()return key}//添加动画addFun(fun) {let key = Math.random()this.funList[key] = funthis.animationFun()return key}//删除动画removeFun(key) {delete this.funList[key]}}

单个动画控制类

	//下面的控制器要用到这个实例化后的类let ani = new animationSupper()// 动画控制器class animation {geometryanimationAct//掩饰时间timer = 1//动画携带数据columnData//播放状态控制status = false//每个动画专有的keyfunKey//入口需要传入图形 和动画方法constructor(geometry, animationAct) {this.geometry = geometrythis.animationAct = animationActreturn this}//修改某个动画携带的数据setCoumnData(columnData) {this.columnData = columnDatareturn this}//修改动画时间setTimer(timer) {this.timer = timerreturn this}//更改动画setAnimationAct(animationAct) {this.animationAct = animationActani.setFun(this.funKey, () => this.animationAct(this.columnData))return this}//开始动画start() {this.status = truesetTimeout(() => {ani.addFun(() => this.animationAct(this.columnData))}, this.timer)return this}//停止动画stop() {ani.removeFun(this.funKey)this.status = false}}

基础地图

let map = new ol.Map({target: "map",view: new ol.View({center: [112.549248, 37.857014],zoom: 5,projection: "EPSG:4326",}),layers: [],})

文字图层相关内容

 	//新建空的文字图层 名字为了方便控制let textLayer = new ol.layer.Vector({name: "text",zIndex: 3,//进行图层层次控制source: new ol.source.Vector(),})/*** 创建一个文字 返回文字要素 需要传入坐标点 及文字内容* @param {[number,number]} xy 坐标* @param {string} text 渲染的文字* @returns {Feature} 要素*/function addText(xyz, text) {//新建要素 点的位置为let feature = new ol.Feature({//几何为一个点 位置在xygeometry: new ol.geom.Point(xyz)});//修改样式为文字feature.setStyle(new ol.style.Style({text: new ol.style.Text({text: text,//文字内容为传入的textfont: '16px Calibri,sans-serif',//字体大小和字体样式fill: new ol.style.Fill({color: '#fff'}),//填充样式offsetY: -18//位置偏移 有y就有x})}));return feature}map.addLayer(textLayer)

点图层的相关内容

	 //新建空的点图层 名字为了方便控制 let pointLayer = new ol.layer.Vector({name: "point",zIndex: 2, //进行图层层次控制source: new ol.source.Vector()})/*** 创建一个圆 返回圆的要素 需要传入坐标点* @param {[number,number]} xy 坐标* @returns {Feature} 要素*/function addCircle(xy) {// 创建一个圆点要素let a = new ol.Feature({//几何对象为一个点 位置在xygeometry: new ol.geom.Point(xy),});//修改创建的要素样式为圆a.setStyle(new ol.style.Style({image: new ol.style.Circle({//半径为3radius: 3,//填充颜色fill: new ol.style.Fill({color: 'rgba(255,1,1,0.3)'}),})}))return a}map.addLayer(pointLayer)

行政区划 部分内容 geojson文件地址

 	//原本样式 这里提出来为了下面的移入样式做准备let geoStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: '#eee',width: 1}),fill: new ol.style.Fill({color: '#d1d1d1'})})//选中的样式 为下面的移入样式做准备let selectStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: '#eee',width: 1}),fill: new ol.style.Fill({color: '#92959e'}),})//新建 行政区划geojson name为了下面选中的时候不影响其他图层let geoLayer = new ol.layer.Vector({name: "geoLayer",index: 1,//进行图层层次控制source: new ol.source.Vector({url: './province.geojson',//放你的地址format: new ol.format.GeoJSON()}),style: geoStyle})map.addLayer(geoLayer)

添加点和文字的方法 不需要的可以在里面删除掉 某个方法的调用 不需要点的动画就直接将addCircle返回的内容添加到pointLayer

	//添加点和文字的方法let initTextAndPoint = (event) => {//在所有的要素中遍历event.target.getFeatures().map(item => {//获取要素属性let data = item.getProperties()//获取到各省市的中心点if (data.center || data.centroid) {//在文字图层获取数据源 且在数据源中添加要素 添加的要素为addText的返回内容 传入的文字裁掉 省|特别行政区|自治区textLayer.getSource().addFeature(addText(data.center || data.centroid, data.name.replace(/省|特别行政区|自治区/g, '')))//获取Circle画的圆要素let geometry = addCircle(data.center || data.centroid)//将这个要素添加到点图层pointLayer.getSource().addFeatures([geometry])//使用刚才创建的动画类 创建一个动画let an = new animation(geometry, ({radius, status}) => {//如果我们添加进去的 radius 半径大于10 我们将数据还原为0if (radius > 10)an.setCoumnData({radius: 0})else {//否则将数据++ 这里加的值越大 速度越快an.setCoumnData({radius: radius + 0.005})}//捕获错误try {//获取到圆的style中的自定义styleImage 就是创建出来的样式源更改半径geometry.getStyle().getImage().setRadius(radius)//再更改源的style 实现动画geometry.setStyle(geometry.getStyle())} catch (e) {//如果出错则停止动画an.stop()}})//更改延迟执行时间an.setTimer(Math.random() * 1000)//修改自定义数据 且开始动画an.setCoumnData({radius: 0,}).start()}})// 停止监听数据源更改 否则此方法一直调用geoLayer.getSource().un('change', initTextAndPoint)}//监听数据源修改 调用添加点和文字方法geoLayer.getSource().on('change', initTextAndPoint)

鼠标移入 更改颜色 代码

 	//鼠标移入的选中项let selectFeature = nulllet selectId = null//监听鼠标移动map.on('pointermove', function (event) {//从map中获取到像素位置下的要素map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {//如果图层为geoLayer并且不是上一次选中的要素if (selectId != feature.ol_uid && layer.get('name') == 'geoLayer' && feature) {//如果选中的要素有则还原style 且将其他设置为空if (selectFeature) {selectFeature.setStyle(geoStyle)selectFeature = nullselectId = null}// 将唯一id提出来 进行性能优化 避免下一次再更改样式selectId = feature.ol_uid//将给要素给到选中要素 为了下一次恢复使用selectFeature = feature//修改要素样式feature.setStyle(selectStyle)}});});

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

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

相关文章

Excelize 开源基础库 2.8.1 版本发布, 2024 年首个更新

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准。可以使用它来读取、写入由 Microsoft Excel™ 2007 及以上版本创建的电子表格文档。支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式&#xf…

一元函数微分学——刷题(21

目录 1.题目:2.解题思路和步骤:3.总结:小结: 1.题目: 2.解题思路和步骤: 出现式子: 就能说明: 接下来就是洛必达一下得到二次导的定义式: 3.总结: 出现式子…

输电线路微波覆冰监测装置助力电网应对新一轮寒潮

2月19日起,湖南迎来新一轮寒潮雨雪冰冻天气。为做好安全可靠的供电准备,国网国网湘潭供电公司迅速启动雨雪、覆冰预警应急响应,采取“人巡机巡可视化巡视”的方式,对输电线路实施三维立体巡检。该公司组织员工对1324套通道可视化装…

[AutoSar]BSW_Com03 DBC详解 (一)

目录 关键词平台说明一、DBC 定义1.1 相关工具 二、主要组成部分介绍2.1 Networks2.2 ECUs2.3 Network nodes2.4 messages2.5 signal2.6 Value Tables 三、主要组成部分关系图 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &am…

自定义搭建管理系统

最近使用自己搭建的脚手架写了一个简易管理系统,使用webpackreactantd,搭建脚手架参考: 使用Webpack5搭建项目(react篇)_babel-preset-react-app-CSDN博客 搭建的思路: 1. 基建布局,使用antd的…

【Python】Windows本地映射远程Linux服务器上的端口(解决jupyter notebook无法启动问题)

创作日志: 学习深度学习不想在本地破电脑上再安装各种软件,我就用实验室的服务器配置环境,启动jupyter notebook时脑子又瓦特了,在自己Windows电脑上打开服务器提供的网址,那肯定打不开啊,以前在其它电脑上…

matlab|基于DistFlow潮流的配电网故障重构(输入任意线路)

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序采用适用于辐射状网络的DistFlow潮流模型,可输入任意故障线路编号,得到优化重构结果。这个程序是配电网故障重构可视化matlabyalmip的升级版,原来的程序是以电压质量作…

[JavaWeb玩耍日记]Mybatis快速入门与增删改查

目录 模块一:快速入门 1.创建数据库,插入数据 2.创建maven模块后,需要导入的依赖有哪些? 3.想要输出查询到的数据(包括日志打印),需要创建哪些文件? 4.如何放置UserMapper接口与User类? 5.…

【嵌入式学习】IO进程线程day02.24

一、思维导图 二、习题 #define MSGSIZE sizeof(struct msgbuf)-sizeof(long) int main(int argc, const char *argv[]) {//创建子进程pid_t pidfork();//在父进程实现读功能if(pid>0){//1、创建key值key_t key 0;if((keyftok("/", k)) -1){perror("ftok …

多模态表征中的里程碑—CLIP及中文版Chinese-CLIP:理论揭秘、代码微调与论文阅读 (视觉与语义的奇妙共舞~)

我之前一直在使用CLIP/Chinese-CLIP,但并未进行过系统的疏导。这次正好可以详细解释一下。相比于CLIP模型,Chinese-CLIP更适合我们的应用和微调,因为原始的CLIP模型只支持英文,对于我们的中文应用来说不够友好。Chinese-CLIP很好地…

基于插件实现RabbitMQ“延时队列“

1.官网下载 在添加链接描述下载rabbitmq_delayed_message_exchange 插件,本文以v3.10.0为例 1.1.上传安装包 scp /Users/hong/资料/rabbitmq_delayed_message_exchange-3.10.0.ez root10.211.55.4:/usr/local/software1.2.将文件移入RabbitMQ的安装目录下的plugins目录 m…

C++中的左值和右值

目录 一. 左值和右值的概念 1. 左值 1.1 可修改的的左值 1.2 不可修改的左值 右值 二. 左值引用和右值引用 1. 左值引用 2. 右值引用 主要用途 1. 移动语义 2. 完美转发 2.1 引用折叠 2.2 std::forward 一. 左值和右值的概念 什么是左值和右值 1. 左值 左值是一个表示…