四、openlayers官网示例Animated GIF解析——地图上加载GIF动画

原创 已于 2024-05-20 11:53:21 修改 · 1.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Animated #GIS #前端 #openlayers #openlayers官方示例 #地图

于 2024-05-08 19:20:47 首次发布

这篇讲的是如何在地图上加载gif动画，因为openlayers本身是不支持插入gif动画的，因此我们要下一个gifler插件。

npm i gifler

npm下下来之后发现直接import和require引入都不行，好嘛，直接引入算了

在node_moudles里面找到这个文件，复制出来

直接丢到项目public/gifler下面

在index.html下面引入gifler

<script src="gifler/gifler.min.js"></script>

 

顺便在网上找一张gif动画放到data目录下。

然初始化一个map，这次用到的是StadiaMaps底图，我试了下应该是可以直接加载出来的。

 const rasterLayer = new TileLayer({
      so
最低0.47元/天 解锁文章
085：vue+openlayers 加载gif图片动画 （示例代码）
大剑师兰特的GIS世界
08-24 1838
本示例的目的是介绍演示如何在vue+openlayers中通过gifler来添加gif文件。
openlayer 加载gif格式动图
m0_73863692的博客
08-27 617
博主在自己写的时候发现，openlayers Icon image不能展示动图，把动图展示为静图，于是换了一种操作如下。
js读取geoserver发布WMTS服务配置文件，并返回openlayers加载地图所需要参数
最新发布
RenZhXu的博客
10-11 267
本文介绍了一个JavaScript方法，用于读取GeoServer发布的WMTS服务配置文件，并返回OpenLayers加载地图所需的参数。方法通过解析GetCapabilities请求返回的XML文档，提取图层标识符、矩阵集、分辨率等关键信息。当配置文件中缺少分辨率数据时，方法会提供默认值。最后展示了如何调用该方法将WMTS图层添加到OpenLayers地图中，并自动调整视图范围以适应图层边界。该方法为GeoServer WMTS服务与OpenLayers的集成提供了便捷的解决方案。
openlayers添加gif图
Gr_lbxx的博客
04-28 425
)&:hover {
Openlayers Overlay加载gif图片
weixin_38170255的博客
09-05 1437
说明： 项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。 后面采用overlay的方式，gif图片赋值给DOM元素 解决方案： 1、单个点 先在地图容器里新增一个id为marks的<div>标签 /*加载gif图片格式*/ function addGifMarks(...
OpenLayers 动画
GIS之路
06-12 515
注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key动画在WebGIS开发中是很常见的操作，一般具有平移动画、旋转动画、弹性动画等。在OpenLayers开发中，地图动画主要由View类的animate方法实现。animate可以实现多段动画效果，其中参数包括zoomcenterresolution等。
十八、openlayers官网示例Custom Animation解析——地图上添加自定义动画、圆圈涟漪效果
aaa_div的博客
05-19 1089
记录动画开始的时间，红色圈的动画执行是3秒 ，在annimate函数里实时获取动画执行的过程中的每一帧的当前时间，用当前时间减去初始的时间，算出已经过去的时间elapsed，当elapsed时间大于等于3000时终止函数。先来看一下一次动画的完整流程，每隔一秒地图上增加一个蓝色圈，蓝色圈上增加一个半径慢慢变大，透明度慢慢变小的红色圈，红色圈执行3秒，然后消失，下一个蓝色圈开始出现。首先定义一个动画执行的时间，克隆一个几何形状，并保证每一次添加蓝色圈后都绑定一次annimate事件。重点是红色圈的产生函数。
四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画
aaa_div的博客
06-07 1472
而绘制的线段点需要从coords坐标数组中取，每次都取0到index的坐标。elapsedPoints就是表示了当前需要取的index值，因为elapsedTime是毫秒值，会很快，所以没有直接使用elapsedTime去从数组里取值，而是乘以了一个系数const pointsPerMs = 0.02。绘制过程中需要实时设置一下绘制的样式，而绘制结束后，也需要保持线的样式，所以在图层里需要定义一个完成后的样式。animateFlights获取当前帧对象，利用时间差截取数组中的项，来实现线慢慢变长的效果。
四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗，点击显示图形信息
aaa_div的博客
06-08 462
初始化图层的时候，添加一个矢量的点数据到地图上，在new Feature时添加一些自定义属性。创建overlay实例 ，offset是偏移量，根据写的元素大小调节。点击地图的时候，获取图形的信息并给 this.message赋值。使用Overlay在地图上添加弹窗，点击控制显隐。写一个元素，用来展示信息。
五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头
aaa_div的博客
06-21 651
绘制直线时，通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标，使用 Math.atan2计算出箭头图标的旋转角度。创建一个矢量数据源，将其绑定为draw的数据源并展示在矢量图层上。这篇介绍了在地图上绘制箭头。
80.在 Vue3 中使用 OpenLayers 和 gifler 加载 GIF 动画
小彭的博客
02-10 1283
通过结合 Vue3、OpenLayers 和 gifler，我们能够在 Vue 应用中实现动态 GIF 动画的加载与展示，并且能够通过 OpenLayers 提供的丰富地图功能与交互，使得地图应用不仅仅是静态展示，而是更加生动和互动。你可以根据需求将这种技术应用于更多的场景，例如：标记动态位置、展示动画效果等。希望这篇文章对你有所帮助，欢迎留言讨论或分享你在实现过程中遇到的问题和经验。
openlayers的各种例子
10-14
OpenLayers 是由MetaCarta公司开发的，用于WebGIS客户端的 JavaScript包，目前的最高版本是2.5 V，通过BSD License 发行。它实现访问地理空间数据的方法都符合行业标准，比如 OpenGIS的WMS和WFS规范， OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和 Rico库的一些组件。
openlayers案例demo（详细注释）
01-22
网上很多案例都不全面，个人整理了一套详细的方案代码加注释，希望能帮到你们，代码简洁，不懂的可以加我的号！
openlayers-example:OpenLayers 使用示例和创建图块的脚本
06-13
OpenLayers 示例 OpenLayers 使用示例和创建图块的脚本。 如何 安装 Ruby、Paperclip、ImageMagick 将一个名为 image.jpg 的图像放入数据目录 运行 create_tiles.rb 打开 index.html 作者（Speransky Danil）：| | |
Openlayers 常用实例
Chiangku的博客
09-28 1683
#openlayers常用实例 http://openlayers.org/en/master/examples/epsg-4326.html – 标尺 http://openlayers.org/en/master/examples/export-map.html – 截图 http://openlayers.org/en/master/examples/export-pdf.html – 导出...
Vue+OpenLayers实现加载GIF文件并采用CSS设置背景的方法
ByteZenith的博客
08-13 564
本文介绍了如何使用Vue和OpenLayers加载GIF文件，并通过CSS设置为背景。首先，在Vue项目中准备好GIF文件，然后在Vue组件中引入并设置CSS背景。其中，加载GIF文件，并通过CSS设置为背景是一种常见的需求。通过访问生成的本地服务器地址，您将会看到一个非常简单的OpenLayers地图，其中背景设置为加载的GIF文件。希望本文对您在Vue和OpenLayers中加载GIF文件并采用CSS设置背景有所帮助！的文件夹，并把要加载的GIF文件放在该文件夹中。在Vue组件中，使用。
openlayers加载动态gif及css样式
gisdoer
06-05 4705
原文：https://stackoverflow.com/questions/43277959/can-openlayers-3-render-the-animated-marker-using-gif 1.添加html元素 &amp;lt;div id=&quot;marker&quot; title=&quot;Marker&quot; style=&quot;height:40px;width:27px;&quot;&amp;gt
220：vue+openlayers 加载动画，采用css的@keyframes方式
大剑师兰特的GIS世界
03-13 940
第220个本示例的目的是介绍演示如何在vue+openlayers中加载动画，采用css的@keyframes方式。
Openlayer animate动效优化
追逐丶的博客
01-04 2368
一、问题产生 问题产生很简单。公司要做一个需求，定位飞行功能，即，点击定位，获取经纬度，一个飞行的动画，飞到目标点和层级。拿到这个需求的时候，心里想，这简单啊。直接查OpenLayer API.找到了这样的一个函数： view.animate(var_args) 于是手气刀落，敲下了这样一段代码： //获取目标定位点等函数省略 this.map.getView().animate({cente......
openlayers官网示例Flight Animation扩展——在地图上绘制飞机航线、飞机随航线飞行效果
07-18
在 OpenLayers 中使用 Flight Animation 扩展实现飞机航线绘制及飞行动画效果，通常涉及以下几个关键步骤： 1. **准备地图环境**：首先需要初始化一个 OpenLayers 地图实例，并设置合适的视图（view）和图层（如 OSM、TileLayer 等）。这为后续的动画渲染提供了基础。 2. **定义航线坐标**：通过 `LineString` 几何对象表示飞机的飞行路径。可以将一组经纬度坐标传入 `LineString` 构造函数中，然后将其添加到矢量图层上，以便在地图上显示航线。 3. **创建飞机动画逻辑**：使用 `requestAnimationFrame` 或者 OpenLayers 提供的 `beforeRender` 事件来驱动动画更新。在每一帧中，根据时间计算飞机当前位置，并更新其几何位置或旋转角度以模拟飞行效果。 4. **控制动画状态**：通过为每个动画元素（feature）设置属性（如 `flight`, `index`, `finished`）来管理动画的状态。例如，在动画结束时重置索引或将状态标记为完成，从而停止动画。 5. **优化视觉表现**：可以通过自定义样式函数来动态调整飞机图标的方向、大小、透明度等属性，使其更真实地反映飞行过程。例如，使用 `easeOut` 缓动函数平滑过渡飞机的位置变化 [^2]。 6. **整合所有功能**：将上述逻辑整合到一个完整的示例中，确保地图能够正确渲染航线，并且飞机动画能够流畅运行。 以下是一个简化的代码示例，展示如何在 OpenLayers 中实现基本的飞行动画效果： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import {bbox as bboxStrategy} from 'ol/loadingstrategy'; import {get as getProjection} from 'ol/proj'; import {getWidth, getTopLeft} from 'ol/extent'; import TileLayer from 'ol/layer/Tile'; import XYZ from 'ol/source/XYZ'; import VectorSource from 'ol/source/Vector'; import Feature from 'ol/Feature'; import LineString from 'ol.geom/LineString'; import Point from 'ol.geom/Point'; import Style from 'ol/style/Style'; import Icon from 'ol/style/Icon'; import {icon} from 'ol/icons'; // 初始化地图 const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }) ], view: new View({ center: [0, 0], zoom: 2, projection: 'EPSG:3857' }) }); // 定义航线坐标（WGS84） const flightPath = new LineString([ [116.4, 39.9], // 北京 [121.47, 31.23], // 上海 [113.26, 23.12] // 广州 ]).transform('EPSG:4326', 'EPSG:3857'); // 创建航线 feature const pathFeature = new Feature(flightPath); pathFeature.setStyle(new Style({ stroke: new Stroke({ color: '#ff0000', width: 2 }) })); // 创建矢量源并添加航线 feature const vectorSource = new VectorSource(); vectorSource.addFeature(pathFeature); // 飞机图标样式 const planeIcon = icon({ src: 'path/to/plane-icon.png', anchor: [0.5, 0.5] }); // 创建飞机 feature const planeFeature = new Feature(new Point(flightPath.getCoordinateAt(0))); planeFeature.setStyle(new Style({ image: planeIcon })); // 添加飞机 feature 到矢量源 vectorSource.addFeature(planeFeature); // 创建矢量图层 const vectorLayer = new VectorLayer({ source: vectorSource, updateWhileInteracting: true }); map.addLayer(vectorLayer); // 动画参数 let lastTime; let elapsedPoints = 0; const coords = flightPath.getCoordinates(); const duration = 10000; // 动画持续时间 ms function animatePlane(feature, coords, duration) { function movePlane(timestamp) { if (!lastTime) { lastTime = timestamp; } const elapsed = timestamp - lastTime; lastTime = timestamp; // 计算当前点 elapsedPoints += elapsed / (duration / coords.length); if (elapsedPoints >= coords.length) { feature.set("finished", true); feature.set("flight", true); elapsedPoints = 0; feature.setGeometry(new Point(coords[0])); } else { const currentCoord = coords[Math.floor(elapsedPoints)]; feature.setGeometry(new Point(currentCoord)); } // 请求下一帧 requestAnimationFrame(movePlane); } requestAnimationFrame(movePlane); } // 启动动画 animatePlane(planeFeature, coords, duration); ``` ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值