前言
openlayers4 官網(wǎng)的 api 文檔介紹地址 openlayers4 api坐昙，里面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網(wǎng)在線例子疾棵，這個也是學(xué)習 openlayers4 的好素材痹仙。
openlayers4 入門開發(fā)系列的地圖服務(wù)基于 Geoserver 發(fā)布的蝶溶，關(guān)于 Geoserver 方面操作的博客，可以參考以下幾篇文章：
內(nèi)容概覽
1.基于 openlayers4 實現(xiàn)地圖遷徙圖
2.源代碼 demo 下載
本篇的重點內(nèi)容是利用 openlayers4 實現(xiàn)遷徙圖功能，效果圖如下：
image
實現(xiàn)思路
- 遷徙圖界面設(shè)計
//遷徙圖
"<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();
}
})
- 遷徙圖模擬數(shù)據(jù)源
var move_option = {
color: ["gold","aqua","lime"],
tooltip : {
trigger: "item",
formatter: ""
},
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:"南湖區(qū)"},{name:"嘉善縣"}],
[{name:"秀洲區(qū)"},{name:"嘉善縣"}],
[{name:"海鹽縣"},{name:"嘉善縣"}],
[{name:"平湖市"},{name:"嘉善縣"}],
[{name:"嘉善縣"},{name:"嘉善縣"}]
],
},
geoCoord: {
"海寧市": [120.492, 30.4186],
"南湖區(qū)": [120.84, 30.8224],
"秀洲區(qū)": [120.805, 30.9241],
"海鹽縣": [121.043, 30.7042],
"平湖市": [120.835, 30.529],
"桐鄉(xiāng)市": [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:"南湖區(qū)"}, {name:"嘉善縣"}],
[{name:"秀洲區(qū)"}, {name:"嘉善縣"}],
[{name:"海鹽縣"}, {name:"嘉善縣"}],
[{name:"平湖市"}, {name:"嘉善縣"}],
[{name:"海寧市"}, {name:"嘉善縣"}],
[{name:"桐鄉(xiāng)市"}, {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:"南湖區(qū)",value:60},
{name:"秀洲區(qū)",value:95},
{name:"海鹽縣",value:120},
{name:"平湖市",value:105},
{name:"桐鄉(xiāng)市",value:70}
]
}
}
]
};
- 遷徙圖初始化以及核心代碼實現(xiàn)
var bxmap = bxmap || {};
bxmap.olEchartsLayer = {
map:null,
isLoad:false,
olMapExt:null,
Init:function(bmap){
this.map = bmap.getMap();
this.isLoad = true;
//加載移動流向圖效果
this.loadEchartsLayer();
},
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載弦悉，對本專欄感興趣的話稽莉，可以關(guān)注一波
