vue 在图片上点击标注记录坐标
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需求：
- 展示右侧列表，左侧展示图片
- 点击右侧列表的某一行，根据该条内容，有坐标就展示坐标，没有就不展示
- 点击右侧列表后，可以在图片上点击，有图标，同时立即更新该位置的坐标。右击图标消失
- 点击右侧 取消选择 按钮，取消列表的选择，同时取消图片上的图标
- 每个设备只支持一个坐标。
css代码
<link rel="stylesheet" href="/static/admin/css/element-ui.css">
<style>
#myBiaoZhuDiv{
position:relative;
}
#myBiaoZhuDiv img{
border:solid 1px #000;
display:inline-block;
width: 500px;
height: 500px;
z-index: 1;
}
.marker{
position:absolute;
border-radius: 50%;
z-index: 999;
}
</style>vue代码
<div id="app">
<el-row>
<el-col :span="12">
<div class="myBiaoZhu" id="myBiaoZhuDiv">
<img
id="myBiaoZhu"
:src="parseImgUrl"
alt=""
/>
</div>
</el-col>
<el-col :span="12" style="padding:20px;text-align: center;">
<el-button @click="setCurrent()">取消选择</el-button>
<el-table
:data="tableData"
ref="singleTable"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
prop="name"
label="设备名称">
</el-table-column>
<el-table-column
prop="type"
label="类型">
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>js代码
<script src="/static/admin/js/vue.js"></script>
<script src="/static/admin/js/axios.min.js"></script>
<script src="/static/admin/js/element-ui.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
parseImgUrl:"/static/admin/images/bg.jpg",//背景图
pointImg: '',//点击展示在图片上的标注图标
pointSize: 10, //点的大小
banMa: [],
tableData:[] //右侧列表
}
},
mounted() {
document.getElementById("myBiaoZhu").oncontextmenu = e => {
if (e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault();
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}; //阻止冒泡行为和默认右键菜单事件
document.getElementById("myBiaoZhu").onmousedown = e => {
e = e || window.event;
// console.log(this.serialNumber);
// console.log(this.serialNumber.length);
// debugger;
if (this.tableData.length == 0 && this.pointImg.length > 0) {
// console.log(this.banMa.length);
// this.$refs.selectEquipment.visible = true;
// this.$refs.selectEquipment.formConfig.isShowSubmitBtn = true;
return false;
}
if (e.button !== 2) {
//判断是否右击
/*
event.screenX是屏幕左上角到鼠标当前位置的x轴距离;
event.clientX是浏览器左上角到鼠标当前位置的x轴距离;
event.setoffX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离;
*/
var x = e.offsetX || e.layerX;
var y = e.offsetY || e.layerY;
console.log(x, y);
var myImg = document.querySelector("#myBiaoZhu");
var currWidth = myImg.clientWidth;
var currHeight = myImg.clientHeight;
var ProportionWidthInImg = x / currWidth;
var ProportionHeightInImg = y / currHeight;
// console.log("图片比例高度："+ProportionHeightInImg)
// console.log("图片比例宽度："+ProportionWidthInImg)
this.banMa.push({
// id: this.banMa.length + 1,
positionLat: x,
positionLng: y,
});
this.createMarker(x, y,2);
}
}
axios({
method: 'get',
url: 'http://XXXX',
data: {}
}).then(r => {
if(r.status==200&&r.data.code==200){
this.tableData = r.data.data
}
}).catch(error => {
// handle error
}).then(() => {
// always executed
});
},
methods: {
//画点
createMarker(x, y,status) {
var div = document.createElement("div");
div.className = "marker";
div.id = "marker" + this.banMa.length;
y =
y + document.getElementById("myBiaoZhu").offsetTop - this.pointSize / 2;
x =
x +
document.getElementById("myBiaoZhu").offsetLeft -
this.pointSize / 2;
div.style.width = this.pointSize * 4.4 + "px";
div.style.height = this.pointSize * 5.8 + "px";
// div.style.backgroundColor = this.pointColor;
div.style.background = "url(" + this.pointImg + ") no-repeat";
div.style.position = "absolute";
div.style.left = x + "px";
div.style.top = y + "px";
div.oncontextmenu = e => {
//阻止冒泡行为和默认右键菜单事件，同时删除该点
var id = e.target.id;
document.getElementById("myBiaoZhuDiv").removeChild(div);
// this.banMa = this.banMa.filter(
// item => item.id != id.slice(6, id.length)
// );
this.banMa = [];
this.banMa.push({ regionId: this.regionId });
// this.unbunding(); // 解绑接口 用不到删除即可
if (e && e.preventDefault) {
//阻止默认浏览器动作(W3C)
e.preventDefault();
} else {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
};
document.getElementById("myBiaoZhuDiv").appendChild(div);
if(status == 2){
this.submitEqArr(x,y); // 提交接口 不需要就删除
}
},
submitEqArr(x,y){
console.log(this.currentRow)
axios({
method: 'post',
url: 'http://XXXX',
data: {
x:x,
y:y,
}
}).then(r => {
this.$message({
message:r.status == 200&&r.data.code == 200 ? '保存成功' : '保存失败',
type: r.status == 200&&r.data.code == 200 ? 'success' : 'warning'
});
}).catch(error => {
// handle error
}).then(() => {
// always executed
});
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
let div = document.getElementById('marker0')
if(div&&div!=null){
document.getElementById('myBiaoZhuDiv').removeChild(div)
}
},
handleCurrentChange(val) {
//点击列表时 清空图片上的图标
if(val){
this.currentRow = val;
let div = document.getElementById('marker0')
if(div&&div!=null){
document.getElementById('myBiaoZhuDiv').removeChild(div)
}
let {type,coordinate_information}=val
this.banMa = []
//根据需求不同类型 如：摄像头，监控 等展示不同的图标
if(type==1){
this.pointImg = '/static/admin/images/sxt.png'
}
if(type==2){
this.pointImg = '/static/admin/images/dp.png'
}
if(type==3){
this.pointImg = '/static/admin/images/dt.png'
}
//如果右侧列表的某条数据内 有图标 那就展示，否则就不展示图标
if(coordinate_information&&JSON.stringify(coordinate_information).length>0){
this.createMarker(coordinate_information.x,coordinate_information.y,1)
}
}
}
}
})
</script>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)