越学习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 // 映射到地