Skip to content

Z
zh-baseversion-project
Commit a6bd91dd authored by wanghao's avatar wanghao
Browse files
Options

1 结合项目中 停气监管 需要画多区域功能，去 高德开发平台 了解 AMap.MouseTool 鼠标事件的使用，实现 能 画多区域，并对某个区域编辑 和 删除。

parent 969974e5
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 100 deletions
zh-baseversion-web/src/components/GasShutDownDrawArea/index.vue
View file @ a6bd91dd
......@@ -37,7 +37,6 @@
gaoMap: null,
mouseTool: null,
drawLayers: [],
selectedLayerIndex: null,
overlays: null,
firstClick: 0,
nowMouseTarget: null,
......@@ -72,23 +71,27 @@
initMapEvent(){
let that = this;
this.gaoMap.map.on("click", () => {
if(that.nowMouseTarget && !that.isClickPolygonFlag){
//that.$emit("input", []);
that.mouseTool && that.mouseTool.close();
that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
//that.gaoMap.map.remove(that.nowMouseTarget);
that.mouseTool && that.mouseTool.polygon(that.opts);
if(!that.mouseTool){
that.initMouseEvent();
}
that.isClickPolygonFlag = true;
// if(that.nowMouseTarget && !that.isClickPolygonFlag){
// //that.$emit("input", []);
// // that.mouseTool && that.mouseTool.close();
// // that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
// //that.gaoMap.map.remove(that.nowMouseTarget);
// // that.mouseTool && that.mouseTool.polygon(that.opts);
// // if(!that.mouseTool){
// // that.initMouseEvent();
// // }
// that.isClickPolygonFlag = true;
this.drawLayers.push('[' + that.nowMouseTarget + ']');
that.nowMouseTarget.setMap(this.gaoMap.map);
this.selectedLayerIndex = this.drawLayers.length - 1; // 设置当前选中的图层索引
console.log("this.drawLayers = " + this.drawLayers)
that.nowMouseTarget = null;
}
// this.drawLayers.push('[' + that.nowMouseTarget + ']');
// // that.nowMouseTarget.setMap(this.gaoMap.map);
// this.selectedLayerIndex = this.drawLayers.length - 1; // 设置当前选中的图层索引
// console.log("this.drawLayers = " + this.drawLayers)
// that.nowMouseTarget = null;
// that.mouseTool.polygon(that.opts);
// }
// if (!that.isClickPolygonFlag) {
// that.mouseTool.polygon(that.opts);
// }
});
},
//初始化鼠标事件
......@@ -98,122 +101,84 @@
that.mouseTool = new AMap.MouseTool(this.gaoMap.map);
that.mouseTool.polygon(that.opts);
that.mouseTool.on('draw',function(e){
that.nowMouseTarget = e.obj;
that.$emit("input", that.nowMouseTarget._opts.path);
let nowMouseTargetObj = new Object();
nowMouseTargetObj= e.obj;
// that.$emit("input", that.nowMouseTarget._opts.path);
that.isClickPolygonFlag = false;
if(that.nowMouseTarget._opts.path.length > 2){
if(nowMouseTargetObj._opts.path.length > 2){
that.mouseTool.close();
that.isClickPolygonFlag = true;
}
that.firstClick = 0;
e.obj.on('click',function () {
nowMouseTargetObj.on('click',function () {
that.isClickPolygonFlag = true;
that.firstClick++;
if(that.firstClick < 2){
that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => {
const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj);
that.nowMouseTarget.polygonEditor = polygonEditor;
nowMouseTargetObj.polygonEditor = polygonEditor;
polygonEditor.on("removenode", (e) => {
that.$emit("input", e.target._opts.path);
// that.$emit("input", e.target._opts.path);
that.isClickPolygonFlag = true;
if(that.nowMouseTarget._opts.path.length == 0){
if(nowMouseTargetObj._opts.path.length == 0){
setTimeout(() => {
that.mouseTool.polygon(that.opts);
}, 230);
}
});
polygonEditor.on("adjust",(e) =>{
that.$emit("input", e.target._opts.path);
// that.$emit("input", e.target._opts.path);
})
polygonEditor.on("addnode",(e) =>{
that.$emit("input", e.target._opts.path);
// that.$emit("input", e.target._opts.path);
})
polygonEditor.open();
});
}
});
e.obj.on("mouseout", (e) => {
nowMouseTargetObj.on("mouseout", (e) => {
that.isClickPolygonFlag = false;
that.mouseTool.polygon(that.opts);
console.log("mouseout === 了。。。。。。")
})
// 鼠标放到了这个上面
nowMouseTargetObj.on("mouseover", (e) => {
that.mouseTool.polygon(null);
console.log("mouseover === 了。。。。。。")
})
//右键关闭区域编辑
e.obj.on("rightclick",() => {
nowMouseTargetObj.on("rightclick",(e) => {
that.firstClick = 0;
that.nowMouseTarget.polygonEditor.close();
nowMouseTargetObj.polygonEditor.close();
})
//双击删除
e.obj.on('dblclick',(e) => {
console.log("this.e = " + e)
// 双击删除
nowMouseTargetObj.on("dblclick",(e) => {
that.$confirm("是否删除此区域", { type: "warning" })
.then(() => {
console.log("确实要删除了。")
debugger;
let point = new AMap.LngLat(e.lngLat.lng, e.lngLat.lat);
for (let i = 0; i < this.drawLayers.length; i++) {
if (this.drawLayers[i].contains(point)){
console.log("第" + i + "个包含点击的坐标点，该删除");
let deleteIndex = null;
for (let i = 0;i < that.drawLayers.length;i ++) {
var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i]._opts.path);
if (isPointInRing) {
deleteIndex = i;
}
}
if (deleteIndex != null) {
that.drawLayers[deleteIndex].polygonEditor.close();
that.gaoMap.map.remove(that.drawLayers[deleteIndex]);
that.drawLayers.splice(deleteIndex, 1);
}
}).catch(() => {});
})
}),
that.mouseTool.on('click',()=>{
if (!this.selectedLayerIndex) return;
let layer = this.drawLayers[this.selectedLayerIndex];
let point = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
if (layer.contains(point)) {
// 点击点在区域内，则添加到区域中
layer.getPath().push(point);
} else {
// 点击点不在区域内，则删除最近的一个点
let path = layer.getPath();
let lastPoint = path[path.length - 1];
if (lastPoint.distance(point) > 50) {
path.pop();
}
if (nowMouseTargetObj._opts.path.length > 2) {
that.$set(that.drawLayers, that.drawLayers.length, nowMouseTargetObj);
}
that.mouseTool.polygon(that.opts);
})
});
},
handleDrawEnd(e){
let layer = e.layer;
this.drawLayers.push(layer);
layer.setMap(this.gaoMap.map);
// 设置当前选中的图层索引
this.selectedLayerIndex = this.drawLayers.length - 1;
},
handleClick(e){
if (!this.selectedLayerIndex) return;
let layer = this.drawLayers[this.selectedLayerIndex];
let point = new Amap.lngLat(e.lnglat.lng,e.lnglat.lat);
if (layer.contains(point)) {
//点击点在区域内，则添加到区域内
layer.getPath().push(point);
} else {
//点击点不在区域内，则删除最近的一个点
let path = layer.getPath();
let lastPoint = path[path.length - 1];
if (lastPoint.distance(point) > 50) {
path.pop();
}
}
},
selectLayer(index) {
this.selectedLayerIndex = index;
},
deleteLayer(index){
let layer = this.drawLayers[index];
layer.setMap(null);
this.drawLayers.splice(index,1);
if (this.selectedLayerIndex >= index) {
this.selectedLayerIndex = Math.max(0,this.selectedLayerIndex - 1);
}
},
//区域回显
loadArea(){
const polygon = new AMap.Polygon({
......
zh-baseversion-web/src/views/supplybalance/stop/index.vue
View file @ a6bd91dd
......@@ -246,8 +246,8 @@
<script>
import { listSup, getSup, delSup, addSup, updateSup, exportSup } from "@/api/supplybalance/stop";
import DrawArea from "@/components/DrawArea";
// import DrawArea from "@/components/GasShutDownDrawArea"
// import DrawArea from "@/components/DrawArea";
import DrawArea from "@/components/GasShutDownDrawArea"
import DetailInfo from "./components/DetailInfo";
export default {
name: "Sup",
......@@ -336,6 +336,7 @@ export default {
},
watch:{
path(newVal,oldVal){
console.log("index.watch.path = " + newVal);
if(newVal.length == 0){
this.form.fGasStopArea = "";
return
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment