頁面大概如下：
組件使用的是layui的layer.open彈框，
左邊是表單資訊，右邊是繪圖區域，
原檔案mapForm.vue
<template>
<div >
<div >
<el-form ref="form" :model="form" :rules="rules" label-width="160px">
<el-form-item label="地圖名稱" prop="mapName">
<el-input v-model="form.mapName" size="mini" clearable ></el-input>
</el-form-item>
<el-form-item label="地圖描述" prop="remarks">
<el-input type="textarea" v-model="form.remarks" size="mini" clearable ></el-input>
</el-form-item>
<el-form-item label="點位資訊" prop="" v-if="mapList.length > 0">
<div >
<div v-for="(map,key) in mapList" :key="key">
<div ><span>點位坐標{{key+1}}：{{map.abscissa}}-{{map.ordinate}}</span></div>
<el-select v-model="mapList[key]['point']" placeholder="請選擇" @change="changePoint">
<el-option v-for="(item, key) in pointList" :key="key" :label="item.name" :value="https://www.cnblogs.com/shuangzikun/p/item.point">
</el-option>
</el-select>
</div>
</div>
</el-form-item>
<div >
<el-button @click="checkParams" type="primary">提交</el-button>
</div>
</el-form>
</div>
<div id="">
<div id="imgDiv" v-loading="loadStage">
<img :src="https://www.cnblogs.com/shuangzikun/p/fileSrc" width="1100" height="720" id="imgPainter" />
<div v-for="(item, key) in mapList" :key="key" :style="{top: item.ordinate+'px', 'left': item.abscissa+'px'}" @contextmenu.prevent="clearMarker(key)">
{{key+1}}
<div >{{item.point}}</div>
</div>
</div>
<div >
<el-upload ref="upload" action="" :on-change="handleChange" :show-file-list="false" :auto-upload="false" style="display:inline-block;">
<el-button slot="trigger" size="mini" type="primary">選取檔案</el-button>
</el-upload>
<el-button @click="clearPic" type="danger">清除所有點位</el-button>
</div>
<div ><i ></i>顯示大小為1100px*720px</div>
<div ><i ></i>圖片框內滑鼠左鍵標點</div>
<div ><i ></i>圖片框內滑鼠右鍵已經標注的點洗掉該點</div>
</div>
</div>
</template>
<script>
export default {
name: 'mapFormComponent',
data() {
return {
form: {
mapName: "",
},
rules: {
mapName: [
{ required: true, message: "請輸入地圖名稱", trigger: "blur" },
],
},
fileList: [],
fileSrc: '',
pointList: [
{ name: "排放口1", point: "@FQ01" },
{ name: "排放口2", point: "@FQ02" },
],
mapList: [], //斑馬線的陣列
canBiaoZhu: true, //是否可以進行標注
pointColor: 'red', //點的顏色
pointSize: 20, //點的大小
pointSelectList: {},
notifyId: {},
loadStage: false,
};
},
created() { },
mounted() {
// 繪點區域事件系結
let _this = this;
if (document.getElementById('imgPainter')) {
document.getElementById('imgPainter').onmousedown = (e) => {
e = e || window.event
if (e.button !== 2) { //判斷是否右擊
if (this.canBiaoZhu && this.fileSrc != '') { //判斷是否可以進行標注 需上傳圖片
var x = e.offsetX || e.layerX
var y = e.offsetY || e.layerY
this.mapList.push({
id: this.mapList.length + 1,
name: '',
abscissa: x,
ordinate: y,
})
// 設定變數
// this.pointSelectList.$set(0);
let key = `point`;
_this.$set(this.mapList[this.mapList.length - 1], key, "")
} else {
//提示上傳圖片
// 只顯示一次
if (_this.notifyId.id)
_this.notifyId.close();
this.notifyId = _this.$notify.error({
title: '提示資訊',
message: '請先上傳圖片后再標點',
showClose: true,
});
}
} else {
return false
}
}
}
// 右鍵阻止
var oDiv1 = document.getElementById('imgDiv');
oDiv1.oncontextmenu = function (ev) {
var e = e || window.event;
//阻止冒泡
e.cancelBubble = true;
//阻止觸發默認事件
e.returnValue = https://www.cnblogs.com/shuangzikun/p/false;
}
},
methods: {
changePoint() {
/**point change */
this.$forceUpdate();
},
clearMarker(index) {
/**清除marker */
this.mapList.splice(index, 1);
},
handleChange(file, fileList) {
this.loadStage = true;
let fileName = file.name;
let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test(fileName.toLowerCase())) {
this.fileSrc = https://www.cnblogs.com/shuangzikun/p/URL.createObjectURL(file.raw) // 獲取URL
console.log(this.fileSrc);
} else {
this.$message.error('請選擇圖片檔案');
}
this.loadStage = false;
},
clearPic() {
/**清除圖片 */
this.mapList = [];
},
checkParams() {
/***
* 驗證提交資訊
*/
this.$refs["form"].validate((valid) => {
if (valid) {
let params = this.form;
this.submit(params);
}
});
},
async submit(params) {
/**提交 */
let resp = await this.$api.companyApiList
.addEditCompany(params);
if (resp.data.code != "error") {
// 判斷是否新增修改
this.$notify.success({
title: "提示",
message: resp.data.msg,
showClose: true,
});
let type = params.id && params.id != '' ? 'edit' : 'add';
this.$emit("update", type);
// 清空表單資料
this.$refs.form.resetFields();
}
},
},
};
</script>
<style scoped lang="less">
/**
表單樣式
*/
.mapForm {
display: flex;
padding: 10px;
border: 1px solid pink;
.left {
flex: 2;
border-right: 1px dashed pink;
margin-right: 4px;
.mapContent {
height: 700px;
overflow-y: auto;
.selectClass {
margin: 0px 5px;
}
.pointAbscissaOrdinate {
display: inline-block;
width: 140px;
}
}
}
.right {
flex: 8;
// border: 1px solid pink;
max-width: 1100px;
.imgDiv {
position: relative;
height: 720px;
border: 2px solid cornflowerblue;
.marker {
position: absolute;
border-radius: 50%;
z-index: 999;
width: 20px;
height: 20px;
background-color: red;
text-align: center;
line-height: 20px;
color: yellow;
.ponint {
display: block;
position: absolute;
left: 20px;
top: 0px;
font-size: 12px;
color: blue;
}
}
.marker:hover .ponint {
display: block;
}
}
.info {
font-size: 12px;
}
.uploadBtn {
margin: 10px 0px;
}
}
.btn {
padding-left: 160px;
}
}
.formInputClass {
width: 200px;
}
</style>
標點的效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/289012.html
標籤：JavaScript