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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波