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: [113.53450137499999, 34.44104525],
projection: 'EPSG:4326',
zoom: 6
})
});

• echarts數據源設置：

var res = {
"locations": [
{
"name": "海門",
"value": 9
}, {
"name": "鄂爾多斯",
"value": 12
}, {
"name": "招遠",
"value": 12
}
……
],
"coordinates": {
"海門": [121.15, 31.89],
"鄂爾多斯": [109.781327, 39.608266],
……
}
}
var data = res.locations;
var geoCoordMap = res.coordinates;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var option = {
title: {
text: '全國主要城市空氣質量',
subtext: '',
sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
openlayers: {},
legend: {
orient: 'vertical',
y: 'top',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}]
};

• hideOnMoving=false 設置地圖移動過程當中不隱藏 echarts 效果，hideOnZooming=false 設置地圖縮放過程當中不隱藏 echarts 效果，stopEvent =false 設置不阻止echarts 事件

更多詳情見下面連接文章：

GIS之家小專欄此文章：openlayers4 入門開發系列結合 echarts4 實現散點圖(附源碼下載)

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