openlayers4 入门开发系列之船讯篇

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

本篇的重点内容是利用 openlayers4 实现船讯功能，效果图如下：

实现思路

• 界面设计

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

• 点击事件

//船讯
$("#aisLayer input").bind("click", function () {
if (this.checked) {
ais = new bxmap.AIS({
bmap: bmap
});
ais.initSearchPanel($("#map-search-box-panel"));
ais.refresh();
var map = bmap.getMap();
map.getView().setCenter([12867513.634164134, 2589684.2523000734]);
map.getView().setZoom(10);
//图例面板显示
$("#map_tl").css("display","block");
$("#map_tl>img").attr('src', GLOBAL.domainResource+"/Content/img/AISLegend.png");
$("#map_tl>img").css("width","auto");
$("#map_tl>img").css("height","300px");
}
else {
ais.clear();
//图例面板隐藏
$("#map_tl").hide();
}
})

• 地图范围显示船讯核心代码

/**
* @description 刷新船舶位置
*/
bxmap.AIS.prototype.refresh = function () {
var view = this.bmap.getMap().getView();
var resolution = view.getResolution();
//不满足显示渔船的条件
if(resolution > this.displayResolution) {
this.shipLayer && this.shipLayer.setVisible(false);
return;
}
 
if(this.shipLayer){
//显示图层
this.shipLayer.setVisible(true);
 
var center = view.getCenter();
//如果投影坐标系则转为EPSG:4326
if(this.isProjected) {
center = ol.proj.toLonLat(center);
}
 
//获取船舶信息并添加到地图
var self = this;
bxmap.AIS.getShipsByResolution(center, resolution, function (data) {
if (data && data.length) {
//更新船舶
self._updateFeatureToMap(data);
//上次点击选中
if(self._shipInfoFeature){
//设置要素高亮样式
self.setHighlight(self._shipInfoFeature, true);
var info = self._shipInfoFeature["shipInfoData"];
if(this.showDefaultDialog){
this._showInfoDialog(info.shipid, info.source);
}
}
}
});
}
}

更多的详情见：GIS之家小专栏

对本专栏感兴趣的话，可以关注一波