openlayers4 入門開發系列結合 echarts4 實現交通線流動圖

前言

openlayers4 官網的 api 文檔介紹地址 openlayers4 api，裏面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網在線例子，這個也是學習 openlayers4 的好素材。

openlayers4 入門開發系列的地圖服務基於 Geoserver 發佈的，關於 Geoserver 方面操做的博客，能夠參考如下幾篇文章：

• geoserver 安裝部署步驟
• geoserver 發佈地圖服務 WMS
• geoserver 發佈地圖服務 WMTS
• geoserver 集成以及部署 arcgis server 瓦片數據

內容概覽

1.基於 openlayers4 結合 echarts4 交通線流動圖
2.源代碼 demo 下載

效果圖以下：

• 地圖加載代碼以下：

/**
* 地圖建立初始化
*/
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})
],
view: new ol.View({
center: [116.55406673632812, 39.94828066015626],
projection: 'EPSG:4326',
zoom: 10
})
});

• echarts數據源設置：

var hStep = 300 / (rawData.length - 1);
var busLines = [].concat.apply([], rawData.map(function (busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [
prevPt[0] + pt[0],
prevPt[1] + pt[1]
];
}
prevPt = pt;
 
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
'coords': points,
'lineStyle': {
'normal': {
'color': echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
}
}
};
}));
 
var option = {
'series': [
{
'type': 'lines',
'polyline': true,
'data': busLines,
'lineStyle': {
'normal': {
'width': 0
}
},
'effect': {
'constantSpeed': 20,
'show': true,
'trailLength': 0.5,
'symbolSize': 1.5
},
'zlevel': 1
}
]
};

• hideOnMoving=false 設置地圖移動過程當中不隱藏 echarts 效果，hideOnZooming=false 設置地圖縮放過程當中不隱藏 echarts 效果，stopEvent =false 設置不阻止echarts 事件，EChartsLayer 圖層初始化代碼以下：

var echartslayer = new ol3Echarts(option, {
stopEvent: false,
hideOnMoving: false,
hideOnZooming: false,
forcedPrecomposeRerender: true,
});
echartslayer.appendTo(map)
html 頁面引用：

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波