openlayers入门开发系列之船讯篇

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

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();
    }

    //监听文本改变方法
    $SelectPicker.$searchbox.off("input propertychange").on("input propertychange", function () {
        var val = $(this).val();
        bxmap.AIS.search(val, function (data) {
            var html = '';
            if(data && data.length){
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    html += '<option value="'+ item[1] +'">' + item[0] + '</option>'
                }
            }else {
                html = '<option>请输入船名、呼号、IMO或MMSI</option>';
            }
            $selectElem.html(html);
            $SelectPicker.reloadLi();
        });
    });
    //监听弹出查询框
    $selectElem.on('show.bs.select', function () {
        resetPlugin();
    });
    //解决点击第一个项时不触发changed.bs.select的问题
    $SelectPicker.$menuInner.on('click', 'li a', function (e) {
        var clickedIndex = $(this).parent().data('originalIndex');
        if (clickedIndex == 0) {
            $selectElem.trigger('changed.bs.select', [0]);
        }
    });
    //查询条件改变
    $selectElem.on('changed.bs.select', function (evt, index) {
        var shipid = evt.target.options[index].value;
        if(shipid == "请输入船名、呼号、IMO或MMSI") return;

        //重置选项
        resetPlugin();

        bxmap.AIS.getShipPositionById(shipid, function(infos){
            
            if(infos.length==0) return;

            //地图跳转
            var info = infos[0];
            var lon = Number(info[1]);
            var lat = Number(info[2]);
            var center = [lon, lat];
            if(self.isProjected){
                center = ol.proj.fromLonLat(center);//经纬度转为EPSG3857
            }

            var view = self.bmap.getMap().getView();
            view.setCenter(center);
            view.setResolution(80);
            //延迟
            setTimeout(function(){
                if(self.shipLayer){
                    var source = self.shipLayer.getSource();
                    var feature = source.getFeatureById(shipid);
                    if(!feature){
                        var item = info;
                        var record = {
                            shipName: item[0],
                            lon: item[1],
                            lat: item[2],
                            csx: item[3], //船首向 heading
                            cjx: item[20], //船迹向 cog
                            nav: item[21],//
                            mmsi: item[6],
                            shipType: item[8], //船类型代码
                            length: item[9], //船长
                            beam: item[10], //
                            utc: item[12], //更新时间
                            source: item[13],
                            destination: item[15],
                            speed: item[14], //船速 sog
                            shipid: item[19] //船id
                        };
                        feature = self._createOrUpdateFeature(record);
                    }

                    //取消临时高亮
                    if(self._shipInfoFeature){
                        self.setUnhighlight(self._shipInfoFeature);
                    }
                    self.select(feature);
                    //设置当前弹框信息要素
                    self._shipInfoFeature = feature;
                }
            },300);
        });
    });
}

• 轨迹查询效果图

image image

• 船讯轨迹核心代码

//查询按钮
$("#searchTrack").on("click",function() {
        self.dialog && self.dialog.height(480);
        var startTime = $("#start").val();
        var endTime = $("#end").val();
        $("#msginfo_div").css({"display": "block"});
        $("#msginfo_cont").html("正在查询数据,请稍后……");
        if(searchTarget == targets.trail){
            bxmap.AIS.getShipTrackPath(shipId, startTime, endTime, function (data) {
                if (data.length > 0) {
                    $("#msginfo_cont").html("查询成功");
                    //缩放至轨迹线
                    self._zoomToTrail(data);
                    //重绘轨迹图层
                    self._redrawTrailLine(data);
                    //设置轨迹查询状态
                    self.dialogState = 2;
                    self._handleDialogState();
                } else {
                    $("#msginfo_cont").html("暂无数据");
                }
            });
        }else if(searchTarget == targets.port){
            bxmap.AIS.getShipTrackPort(shipId, startTime, endTime, function (data) {
                if (data.length > 0) {
                    $("#msginfo_div").css({"display": "none"});
                    $("#ais_route_port").css({"display": "block"});
                    self.dialog && self.dialog.height(715);
                    var html = self._getTrackPortHtml(data);
                    $("#ais_route_port_content tbody").html(html);
                    $("#ais_route_port_content").mCustomScrollbar({
                        theme: "minimal-dark"
                    });
                } else {
                    $("#msginfo_cont").html("暂无数据");
                    self.dialog && self.dialog.height(480);
                    $("#ais_route_port_content tbody").html("");
                    $("#ais_route_port").css({"display": "none"});
                }
            });
        }
});
/**
 * @description 异步获取船舶历经港口
 * @param shipid
 * @param begindate
 * @param enddate
 * @param callback {function(data)}
 */
bxmap.AIS.getShipTrackPort = function(shipid, begindate, enddate, callback) {
    $.ajax({
        url:GLOBAL.domainRest + "/ais/getRoutePort",
        type: 'post',
        data:{
            shipid:shipid,
            begindate:begindate,
            enddate:enddate
        },
        async: true,//异步
        dataType: 'json',
        success: function (data) {
            if(data.code == 200){
                var Adata = eval(data.obj);
                callback && callback(Adata);
            }
        }
    });
}

GIS之家作品：GIS之家
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询