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

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