Skip to content

G
gassafety
Commit 4e375126 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

gis地图功能优化

parent 45bb9698
Show whitespace changes
Inline Side-by-side
Showing with 93 additions and 39 deletions
gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue
View file @ 4e375126
<template>
<div class="wrapper">
<div class="content">
<span class="left">姓名: {{ data.userName }}</span>
<span class="right">时间: {{ data.createTime }}</span>
</div>
<div class=""></div>
</div>
</template>
<script>
......@@ -29,14 +33,26 @@ export default {
padding: 7px 7px 7px 8px;
box-shadow: 0 0 20px -5px #0d4f88;
border-radius: 4px;
position: relative;
&:before {
content: "";
position: absolute;
left: -10px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #0d4f88;
z-index: -1;
}
.content {
span {
word-break: break-all;
display: block;
// vertical-align: top;
// &.right {
// width: 90px;
// padding-left: 4px;
// }
}
}
}
</style>
\ No newline at end of file
gassafety-web/src/utils/gaodeMapView.js
View file @ 4e375126
......@@ -75,10 +75,10 @@ class gaodeMap {
});
this.myMap = map;
this.myMap.on("click", e => {
this.myMap.on("mousedown", e => {
// if (this.lineType !=1 || this.lineFlag) return;
this.closeInfoWindow();
this.view.bottomDataShow=true;
this.view.bottomDataShow = true;
if (this.lineType != 1 || this.lineFlag) return;
......@@ -100,8 +100,7 @@ class gaodeMap {
// //console.log("抬起来了");
});
this.myMap.on("mousedown", (e) => {
console.log(e)
this.myMap.on("mousedown", e => {
// this.closeInfoWindow();
});
// 地图开始平移删除infowindow
......@@ -265,7 +264,11 @@ class gaodeMap {
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
marker.on("mousedown", this.wokerManOpen);
marker.on("mouseover", this.wokerManOpen);
marker.on("mouseout", e => {
e.target.infoWindow.close();
});
marker.on("mousedown", e => {
// console.log(data);
that.closeInfoWindow();
......@@ -387,8 +390,10 @@ class gaodeMap {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
console.log("e.target.getPosition()", e.target.getExtData());
e.target.infoWindow.setOffset(new AMap.Pixel(24, -38));
e.target.infoWindow.open(map, e.target.getExtData().pos);
console.log("e.target.getPosition()", e.target.getExtData().pos);
console.log("offset", e.target.infoWindow.getOffset());
this.boxCollision(e.target.infoWindow.dom);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
......@@ -706,12 +711,14 @@ class gaodeMap {
marker.passedPolyline = new AMap.Polyline({
map: map,
strokeColor: "#AF5", //线颜色
cursor:"pointer",
strokeWeight: 6 //线宽
});
// removeLineInfoWindow
marker.passedPolyline.on("mouseover", e => {
marker.passedPolyline.on("mousedown", e => {
const dom = createPop(removeLineInfoWindow, {
map: this,
marker
......@@ -724,13 +731,13 @@ class gaodeMap {
// offset: new AMap.Pixel(20, 20),
anchor: "left-top"
});
marker.infoWindow.setOffset(new AMap.Pixel(10,-20));
marker.infoWindow.open(map, e.lnglat);
// infoWindow.on("mousedown",(e)=>{
// e.stopPropagation();
// })
this.markerPassedPolylineInfoWindow = marker.infoWindow;
console.log(e.lnglat);
});
marker.moveMarker.on("moving", function(e) {
......@@ -785,7 +792,6 @@ class gaodeMap {
// //console.log("coordinates",coordinates)
// let path = coordinates ? getArray(coordinates) :[];
// 字符串转二维数组
let path = coordinates ? eval(coordinates) : [];
let polyline = new AMap.Polyline({
path,
......@@ -793,8 +799,9 @@ class gaodeMap {
strokeWeight: 4,
strokeOpacity: 0.9,
zIndex: 50,
bubble: true,
bubble: false,
geodesic: true,
cursor: "pointer",
extData: {
type: "line",
//当前line状态 0:正常状态 1:正在编辑状态
......@@ -809,11 +816,16 @@ class gaodeMap {
this.newLineAddEvent(polyline);
//添加事件
polyline.on("mousedown", this.polylineMouseOver);
polyline.on("mouseover", () => {
polyline.setOptions({ strokeColor: "#F7FE38" });
});
polyline.on("mouseout", e => {
// console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
if (polyline.getExtData().lineData.alarmState == 1) return;
if (polyline.getExtData().lineData.alarmState == 1) {
polyline.setOptions({ strokeColor: "#ff0000" });
} else {
polyline.setOptions({ strokeColor: "#2EE7E7" });
}
// infoWindow.close();
});
// 计算info的位置
......@@ -837,8 +849,8 @@ class gaodeMap {
} else {
infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
}
infoWindow.open(map, e.lnglat);
console.log(infoWindow);
// 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
console.log("e.originEvent", e.originEvent);
if (e.originEvent && 0) {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 4e375126
......@@ -162,7 +162,7 @@
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@mousedown.stop="panToo(iten, item)"
@click="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.code" class="code">
......@@ -187,7 +187,7 @@
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@mousedown.stop="panToo(iten, item)"
@click="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.troubleLevel" class="code">
......@@ -212,7 +212,7 @@
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@mousedown="panToo(iten, item)"
@click="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.userName" class="code">
......@@ -232,7 +232,7 @@
class="btn backPage"
type="mini"
:disabled="item.nowPage == 1"
@click.stop="pageBack(item, index)"
@click="pageBack(item, index)"
icon="el-icon-arrow-left"
/>
<span class="btn-w-num">{{ item.nowPage }}</span>
......@@ -240,7 +240,7 @@
class="btn goPage"
type="mini"
:disabled="item.nowPage == item.maxPage"
@click.stop="pageGo(item, index)"
@click="pageGo(item, index)"
icon="el-icon-arrow-right"
/>
</div>
......@@ -787,20 +787,46 @@ export default {
panTo(item, bool) {
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(item.list[0].path);
let path;
// 线条
if (item.value == 1) {
const a =
(Number(item.list[0].lnglat[0]) + Number(item.list[0].path[0])) /
2;
const b =
(Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
2;
path = [a, b - 0.1];
} else {
path = [item.list[0].path[0], item.list[0].path[1] - 0.1];
}
this.gaoMap.panTo(path);
}
}
},
panToo(iten, item) {
// 如果没打对勾，就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
this.gaoMap.myMap.setZoom(11);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
const path =
item.value == 1 ? [iten.lnglat[0],iten.lnglat[1]-0.1] : [iten.path[0], iten.path[1] - 0.1];
let path;
if (item.value == 1) {
const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
//屏幕移动的位置
path = [a, b - 0.1];
// 线条infowindow显示中间
iten.infoPath = [a.toFixed(6), b.toFixed(6)];
console.log(path);
} else {
path = [iten.path[0], iten.path[1] - 0.1];
}
// const path =
// item.value == 1
// ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
// : [iten.path[0], iten.path[1] - 0.1];
this.gaoMap.panTo(path);
}
}
......@@ -829,10 +855,10 @@ export default {
console.log("target", target);
const e = {
target,
lnglat: iten.lnglat,
lnglat: iten.infoPath,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.infoPath[0] == lng && iten.infoPath[1] - 0.1 == lat) {
this.gaoMap.polylineMouseOver(e);
return;
}
......@@ -852,7 +878,7 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
this.gaoMap.infoOpen(e);
return;
}
......@@ -872,7 +898,7 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
this.gaoMap.troubleOpen(e);
return;
}
......@@ -893,7 +919,7 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
this.gaoMap.wokerManOpen(e);
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