openlayers 坐标,openlayer vue
这篇文章主要为大家详细介绍了某视频剪辑软件开放层实现实时坐标点展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件开放层实现实时坐标点展示的具体代码，供大家参考，具体内容如下
直接上代码
！-
* @描述：实时坐标点
* @作者：龙
* @日期：2020-12-18 10:08:40
* @ LastEditTime:2020-12-18 15:59:29
* @LastEditors:龙
-
模板
div id=map/div
/模板
脚本
导入“ol/ol。CSS”；
从" ol "导入{地图、视图、要素};
从" ol/层"导入{图像作为图像层，矢量作为矢量层}；
从" ol/source "导入{ ImageStatic，Vector作为矢量源}；
从" ol/范围"导入{获取中心}；
从" ol/proj "导入{投影}；
从" ol/geom "导入{点}；
从" ol/style "导入{图标，样式，文本，填充，笔画}。
//从""导入{ websocket } ./mixins ；
从" @/assets/map.png "导入静态地图
从" @/assets/tx-icon-1.png "导入图片
导出默认值{
data() {
返回{
映射：空，//地图
imgx: 0，//当前地图宽
imgy: 0，//当前地图高
人员：[],//人员
功能：[],
特征：空，
vectorSource: new VectorSource()，
计时器：空
};
},
//mixins: [websocket]，
观察：{
人员(瓦尔){
if (val) {
这个。设置功能()；
}
},
},
方法：{
//初始化地图
initMap() {
设extent=[0，0，this.imgx，this。imgy]；
让投影=新投影({
范围：范围
});
让$这个=这个
//默认地图
let mapLayer=new ImageLayer({
来源：新图像静态({
url: staticMap，
投影：投影，
图像范围：范围
})
})
//绘制点
假设要素图层=新矢量图层({
来源：this.vectorSource，
});
this.map=新地图({
目标："地图",
图层：[
地图绘制者，
特征层
],
视图：新视图({
投影：投影，
中心：获取中心(范围),
缩放：2,
最大变焦：18
})
});
},
//WebSocket数据接收
//getMessage(message) {
//让RES=JSON。解析(消息。数据)；
//这个。人员=资源数据；
//},
//点
setFeature() {
让那个=这个；
那个。features=[]；
那个。矢量源。clear()；//先清除
that.persons.map((item)={
that.feature=新功能({
几何：新点([item.x，item.y])，
名称：项目名称，
});
//设置特征的样式，使用小旗子图标
that.feature.setStyle(
新样式({
图像：新图标({
锚点：[0,1],
src: img，
}),
文本：新文本({
//位置
文本对齐："居中",
//基准线
文本基线："中间",
//文字样式
字体：正常20px微软雅黑，
//文本内容
文本：项目.名称
//文本填充样式（即文字颜色)
填充：新填充({ color: #aa3300 })，
笔画：新笔画({ color: #ffcc33 ，宽度：2 }),
}),
})
);
那个. features.push(那个。特写)；
});
那个。矢量源。添加功能(即。特色)；
},
},
已安装(){
设img=new Image()；
img.src=staticMap
让那个=这个；
img.onload=function(res) {
那个。imgx=研究目标。宽度；
那个。imgy=研究目标。身高；
那个。init map()；
//那个。初始化web套接字()；
};
},
已创建(){
让那个=这个
那个。timer=setInterval(function(){
比。人员=[
{id: 1，姓名： 点-1 ，x: 497.08，y: 187.88，z: 0}，
{id: 2，姓名： 点-2 ，x: 725.32，y: 565.88，z: 0}，
{id: 3，姓名： 点-3 ，x: 643.24，y: 503.96，z: 0}
]
控制台。警告(than。人，22)
},3000)
},
销毁前(){
clearInterval(this.timer)
}
};
/脚本
风格
#地图{
宽度：100%;
高度：calc(100 VH-50px)；
}
/风格
效果图
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。