Commit 554757ba authored by 纪泽龙's avatar 纪泽龙

地图模式调整

parent 30ae471f
...@@ -271,7 +271,14 @@ export default { ...@@ -271,7 +271,14 @@ export default {
if (res.code == 200) { if (res.code == 200) {
this.dialogVisible = false; this.dialogVisible = false;
data.pipeId = data.pipeId ? data.pipeId : res.data; data.pipeId = data.pipeId ? data.pipeId : res.data;
this.lineOkCallBack.call(this.gaodeMap, this.target, data); this.lineOkCallBack.call(this.gaodeMap, this.target, data,()=>{
const arr= this.gaodeMap.polyLines.map(item=>{
return item.getExtData().lineData
})
console.log("arr===================",arr)
this.gaodeMap.view.pipeClassify(arr)
this.gaodeMap.view.pipeList();
});
if (!this.editForm.pipeId) { if (!this.editForm.pipeId) {
this.gaodeMap.newLineObj = null; this.gaodeMap.newLineObj = null;
this.gaodeMap.createNewLine(); this.gaodeMap.createNewLine();
......
...@@ -214,10 +214,12 @@ export default { ...@@ -214,10 +214,12 @@ export default {
if (valid) { if (valid) {
if (this.form.deviceId != null) { if (this.form.deviceId != null) {
updateDeviceInfo(this.form).then((response) => { updateDeviceInfo(this.form).then((response) => {
if (response.code == 200) {
this.dialogVisible = false; this.dialogVisible = false;
this.map.remove(this.obj); this.map.remove(this.obj);
this.gaoMap.addMarker(this.gaoMap.deviceType, this.form); this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
}
}); });
} else { } else {
addDeviceInfo(this.form).then((response) => { addDeviceInfo(this.form).then((response) => {
......
...@@ -35,6 +35,8 @@ class gaodeMap { ...@@ -35,6 +35,8 @@ class gaodeMap {
myMap = null; myMap = null;
showInfoWindow = null; showInfoWindow = null;
view = null; view = null;
// 地图移动结束后出现infowindow用的函数
handleInfoWindowOpenFunc = null;
//构造函数中设置中央点默认值 //构造函数中设置中央点默认值
constructor(center) { constructor(center) {
...@@ -88,6 +90,10 @@ class gaodeMap { ...@@ -88,6 +90,10 @@ class gaodeMap {
this.closeInfoWindow(); this.closeInfoWindow();
}); });
this.myMap.on("moveend", () => { this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
}
// console.log("缩放开始") // console.log("缩放开始")
if (!this.onceFlag) { if (!this.onceFlag) {
this.onceFlag = true; this.onceFlag = true;
...@@ -101,7 +107,9 @@ class gaodeMap { ...@@ -101,7 +107,9 @@ class gaodeMap {
this.districtBoundaries(); this.districtBoundaries();
} }
panTo(lnglat) {
this.myMap.panTo(lnglat);
}
/** /**
* 获取map * 获取map
* @returns {AMap.Map} * @returns {AMap.Map}
...@@ -160,7 +168,7 @@ class gaodeMap { ...@@ -160,7 +168,7 @@ class gaodeMap {
* @param markerType * @param markerType
* @param lnglats * @param lnglats
*/ */
addMarker(markerType, data) { addMarker(markerType, data, func) {
let that = this; let that = this;
that.markerType = markerType; that.markerType = markerType;
let infoWindow = new AMap.InfoWindow({ let infoWindow = new AMap.InfoWindow({
...@@ -189,8 +197,9 @@ class gaodeMap { ...@@ -189,8 +197,9 @@ class gaodeMap {
DEVICE_TYPE.INSPECTOR != markerType DEVICE_TYPE.INSPECTOR != markerType
) { ) {
marker.content = this.getMarketContent(data); marker.content = this.getMarketContent(data);
marker.on("mouseover", infoOpen); marker.on("mouseover", this.infoOpen);
marker.on("mouseout", infoClose); marker.on("mouseout", infoClose);
marker.infoWindow = infoWindow;
marker.setExtData(data); marker.setExtData(data);
that.deviceType = markerType; that.deviceType = markerType;
let editWindow = that.createInfowindow("编辑"); let editWindow = that.createInfowindow("编辑");
...@@ -287,17 +296,19 @@ class gaodeMap { ...@@ -287,17 +296,19 @@ class gaodeMap {
map.setStatus(options); map.setStatus(options);
//infoWindow.close(map, e.target.getPosition()); //infoWindow.close(map, e.target.getPosition());
} }
if (func) {
function infoOpen(e) { func();
}
}
// 其他设备
infoOpen = e => {
let options = map.getStatus(); let options = map.getStatus();
options.scrollWheel = false; options.scrollWheel = false;
map.setStatus(options); map.setStatus(options);
infoWindow.setContent(e.target.content); e.target.infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition()); e.target.infoWindow.open(map, e.target.getPosition());
that.markerInfoWindow = infoWindow; this.markerInfoWindow = e.target.infoWindow;
} };
}
/** /**
* marker添加拖拽事件 * marker添加拖拽事件
*/ */
...@@ -454,7 +465,7 @@ class gaodeMap { ...@@ -454,7 +465,7 @@ class gaodeMap {
* 添加折线 * 添加折线
* @param path * @param path
*/ */
addPolyline(arr) { addPolyline(arr, func) {
// this` polyLines = []; // this` polyLines = [];
console.log("包装的数组", arr); console.log("包装的数组", arr);
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
...@@ -480,8 +491,13 @@ class gaodeMap { ...@@ -480,8 +491,13 @@ class gaodeMap {
lineData: item lineData: item
} }
}); });
// 如果是修改后包装,有记录的index 就在原位置插入,如果没有,就直接在最后插入
if (this.changePolineListNum===null) {
this.polyLines.push(polyline); this.polyLines.push(polyline);
}else{
this.polyLines.splice(this.changePolineListNum,0,polyline);
this.changePolineListNum=null;
}
// 信息窗体 // 信息窗体
const dom = createPop(lineInfoWindow, { const dom = createPop(lineInfoWindow, {
obj: { a: 123, editorPage: true, ...item, polyline } obj: { a: 123, editorPage: true, ...item, polyline }
...@@ -510,9 +526,29 @@ class gaodeMap { ...@@ -510,9 +526,29 @@ class gaodeMap {
this.newLineAddEvent(polyline); this.newLineAddEvent(polyline);
polyline.infoWindow = infoWindow; polyline.infoWindow = infoWindow;
//添加事件 //添加事件
polyline.on("mouseover", e => { polyline.on("mouseover", this.polylineMouseOver);
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
}
map.add(this.polyLines);
if (func) {
func();
}
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 鼠标移入管道
polylineMouseOver = e => {
let polyline = e.target;
if (this.lineType == 1) return; if (this.lineType == 1) return;
// 上方导航的高 // 上方导航的高
let X = 20,
Y = -20;
if (e.originEvent) {
const topBar = 81; const topBar = 81;
// 坐标导航的宽 // 坐标导航的宽
const leftBar = 100; const leftBar = 100;
...@@ -523,10 +559,10 @@ class gaodeMap { ...@@ -523,10 +559,10 @@ class gaodeMap {
} = document.body; } = document.body;
// 弹出的信息窗口的宽高 // 弹出的信息窗口的宽高
const { const { offsetWidth: infoWindowWidth, offsetHeight: infoWindowHeight } = {
offsetWidth: infoWindowWidth, offsetWidth: 406,
offsetHeight: infoWindowHeight offsetHeight: 316
} = { offsetWidth: 406, offsetHeight: 316 }; };
// 鼠标碰到线后的位置 // 鼠标碰到线后的位置
const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent; const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离 // 鼠标到左边界的距离
...@@ -537,8 +573,7 @@ class gaodeMap { ...@@ -537,8 +573,7 @@ class gaodeMap {
const offsetBottomY = windowClientHeight - mouseClientY; const offsetBottomY = windowClientHeight - mouseClientY;
const offsetY = mouseClientY - 80 - infoWindowHeight; const offsetY = mouseClientY - 80 - infoWindowHeight;
let X = 20,
Y = -20;
if (offsetLeftX <= infoWindowWidth) { if (offsetLeftX <= infoWindowWidth) {
console.log("靠左了"); console.log("靠左了");
X = 20; X = 20;
...@@ -554,24 +589,16 @@ class gaodeMap { ...@@ -554,24 +589,16 @@ class gaodeMap {
Y = -infoWindowHeight - 20; Y = -infoWindowHeight - 20;
} }
polyline.setOptions({ strokeColor: "#FF5A67" }); polyline.setOptions({ strokeColor: "#FF5A67" });
infoWindow.setOffset(new AMap.Pixel(X, Y)); }
infoWindow.open(map, e.lnglat);
polyline.infoWindow.setOffset(new AMap.Pixel(X, Y));
polyline.infoWindow.open(map, e.lnglat);
// polyline.infoWindow=infoWindow; // polyline.infoWindow=infoWindow;
this.showInfoWindow = infoWindow; this.showInfoWindow = polyline.infoWindow;
// const // const
}); };
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
}
map.add(this.polyLines);
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 创建一条新的线 // 创建一条新的线
createNewLine() { createNewLine() {
map.remove(this.markerOverlays); map.remove(this.markerOverlays);
...@@ -767,20 +794,22 @@ class gaodeMap { ...@@ -767,20 +794,22 @@ class gaodeMap {
} }
// 传进组件的会调 点确认的时候调 // 传进组件的会调 点确认的时候调
lineOkCallBack(target, data) { lineOkCallBack(target, data, func) {
target.polyEditor.close(); target.polyEditor.close();
const index = this.polyLines.indexOf(target); const index = this.polyLines.indexOf(target);
// 如果是老线,就要线删除原来的,然后重新包装一遍 // 如果是老线,就要线删除原来的,然后重新包装一遍
if (index >= 0) { if (index >= 0) {
// 记录当前位置的元素
this.changePolineListNum = index;
this.polyLines.splice(index, 1); this.polyLines.splice(index, 1);
} }
console.log("data999-=================>传回来的data", data); console.log("data999-=================>传回来的data", data);
this.addPolyline([data]); this.addPolyline([data], func);
map.remove(target); map.remove(target);
// console.log('polyLines',this.polyLines) // console.log('polyLines',this.polyLines)
} }
// 上传服务器用的组件 // 上传服务器用的组件
infoWindowPipelineView(options) { infoWindowPipelineView(options) {
// const {} =options; // const {} =options;
const notice = createPop(pipelineView, { const notice = createPop(pipelineView, {
......
...@@ -506,7 +506,7 @@ export default { ...@@ -506,7 +506,7 @@ export default {
}, },
// 隐患 // 隐患
getMapHiddenTroublelist(queryParams) { getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist().then((res) => { return getMapHiddenTroublelist(queryParams).then((res) => {
console.log(res); console.log(res);
if (res.code == 200) { if (res.code == 200) {
this.troubleClassify(res.data); this.troubleClassify(res.data);
...@@ -1206,6 +1206,8 @@ export default { ...@@ -1206,6 +1206,8 @@ export default {
await this.getPipeList({ pipeName: this.keyWord }); await this.getPipeList({ pipeName: this.keyWord });
// 值班人员 // 值班人员
await this.getInspectorLocations({ userName: this.keyWord }); await this.getInspectorLocations({ userName: this.keyWord });
await this.getMapHiddenTroublelist({ troubleName: this.keyWord });
// 设备报警 // 设备报警
this.getSelectAlarmDevice(); this.getSelectAlarmDevice();
...@@ -1242,13 +1244,16 @@ export default { ...@@ -1242,13 +1244,16 @@ export default {
// this.gaoMap.createNewLine(); // this.gaoMap.createNewLine();
}, },
refreshMap() { refreshMap() {
// this.changeBtnDataClear();
this.keyWord="";
this.arrowRightNum=[];
this.iconClass = "icon-create"; this.iconClass = "icon-create";
this.createValue = 0; this.createValue = 0;
this.createLabel = "新建"; this.createLabel = "新建";
this.targetNum = 0; this.targetNum = 0;
map.clearMap(); map.clearMap();
this.initMap();
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9]; this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
this.initMap();
}, },
// 改变工单弹框状态 // 改变工单弹框状态
// openChange(bool) { // openChange(bool) {
......
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