赞
踩
这是一个做完很久的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()
- })
完整代码
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。