越学习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 // 映射到地图的范围
})
})
],
view: new olView({
center: getCenter(extent),
projection: projection,
zoom: 2.2,
minZoom: 1,
maxZoom: 12
}),
// 加载控件到地图容器中
// 加载鼠标位置控件
controls: defaults().extend([mousePositionControl])
});

第二步,底图建立好之后,接下来绘制人员图标,我这边和后台的数据对接方式是ws,就是后台实时推送人员的位置信息,前端渲染,这个时候很刚入学者会每个icon建立一个layer,其实不是这样的,你可以先建立一个定位图层layer,一个layer一个source就可以了,

新建定位图层

 // 创建定位图层
this.positionLayer = new ollayerVector({
source: new olsourceVector(),
style: new olstyleStyle()
})
this.map.addLayer(this.positionLayer)

然后拿到数据之后,我这边获取的数据接口是一个list,也就是一个数组,需要for循环来添加icon

list.forEach((value: any, index: number) => {
let time = new Date().getTime()
if (!that.personListCache.has(value.id)) {
// 绘制人员定位信息
let personS = that.createPerson(value)
console.log(value)
console.log(personS)
that.personListCache.set(value.id, { spriteObj: personS, lastModified: time })
} else {
let personIn = that.personListCache.get(value.id)
// console.log(personIn.spriteObj.getGeometry().getCoordinates())
// var geometry = new olgeomPoint([value.x, value.y])
// personIn.spriteObj.setGeometry(geometry)
personIn.lastModified = time
if (personIn) {
personIn.oldObj = {
x: personIn.spriteObj.getGeometry().getCoordinates()[0],
y: personIn.spriteObj.getGeometry().getCoordinates()[1]
}
personIn.newObj = {
x: value.x,
y: value.y
}
if (personIn.oldObj.x === personIn.newObj.x && personIn.oldObj.y === personIn.newObj.y) {
// that.updataPersonPos(personIn)
} else {
that.updataPersonPos(personIn)
}
}
}
})

建立一个map的原因是,后台不确定是否会新增重复的人员给我,故建立一个map对象判断是否以及绘制在底图上,如果绘制在底图上了,那么只用改变他的位置也就是xy或者说是经纬度,如果没有就去调用createPerson方法去绘制icon

createPerson(value: any) {
var startMarker = new olFeature({
type: 'person',
msg: value,
geometry: new olgeomPoint([value.x, value.y])
})
let srcImg = value.type === 'type1' ? './images/type1.png' : value.type === 'type2' ? './images/type2.png' : './images/type3.png'
var startStyle = new olstyleStyle({
image: new olstyleIcon({
anchor: [0.5, 0.5],
scale: 0.3,
src: srcImg,
imgSize: [117, 158]
}),
text: new Text({
text: value.name,
// font: '14px font-size',
padding: [4, 7, 4, 7],
fill: new Fill({ color: '#fff' }),
backgroundFill: new Fill({ color: '#3737379e' }),
offsetY: -34
})
})
startMarker.setStyle(startStyle)
this.positionLayer.getSource().addFeature(startMarker)
return startMarker
}

注意红色部分,很关键,第一次的我是直接把startStyle放到了positionLayer上,导致绘制出来的所有的icon的信息都是一样的,至于上面的三目运算大家应该知道,icon的类型不一样绘制出来的图标也是需要不一样的

好了,自定义底图上添加静态icon就完成了,

接下啦看看效果图吧,底图我随便换了一个静态图片,icon也是

索嘎,完工

openlayers在底图上添加静态icon的更多相关文章

  1. Windows 系统cmd设置添加静态路由方式

    电脑上添加静态路由,cmd设置路由 方法/步骤 1.首先在“运行”窗口输入cmd(按WIN+R打开运行窗口),然后回车进入命令行,输入 route  add  10.253.251.0  mask   ...

  2. Windows 系统PowerShell或cmd设置添加静态路由方式

    电脑上添加静态路由,PowerShell或cmd设置路由 方法/步骤1.首先以管理员身份在“运行”窗口输入cmd或PowerShell(按WIN+R打开运行窗口),然后回车进入命令行,输入 route ...

  3. Redhat、CentOS添加静态路由的标准方法

    我们经常遇到需要在系统默认路由的基础上,额外添加静态路由的需求.为了使得下次系统启动这些静态路由依旧生效,我们可能采取在rc.loal里加入route命令追加静态路由的方法. 现在给大家推荐Redha ...

  4. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  5. 关于iOS上的静态库

    最近再进行项目的真机调试,然后发现了一个天坑.就此研究了一些iOS上的静态库的使用: 首先我们是直接拿一个可以运行的项目来制作静态库的,网上大部分都是先创建静态库然后再写内容,看看我的方法. 1.把子 ...

  6. 在地图上添加POI

    使用Tangram的Marker, 可以在地图上做各种标记, 效果图: Tangram是通过Marker在地图上添加标记的,Marker分Point, Polyline和Polygon三种, 分别对应 ...

  7. django添加静态文件

    最近做了一个todolist webapp,需要稍微添加css时候又忘记django的添加方法了,查看了以前的项目才想起来,所以记录一下. 1.settings.py 将以下代码放到最下面 STATI ...

  8. Android UI ActionBar功能-在 Action Bar 上添加按钮

    在ActionBar上添加按钮实现某些功能最常见的Application的功能如:在ActionBar上添加一个搜索按钮: 首先官方文档说明:http://wear.techbrood.com/tra ...

  9. 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

随机推荐

  1. 【BZOJ3600】没有人的算术(替罪羊树+线段树)

    点此看题面 大致题意: 定义任意数对\(>0\),数对之间比大小先比第一位.后比第二位,一开始数列全为\(0\),要求你支持\(a_k=(a_x,a_y)\)和询问区间最大值所在位置两种操作. ...

  2. [LOJ 2721][UOJ 396][BZOJ 5418][NOI 2018]屠龙勇士

    [LOJ 2721][UOJ 396][BZOJ 5418][NOI 2018]屠龙勇士 题意 题面好啰嗦啊直接粘LOJ题面好了 小 D 最近在网上发现了一款小游戏.游戏的规则如下: 游戏的目标是按照 ...

  3. MySQL实战45讲学习笔记:第三十五讲

    一.本节概述 在上一篇文章中,我和你介绍了 join 语句的两种算法,分别是 Index Nested-LoopJoin(NLJ) 和 Block Nested-Loop Join(BNL). 我们发 ...

  4. 小白专场-堆中的路径-c语言实现

    目录 一.题意理解 二.堆的表示及其操作 三.主程序 更新.更全的<数据结构与算法>的更新网站,更有python.go.人工智能教学等着你:https://www.cnblogs.com/ ...

  5. python xpath图片爬取

    import requests from urllib.request import urlretrieve from lxml import etree headers = { 'User-Agen ...

  6. 【Zabbix】zabora批量部署

    zabora简化批量部署 目的:简化部署zabora,批量监控数据库的常用指标 1 数据库用户赋权 上传cre_arp_monitor.sh,并且部署用户. [root@oradb ~]# chown ...

  7. 如何保障MySQL主从复制关系的稳定性?关键词(新特性、crash-safe)

    一 前言 MySQL 主从架构已经被广泛应用,保障主从复制关系的稳定性是大家一直关注的焦点.MySQL 5.6 针对主从复制稳定性提供了新特性: slave 支持 crash-safe.该功能可以解决 ...

  8. 修改linux内核加载顺序

    修改内核启动顺序:1.查看当前系统所有的内核# awk -F\' '$1=="menuentry " {print i++ " : " $2}' /etc/gr ...

  9. Java8新特性——Optional类的使用(有效的避免空指针异常)

    OPtional类的使用 概述 到目前为止,臭名昭著的空指针异常是导致Java应用程序失败的最常见原因.以前,为了解决空指针异常,Google公司著名的Guava项目引入了Optional类,Guav ...

  10. mysql建表中auto_increment=21

    CREATE TABLE `demo` ( `id` ) NOT NULL AUTO_INCREMENT, `img` ) DEFAULT NULL COMMENT '大图', `status` ) ...