openlayers 地图上加图标_openlayers在底图上添加静态icon

本文介绍了如何使用OpenLayers在室内CAD场景中添加人员图标,并实时显示其位置信息。首先创建底图,然后通过WebSocket接收并处理人员位置数据,利用Vector Layer和Icon Style动态绘制不同类型的图标。通过Map对象避免重复绘制,实现图标的位置更新。
摘要由CSDN通过智能技术生成

越学习openlayer你会发现openlayer是真的很强大,今天记录一下学习的成果,需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息,以及点击弹出对应人员的一些位置信息,姓名,电话等等,这个在工业互联网中是很常见的,接下来就开始操作了

由于我是在vue+ts中写的,所以下面的代码片段可能是基于vue来写的

第一步,我们需要建立一个底图,这个底图可以是谷歌地图也可以是我们拿到的cad渲染出来的静态底图

let extent = [pointer.x, pointer.y, pointer2.x, pointer2.y]; // 图片图层四至

// pointer pointer2分别是静态图片左下角和右上角的基于基站的坐标

console.log(extent)

let projection = new olprojProjection({

code: "xkcd-image",

units: "pixels",

extent: extent

});

this.map = new olMap({

target: DOM接点的ID,

layers: [

new ollayerImage({

source: new olsourceImageStatic({

url: 静态图片的地址, // 静态地图,如果是本地的,在vuecli3中将图片放在public里

projection: projection,

imageExtent: extent // 映射到地

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值