openlayer 利用overlay实现动画效果

思路:分割线段后 利用定时器控制gif图片的位置import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import {LineString} from 'ol/geom.js';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Point from 'ol/geom/Point';
/*** 直升机取水* coord : 起点* targetCoord : 终点* */
export function showQuShui(map,coord,targetCoord){targetCoord =  targetCoord || [115.83137799360136, 40.43483229118801];//创建直升机divlet div = document.createElement("div");div.className = "mhzsj";let span = document.createElement("span");span.className = "mhzsj-title";span.innerHTML = "灭火直升机"div.appendChild(span);let mhzsjOverLay = new Overlay({className : "mhzsj-div",element : div,insertFirst : false,stopEvent : false,positioning: 'center-center'});div.onclick = function(){console.log("点击灭火取水直升机")}map.addOverlay(mhzsjOverLay);let zjsPath = new Feature({geometry:new LineString([coord,targetCoord],"XY")});let distance = zjsPath.getGeometry().getLength();let pathCoords = [];for(let i= 0; i< distance; i+= 0.0001){let  c =zjsPath.getGeometry().getCoordinateAt(i/distance);pathCoords.push(c);}mhzsjOverLay.setPosition(pathCoords[0]);let length = pathCoords.length;let idx = 0;//直升机状态 1：前往取水途中 2：取水中  3：返程  4：放水灭火中let zStatus = 1;let timer = setInterval(()=>{quShuiTimer();},1000/60);function quShuiTimer(){mhzsjOverLay.setPosition(pathCoords[idx]);if(zStatus === 1){idx ++ ;if(idx === length){zStatus = 2;//终点取水中span.innerHTML = "取水中";clearInterval(timer);setTimeout(()=>{zStatus = 3;//取水完毕 返程span.innerHTML = "灭火直升机";timer =  setInterval(()=>{quShuiTimer();},1000/60)},3000)}}else if(zStatus === 3){idx --;if(idx === 0){zStatus = 4;//起点灭火中span.innerHTML = "灭火中";clearInterval(timer);setTimeout(()=>{zStatus = 1;//洒水完毕 继续取水span.innerHTML = "灭火直升机";timer =  setInterval(()=>{quShuiTimer();},1000/60)},3000)}}}
}

openlayer 利用overlay实现动画效果相关推荐

Android利用SVG实现动画效果
系列文章目录 Android利用SVG实现动画效果老规矩,文中/文末会放置源码文章目录系列文章目录前言一.先看看Android中一个简单的SVG图二.pathdata中参数的定义(三角形是 ...
如何在html网页中利用css实现动画效果
animation动画 1.@keyframes 定义关键帧动画以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 1 ...
android联动动画,利用 CollapsingToolbarLayout 完成联动的动画效果
最近项目中需要实现个动画效果,研究了下这里做下简单的分享. 效果图如下: 示例.gif 最初的想法是自己去利用 Android 的嵌套滚动机制,去实现上面的嵌套滚动效果.但最后为了开发效率直接利用了 ...
android动画效果 translate,Android利用translate、scale、alpha、rotate实现动画效果
Android利用translate.scale.alpha.rotate实现动画效果在Android中可以用animation实现动画效果,Android中的animation由四种类型组成: a ...
我的Android进阶之旅------Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细一.准备工作需要准备一部带有温度传感器的安卓手机,或者使用有温度传感器的模拟器. 二.程序实现 1.需要截图程序结构 2.实现思 ...
html的动画效果实现无限轮播,利用 CSS3 实现的无缝轮播功能代码
无缝轮播的原理图 1 . html的架构 : JavaScript: /*轮播图*/ function banner() { var banner = document.querySelector(' ...
android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
Visual C# 2005 - 利用程序代码制作简单动画效果
一般的 Windows Form 通常是运用各种控件来显示数据,然而如果您希望在窗体中加入特殊效果来凸显数据内容,那么图形与动画将是非常不错的选择. 一般来说,我们会使用 .Net Framework ...

openlayer 利用overlay实现动画效果

openlayer 利用overlay实现动画效果相关推荐

最新文章

热门文章