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 option = {
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎'],
textStyle:{
color: ['#FFFFFF']
}
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//柱狀圖數據源
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(0, 0, 0, 0.5)'
},
label: {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false},
magicType: {show: false, type: ['line', 'bar']},
restore: {show: false},
saveAsImage: {show: false}
}
},
legend: {
data:['蒸發量','降水量','平均溫度'],
textStyle:{
color: ['#FFFFFF']
}
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//這裏是爲了突出顯示加上的
}
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//這裏是爲了突出顯示加上的
}
}
},
{
type: 'value',
name: '溫度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//這裏是爲了突出顯示加上的
}
}
}
],
series: [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均溫度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};

• 統計圖初始化加載：

//餅狀圖加載
var dom = document.getElementById("popupPie");
var pos = ol.proj.fromLonLat([113.53450137499999, 34.44104525],'EPSG:4326');
var popupPie = new ol.Overlay({
position: pos,
element: dom
});
map.addOverlay(popupPie);
var myChart = echarts.init(dom);
myChart.setOption(option);
 
//柱狀圖加載
var dom = document.getElementById("popupBar");
var pos = ol.proj.fromLonLat([112.5245, 28.4211],'EPSG:4326');
var popupBar = new ol.Overlay({
position: pos,
element: dom
});
map.addOverlay(popupBar);
var myChart = echarts.init(dom);
myChart.setOption(option);

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

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