OpenLayer实现线条滚动线条流动动态线条

最新推荐文章于 2025-04-16 16:11:24 发布
最新推荐文章于 2025-04-16 16:11:24 发布
阅读量316 收藏
点赞数
分类专栏： Openlayers高阶教学 地理信息可视化与智慧城市数字大屏 GIS原理系列 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lz5211314121/article/details/143918312
版权

不管在什么框架中让线条“动起来”都有很多种方式。但是无论使用什么方式，其原理都是通过一定的时间间隔重新设置线条的样式或者重新渲染线条来实现的。

那么话不多说我们先来看下效果：

录屏2024-11-20 16.32.30

我们本文使用到的核心原理也是通过setInterval不断的设置线条的偏移量lineDashOffset。

其核心代码如下：

 const vectorSource = new VectorSource({
    features: new GeoJSON
了解本专栏 订阅专栏 解锁全文 超级会员免费看
openlayers：实现流动线效果（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 847
openlayers：实现流动线效果（附完整源码）
openLayer-动画线
zhushanlin的博客
04-29 536
【代码】openLayer-动画线。
Openlayers超级简单实现流向动画例子！
qq_39881010的博客
12-07 564
3、前端实现，获取后端传来的点编号，按照点编号渲染，两点之间通过经度纬度差，算要插入几个点来计算动画节点。roadPoint.shp和roadPoint.js是完全一致的就是数据格式不通一个是esri shp文件一个是geojson，之所以这样是浏览器无法直接加载shp数据。roadPoint.shp属性表存储当前点的ID和他子节点的CHILD_ID，如果他的子节点CHILD_ID有多个说明这是个分叉点，如果为-1则为终点无子节点。其中1、2、0、3、4是一条完整的线，从选择的点到4叶子节点。
openlayers 画流动的线动态的线
最新发布
收集、分享
04-16 168
openlayers 画流动的线动态的线
【WebGIS】Openlayers流动线与风场效果
weixin_42029283的博客
12-02 4029
【WebGIS】Openlayers流动线与风场效果
openlayers动态线
12-22
openlayers通过canvas绘制路线，动态模拟动态起点到终点的过程
使用openlayers展示对象的移动轨迹
05-19
使用openlayers展示对象的移动轨迹
vue3 + openlayers---流动线条（含动画效果）
QDxin_xyz的博客
05-17 650
【代码】vue3 + openlayers---流动线条（含动画效果）
vue openlayers 流动线效果
07-09
资源下载不可直接运行，下载前可查看博客：https://blog.csdn.net/KK_bluebule/article/details/125694548 资源可供参考，因为只是一个vue页面和json测试数据
英语四级单词
热门推荐
xxiyy0411的博客
12-18 2万+
// ==UserScript== // @name 背单词 // @description 边上网边刷英语四级单词 // @namespace Xiaomaxin // @version 1.31 // @author Xiaomaxin // @include * // @require http://cdn.bootcss.com
openlayers 加载geoserver管线并报警闪烁
niexier的博客
12-10 893
一、下载vue地图包 npm install ol yarn add ol 二、DOM加载 <div id="mapDiv" v-loading="loading"></div> 三、代码如下 <script> import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import {GeoJSON} from 'ol/format';
Openlayers实现扩散的动态点（水纹效果）
10-14
主要为大家详细介绍了Openlayers实现扩散的动态点，水纹效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Leaflet实现路径轨迹回放
11-07
基于Leaflet实现路径轨迹回放功能，另外对Leaflet.Marker类进行扩展，支持设置图标旋转角度
openlayers很多特效demo
07-01
openlayers很多特效demo openlayers很多特效demo openlayers很多特效demo
openlayers实现路径导航效果
ThinkLess404的专栏
03-16 2044
最近做项目遇到一个需求，要显示采集的用户的行动轨迹，类似导航软件的规划路径，有起点终点，路径上通过箭头指向到终点位置。前端通过openlayers实现。路径的styleFunction,可以设定轨迹颜色，轨迹宽度，箭头密度，箭头颜色，箭头大小等参数动态获取styleFunction，满足不同要求。
OpenLayers实现线条发光模糊blur效果，流光线条
lz5211314121的博客
12-11 334
首先要清楚发光的原理是什么，所有发光都是相对的，首先要相对于较暗的环境，并且还得伴随着模糊的效果。解释一下，这个函数一共4个参数，当然你可以根据自己的喜好随意去修改，首先第一个参数map是你使用ol新建的那个map对象，第二个参数data是你要渲染的数据，第三个参数是你要发光的颜色，第四个参数是线条的粗细。目的很简单我们想在OpenLayers中实现类似于mapbox中的line-blur的效果，或者说时cesium中的glowpower的效果。底层是一个其他颜色的相对较宽的线条，上层是一个白色的线条。
openlayers/// Puppeteer.js
weixin_30467087的博客
08-30 170
1.定位;https://viglino.github.io/ol3-ext/examples/map.interaction.geolocationdraw.html 2 .添加Overlay div遮住鼠标事件处理 var point_div = document.createElement('div'); point_div.className = "css_animationBui ...
openlayers 4快速渲染管网模型数据
weixin_30614109的博客
07-20 294
1、背景 项目需要将管网模型运行的结果数据在矢量地图上以不同颜色加以区分。结果数据中和图层数据中唯一能对应的只有一个标识。 2、实现思路 利用定时器+图层统一渲染。在style上找到突破口，而不是用常规的循环 3、代码如下 1 WdemandModel: function(){ 2 var flag = 0; 3 var time = 0; ...
OpenLayer实现在线标绘与要素管理功能
这通常通过操作`ol.layer`对象和`ol.layer.Group`来实现。 ### 定位功能 定位功能可以使用浏览器的地理位置API来实现。在支持HTML5的浏览器中，可以调用`navigator.geolocation`来获取用户的当前位置，并将地图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebGIS小智

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值