OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图

这是一个做完很久的demo，主要还是为了摆脱echarts那种“图层脱线”的问题，提升可视化渲染性能。

使用的数据还是来自echarts，模拟了全国各地到湖南重点景区的客流情况。

分析

要实现动态迁徙图的效果，主要需解决两个问题

曲线的绘制。因为给出的数据只有起点和终点两个点位，所以想要绘制曲线可以参考turf中的bezier曲线生成API。
点迹的动画播放。仍然要依靠render机制，这里我还是使用比较熟悉的postrender事件回调函数。

实现

首先利用turf做一个利用两个点就可以生成弧线要素的函数，其实这里面调用的是turf的bezierSpline，写死了一个定比例取到的点位，参数列表为要素的自定义属性留了位置。同时在函数里计算出曲线的长度待用。

function getTurfArcFeature(start, end, opt) {var line = turf.lineString([start,[start[0] + (end[0] - start[0]) * 0.5,start[1] + (end[1] - start[1]) * 0.65],end]);var curved = turf.bezierSpline(line);let length = turf.length(curved, { units: 'meters' });var bF = turfFormat.readFeature(curved);bF.getGeometry().transform('EPSG:4326', 'EPSG:3857');bF.setProperties(opt);bF.set("length", length);return bF;
}

然后重点分析一下点位动画的实现：

先写出监听postrender事件回调函数的基本框架，并取得VectorContex对象的句柄：

tileLayer.on('postrender', (evt) => {let veContext = getVectorContext(evt);})

再写出遍历所有曲线的forEach结构及回调函数，回调函数内先将本次迭代的曲线绘制到地图上：

tileLayer.on('postrender', (evt) => {let veContext = getVectorContext(evt);arcLinesFeature.forEach((item,index) => {veContext.drawFeature(item, arcStyle);})})

然后通过frameState获取当前帧的时间戳，计算得到当前帧运动点位的位置百分比，如果百分比超过100%还要进行归零处理

tileLayer.on('postrender', (evt) => {let veContext = getVectorContext(evt);arcLinesFeature.forEach((item,index) => {veContext.drawFeature(item, arcStyle);let time = (evt.frameState.time - item.get('start')) / 1000;let frac = time / 5-index/arcLinesFeature.length;if (!item.get('start')) item.set('start', new Date().getTime());if (frac>=1) {item.set('start', new Date().getTime());frac=0;}})})

最后根据位置百分比，使用getCoordinateAt求得点位的坐标，并且使用VectorContex对象绘制到canvas上，然后显示调用render()函数，请求渲染下一帧。

tileLayer.on('postrender', (evt) => {let veContext = getVectorContext(evt);arcLinesFeature.forEach((item,index) => {veContext.drawFeature(item, arcStyle);let time = (evt.frameState.time - item.get('start')) / 1000;let frac = time / 5-index/arcLinesFeature.length;if (!item.get('start')) item.set('start', new Date().getTime());if (frac>=1) {item.set('start', new Date().getTime());frac=0;}let along = item.getGeometry().getCoordinateAt(frac);let pF=new Feature(new Point(along));veContext.drawFeature(pF, dotStyle);})map.render()
})

完整代码

(删掉了我自己的Google开发者Key，黑色主题地图还请自己动手做一个)

import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import * as turf from '@turf/turf'
import GeoJSON from 'ol/format/GeoJSON'
import { getVectorContext } from 'ol/render';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import CircleStyle from 'ol/style/Circle';
import data from './data/t.json'let tileLayer = new TileLayer({source: new XYZ({url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i451159038!3m14!2szh-CN!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5oOiNmZjFhMDB8cC5pbDp0cnVlfHAuczotMTAwfHAubDozM3xwLmc6MC41LHMudDo2fHMuZTpnfHAuYzojZmYyRDMzM0M!4e0&key=<这里是我自己的google开发者key>&token=126219'})
})
let map = new Map({target: 'map',layers: [tileLayer],view: new View({center: [11936406.337013, 3786384.633134],zoom: 5})
});var flightSource = new VectorSource()
var flightLayer = new VectorLayer({source: flightSource}
)
var turfFormat = new GeoJSON();function getTurfArcFeature(start, end, opt) {var line = turf.lineString([start,[start[0] + (end[0] - start[0]) * 0.5,start[1] + (end[1] - start[1]) * 0.65],end]);var curved = turf.bezierSpline(line);let length = turf.length(curved, { units: 'meters' });var bF = turfFormat.readFeature(curved);bF.getGeometry().transform('EPSG:4326', 'EPSG:3857');bF.setProperties(opt);bF.set("length", length);return bF;
}map.addLayer(flightLayer)var arcStyle = new Style({stroke: new Stroke({color: [0, 122, 122, 0.7],width: 1})
})var dotStyle = new Style({image: new CircleStyle({fill: new Fill({color: [255, 255, 255,0.7]}),radius: 1})
})var arcLinesFeature = [];
data.moveLines.forEach((item, index) => {let tempF = getTurfArcFeature(item.coords[0], item.coords[1], { 'from': item.fromName, 'to': item.toName });arcLinesFeature.push(tempF);
})tileLayer.on('postrender', (evt) => {let veContext = getVectorContext(evt);arcLinesFeature.forEach((item,index) => {veContext.drawFeature(item, arcStyle);let time = (evt.frameState.time - item.get('start')) / 1000;let frac = time / 5-index/arcLinesFeature.length;if (!item.get('start')) item.set('start', new Date().getTime());if (frac>=1) {item.set('start', new Date().getTime());frac=0;}let along = item.getGeometry().getCoordinateAt(frac);let pF=new Feature(new Point(along));veContext.drawFeature(pF, dotStyle);})map.render()
})

我在企鹅家的课堂和CSDN学院都开通了《OpenLayers实例详解》课程，欢迎报名学习。搜索关键字OpenLayers就能看到。

OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图相关推荐

echarts symbol 回调函数_【OpenLayer 实战】实现仿Echarts风格的动态迁徙图/航班图
使用的数据还是来自echarts,模拟了全国各地到湖南重点景区的客流情况. 分析要实现动态迁徙图的效果,主要需解决两个问题曲线的绘制.因为给出的数据只有起点和终点两个点位,所以想要绘制曲线 ...
来自法国的山寨苹果系统——梨子系统PearOS，精美仿苹果风格的免费Linux操作系统(颇有iOS和OSX的神...
我们都知道苹果 OS X 和 iOS 操作系统的设计都非常讨好人,但基本上只能购买 MacBook 或 iPhone.iPad 等设备才能体验它们.不过,今天被我发现了一款可以在PC上安装的精美仿苹果 ...
spring data jpa封装specification实现简单风格的动态查询
github:https://github.com/peterowang/spring-data-jpa-demo 单一实体的动态查询: @Servicepublic class AdvancedUs ...
【荐】JS实现类似星球仿flash效果的动态菜单
代码简介:推荐朋友们看看,非常值得,JS类似flash,又有点星空的感觉. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
仿微信朋友圈动态列表
仿微信朋友圈动态列表,如下图: Demo下载
js仿苹果风格弹出框alert插件
下载地址 js仿苹果风格弹出框alert插件,多种调用方式. dd:
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
ECharts绘制图例动态变化的柱状图
ECharts绘制图例动态变化的柱状图或许想要柱状图实现下面这样的效果?

OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图

分析

实现

完整代码

OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图相关推荐

最新文章

热门文章