openlayers4 入門開發系列之遷徙圖篇（附源碼下載）

前言

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

openlayers4 入門開發系列的地圖服務基於 Geoserver 發布的，關於 Geoserver 方面操作的博客，可以參考以下幾篇文章：

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

內容概覽

1.基於 openlayers4 實現地圖遷徙圖
2.源代碼 demo 下載

本篇的重點內容是利用 openlayers4 實現遷徙圖功能，效果圖如下：

實現思路

• 遷徙圖界面設計

//遷徙圖
"<div style='height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;'>" +
"<span style='margin-left:5px;font-size: 13px;color:white;'>遷徙圖</span>" +
"</div>" +
'<div id="moveEchartsLayer" style="padding:5px;float: left;">' +
'<input type="checkbox" name="moveechartslayer" id="moveechartslayer1" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
'<label style="font-weight: normal;vertical-align: middle;margin: auto;">遷徙圖</label>' +
'</div>'

• 遷徙圖點擊事件

//遷徙圖
$("#moveEchartsLayer input").bind("click", function () {
if (this.checked) {
if(!bxmap.olEchartsLayer.isLoad){
bxmap.olEchartsLayer.Init(bmap);
}else{
bxmap.olEchartsLayer.loadEchartsLayer();
}
}
else {
bxmap.olEchartsLayer.removeEchartsLayer();
}
})

• 遷徙圖模擬數據源

var move_option = {
color: ["gold","aqua","lime"],
tooltip : {
trigger: "item",
formatter: "{b}"
},
toolbox: {
show : false,
orient : "vertical",
x: "right",
y: "center",
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataRange: {
show : false,
min : 0,
max : 100,
calculable : true,
color: ["#ff3333"],
textStyle:{
color:"#fff"
}
},
series : [
{
name: "嘉善縣",
type: "map",
roam: true,
hoverable: false,
mapType: "none",
itemStyle:{
normal:{
borderColor:"rgba(100,149,237,1)",
borderWidth:0.5,
areaStyle:{
color: "#1b1b1b"
}
}
},
data:[],
markLine : {
smooth:true,
symbol: ["circle", "circle"],
symbolSize : 1,
itemStyle : {
normal: {
color:"#fff",
borderWidth:1,
borderColor:"rgba(30,144,255,0.5)"
}
},
data : [
[{name:"海寧市"},{name:"嘉善縣"}],
[{name:"南湖區"},{name:"嘉善縣"}],
[{name:"秀洲區"},{name:"嘉善縣"}],
[{name:"海鹽縣"},{name:"嘉善縣"}],
[{name:"平湖市"},{name:"嘉善縣"}],
[{name:"嘉善縣"},{name:"嘉善縣"}]
 
],
},
geoCoord: {
"海寧市": [120.492, 30.4186],
"南湖區": [120.84, 30.8224],
"秀洲區": [120.805, 30.9241],
"海鹽縣": [121.043, 30.7042],
"平湖市": [120.835, 30.529],
"桐鄉市": [120.476, 30.6122],
"嘉善縣":[120.994, 30.8826]
}
},
 
{
name: "粵港澳 Top10",
type: "map",
mapType: "none",
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: "#fff",
shadowBlur: 10
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: "solid",
shadowBlur: 10
}
}
},
data : [
[{name:"南湖區"}, {name:"嘉善縣"}],
[{name:"秀洲區"}, {name:"嘉善縣"}],
[{name:"海鹽縣"}, {name:"嘉善縣"}],
[{name:"平湖市"}, {name:"嘉善縣"}],
[{name:"海寧市"}, {name:"嘉善縣"}],
[{name:"桐鄉市"}, {name:"嘉善縣"}]
]
},
markPoint : {
symbol:"emptyCircle",
symbolSize : function (v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false},
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
},
emphasis: {
label:{position:"top"}
}
},
data : [
{name:"海寧市",value:25},
{name:"南湖區",value:60},
{name:"秀洲區",value:95},
{name:"海鹽縣",value:120},
{name:"平湖市",value:105},
{name:"桐鄉市",value:70}
 
]
}
}
 
]
};

• 遷徙圖初始化以及核心代碼實現

更多的詳情見：GIS之家小專欄

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