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{
//新建图层 VectorLayershipLocationLayer  = 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
})
}