VUE+OpenLayer动态显示船舶位置信息

VUE+OpenLayer动态显示船舶位置信息

 

目前项目中需要使用海图来展示船舶位置信息。

特此来总结一下开发心得。使用的是openlayer组件库来实现海图的展示，底图为离线瓦片地图。

目标：实现前端定时发请求给后端，依据后端返回数据，在地图中展示物体实时坐标信息。

 <div id="map" class="map">
    mounted(){
      //在此处定义地图初始化方法
      this.initMap();
      this.getDataInfo();
    },
    created() {
     //定义定时获取数据方法
      this.refreshTab();
    },

refreshTab(){
setInterval(()=>{
this.getDataInfo()，6000;
)}


initMap(){
        this.map=new Map({
          layers:[
            new TileLayer({
            source: new XYZ({
              url: 'http://IP:PORT/{z}/{x}/{y}.png',
              tileSize:256
            })
            })
          ],
          target: "map",
          controls:defaults({zoom:true}),
          view: new View({
            center: [119,35],
            projection: 'EPSG:4326',
            zoom: 6,
            minZoom:1,
            maxZoom:16
          })
        })

//addControl增加地图控件展示
        let fullScreenControl = new FullScreen();
        this.map.addControl(fullScreenControl)
        let scaleLineControl = new ScaleLine();
        this.map.addControl(scaleLineControl)
        this.map.addControl(new ZoomSlider())

获取后端数据，判断坐标物是否已存在，存在则更新位置信息、无需新增图层（首次为新增图层。）

getDataInfo(){
getBackInterface().then(
response=>{
for(let i=0;i<response.length;i++)
var shipLocationLayer = _that.AisLayerArray[response[i].name]；
if(shipLocationLayer ){
let ft = shipLocationLayer .getSource().getFeatureById(response[i].name]);
ft.setGeometry(new Point(x,y);
ft.setStyle();
//利用此方法更新位置信息
ft.changed();
}else{
//新建图层 VectorLayer
 shipLocationLayer  = new VectorLayer({
source: new VectorSoure()})
let feature = new Feature({
geometry: new Point();
})
//新增Feature、设置Feature样式、主键
feature .setStyle();
feature .setId();
//Layer.getSource().addFeature
shipLocationLayer.getSource.addFeature(feature );
//地图map新增图层
map.addLayer(shipLocationLayer)
_that.AisLayerArray[response[i].name]=shipLocationLayer
})
}