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

VUE+OpenLayer动态显示船舶位置信息相关推荐

vue定位获取用户位置信息
关于定位功能尝试了很多种方法,h5定位,百度地图定位,高德地图定位,因为ip定位只能定位到城市,所以我选用的是浏览器定位.总结如下: H5定位:定位相对较准,但是部分浏览器不兼容,我主要是在手机上测试 ...
Vue获取当前的位置信息、经纬度
通过navigator.geolocation对象中的getCurrentPosition() 函数获取用户当前定位位置.这会异步地请求获取用户位置,并查询定位硬件来获取最新信息.当定位被确定后,定义 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue定位---获取当前位置的详细信息
vue如何获取当前位置的详细信息,总共分为5步. 1.在build文件夹下webpack.base.conf.js文件里面的module.exports中添加如下代码: externals: {'BM ...
vue使用高德api 定位获取位置信息 positionLocation.js及 USERKEY_PLAT_NOMATCH报错
前提假设你已经申请好了高德api 及对应的高德api业务,申请高德api 配置相关步骤不在这里敷述,自行百度相关博文配置: build/webpack.base.conf.js 要配置 co ...
Vue iview 动态显示表头信息
Vue iview 动态显示表头信息遇到问题固定表头表示动态表头表示遇到问题大部分遇到的表头都是固定的,但如果要求后端给你什么表头信息你就显示什么呢?接下来告诉你方法!!! 固定表头表示一 ...
vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
物联网-位置信息、定位技术与位置服务
位置信息与位置服务位置信息-从互联网到物联网位置信息在物联网中的作用位置信息是各种物联网应用系统能够实现服务功能的基础位置信息涵盖了空间.时间与对象三要素通过定位技术获取位置信息是物联网应用 ...
vue+openlayer实现选房平面图
vue+openlayer实现选房平面图前言代码详解地图背景展示图层渲染根据GeoJSON获取图层获取样式 map添加vectorlayer map添加选中交互事件,并添加选中后的样式效 ...
arcgis api 动态显示鼠标位置经纬度
动态显示鼠标位置经纬度,主要是监听鼠标移动事件 "mouse-move",获取经纬度信息,在当前鼠标位置用文本标注出来即可.添加了个监听鼠标点击事件 "mouse-dow ...

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

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

VUE+OpenLayer动态显示船舶位置信息相关推荐

最新文章

热门文章