前言

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

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

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

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

image

实现思路

• 界面设计

//船讯
"<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="aisLayer" style="padding:5px;float: left;">' +
           '<input type="checkbox" name="aislayer" style="width: 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);
                    }
                }
            }
        });
    }
}

/**
 * @description 根据中心点和精度获取渔船信息
 * @param center {Array<Number>} 中心点[x,y]
 * @param resolution {Number} 地图精度
 * @param callback {function(data)} 回调方法
 */
bxmap.AIS.getShipsByResolution = function (center, resolution, callback) {
    $.ajax({
        url: GLOBAL.domainRest + "/ais/getSomeShipMess?center_x="+center[0]+"&center_y="+center[1]+"&resolution="+resolution,
        type: 'post',
        async: true,//
        dataType: 'json',
        success: function (data) {
            if (data.code == 200) {
                data = data.obj;
                var Adata = eval(data.substring(9, data.length - 1));
                callback && callback(Adata);
            }
        }
    });
}

• 船讯搜索效果图

  
  
  image
  image

• 船讯搜索核心代码

/**
 * @description 初始化查询面板，需要引入bootstrap-select.min.js
 * @param target  jquery Element
 */
bxmap.AIS.prototype.initSearchPanel = function (jq) {
    var self = this;
    var $jq = self.$searchPanel= jq;
    var html = '';
    html += '<select class="selectpicker" data-live-search="true">';
    html += '  <option>请输入船名、呼号、IMO或MMSI</option>';
    html += '</select>';
    $jq.append(html);

    var $selectElem = $jq.find("select");
    var $Plugin = $selectElem.selectpicker('refresh');
    var $SelectPicker = $Plugin.data('selectpicker');

    //重置为文本请输入船名、呼号、IMO或MMSI
    function resetPlugin(){
        $selectElem.html('<option>请输入船名、呼号、IMO或MMSI</option>');
        $selectElem.selectpicker('refresh');
        $SelectPicker.reloadLi();
    }
……

更多的详情见：GIS之家小专栏
对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式