国产精品国三级国产av,a级毛片免费看在线看

OpenLayers 6 實(shí)現(xiàn)仿Echarts風(fēng)格的動(dòng)態(tài)遷徙圖/航班圖

這是一個(gè)做完很久的demo，主要還是為了擺脫echarts那種“圖層脫線”的問(wèn)題，提升可視化渲染性能。

使用的數(shù)據(jù)還是來(lái)自echarts，模擬了全國(guó)各地到湖南重點(diǎn)景區(qū)的客流情況。
在這里插入圖片描述

分析

要實(shí)現(xiàn)動(dòng)態(tài)遷徙圖的效果，主要需解決兩個(gè)問(wèn)題

曲線的繪制。因?yàn)榻o出的數(shù)據(jù)只有起點(diǎn)和終點(diǎn)兩個(gè)點(diǎn)位，所以想要繪制曲線可以參考turf中的bezier曲線生成API。
點(diǎn)跡的動(dòng)畫播放。仍然要依靠render機(jī)制，這里我還是使用比較熟悉的postrender事件回調(diào)函數(shù)。

實(shí)現(xiàn)

首先利用turf做一個(gè)利用兩個(gè)點(diǎn)就可以生成弧線要素的函數(shù)，其實(shí)這里面調(diào)用的是turf的bezierSpline，寫死了一個(gè)定比例取到的點(diǎn)位，參數(shù)列表為要素的自定義屬性留了位置。同時(shí)在函數(shù)里計(jì)算出曲線的長(zhǎng)度待用。

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;
}

然后重點(diǎn)分析一下點(diǎn)位動(dòng)畫的實(shí)現(xiàn)：

先寫出監(jiān)聽(tīng)postrender事件回調(diào)函數(shù)的基本框架，并取得VectorContex對(duì)象的句柄：

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

再寫出遍歷所有曲線的forEach結(jié)構(gòu)及回調(diào)函數(shù)，回調(diào)函數(shù)內(nèi)先將本次迭代的曲線繪制到地圖上：

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

然后通過(guò)frameState獲取當(dāng)前幀的時(shí)間戳，計(jì)算得到當(dāng)前幀運(yùn)動(dòng)點(diǎn)位的位置百分比，如果百分比超過(guò)100%還要進(jìn)行歸零處理

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;
    }
    
  })
 
})

最后根據(jù)位置百分比，使用getCoordinateAt求得點(diǎn)位的坐標(biāo)，并且使用VectorContex對(duì)象繪制到canvas上，然后顯示調(diào)用render()函數(shù)，請(qǐng)求渲染下一幀。

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開(kāi)發(fā)者Key，黑色主題地圖還請(qǐng)自己動(dòng)手做一個(gè))

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開(kāi)發(fā)者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學(xué)院都開(kāi)通了《OpenLayers實(shí)例詳解》課程，歡迎報(bào)名學(xué)習(xí)。搜索關(guān)鍵字OpenLayers就能看到。

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

其他