Skip to content

Z
zh-baseversion-project
Commit 36c2445d authored by 军师中郎将's avatar 军师中郎将
Browse files
Options

1 大屏端 居民用户 和 商业用户 上图后 界面拖动卡问题优化。

parent 623da5c2
Show whitespace changes
Inline Side-by-side
Showing with 279 additions and 107 deletions
zh-baseversion-admin/src/main/java/com/zehong/web/controller/supervise/TDetectorUserController.java
View file @ 36c2445d
......@@ -84,8 +84,6 @@ public class TDetectorUserController extends BaseController
return AjaxResult.success(tDetectorUserCount);
}
/**
* 获取探测器用户列表
* @return
......@@ -104,6 +102,17 @@ public class TDetectorUserController extends BaseController
return AjaxResult.success(tDetectorUserService.detectorUserList(tDetectorUser));
}
/**
* 获取探测器用户列表 大屏地图 labelsLayer 标注的方式
* @return ajaxResult
*/
@GetMapping("/labelsLayerMarksDetectorUserList")
public AjaxResult labelsLayerMarksDetectorUserList(TDetectorUser tDetectorUser){
return AjaxResult.success(tDetectorUserService.labelsLayerMarksDetectorUserList(tDetectorUser));
}
/**
* 获取探测器用户列表
* @return
......
zh-baseversion-system/src/main/java/com/zehong/system/service/ITDetectorUserService.java
View file @ 36c2445d
......@@ -33,6 +33,13 @@ public interface ITDetectorUserService
*/
// public Map<String, List<TMassMarksDetectorUserVO>> massMarksDetectorUserList(TDetectorUser tDetectorUser);
/**
* 查询探测器用户列表 地图使用 labelsLayer 标注的方式
* @param tDetectorUser tDetectorUser
* @return r
*/
public Map<String, List<TDetectorUserVO>> labelsLayerMarksDetectorUserList(TDetectorUser tDetectorUser);
/**
* 查询探测器用户列表
*
......
zh-baseversion-system/src/main/java/com/zehong/system/service/impl/TDetectorUserServiceImpl.java
View file @ 36c2445d
......@@ -87,6 +87,43 @@ public class TDetectorUserServiceImpl implements ITDetectorUserService
return tDetectorUserMapper.countTDetectorUserForMassMarks(tDetectorUser);
}
/**
* 查询探测器用户列表 地图使用 labelsLayerMarks 标注的方式
* @param tDetectorUser tDetectorUser
* @return r
*/
@Override
public Map<String, List<TDetectorUserVO>> labelsLayerMarksDetectorUserList(TDetectorUser tDetectorUser) {
Map<String, List<TDetectorUserVO>> collect ;
List<TDetectorUserVO> list = new ArrayList<>();
List<TDetectorUserVO> tDetectorUserList = tDetectorUserMapper.countTDetectorUser(tDetectorUser);
if (tDetectorUserList.size() > 0) {
for(TDetectorUserVO user : tDetectorUserList){
TDetectorUserVO userVO = new TDetectorUserVO();
BeanUtils.copyProperties(user, userVO);
List<Object> newList = new ArrayList<>();
newList.add(user);
userVO.setDetectorCountList(newList);
if("1".equals(userVO.getUserType())) {
userVO.setIconType("6");
} else if ("2".equals(userVO.getUserType())) {
userVO.setIconType("61");
}
list.add(userVO);
}
collect = list.stream().collect(Collectors.groupingBy(TDetectorUserVO::getIconType));
} else {
collect = new HashMap<>(0);
}
return collect;
}
/**
* 查询探测器用户列表 地图使用 massMarks 标注的方式
* @param tDetectorUser tDetectorUser
......
zh-baseversion-web/src/api/detector/detectorUser.js
View file @ 36c2445d
......@@ -18,6 +18,14 @@ export function massMarksDetectorUserList(query) {
})
}
// 探测器用户列表 大屏端 labelsLayerMarks 标注方式
export function labelsLayerMarksDetectorUserList(query) {
return request({
url: '/supervise/user/labelsLayerMarksDetectorUserList',
method: 'get',
params: query
})
}
// 探测器用户列表
export function detectorUserList(query) {
return request({
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ 36c2445d
......@@ -43,9 +43,14 @@ export class EditorMap {
// infowindow本身
infowindow = null;
//用户列表图层
//居民用户-用户列表图层
detectorUserlabelsLayer = null;
//商业用户-用户列表图层
businessDetectorUserlabelsLayer = null;
selarr = [];
constructor(contaienr, config = {}, vue) {
this.map = new AMap.Map(contaienr, {
viewMode: "3D",
......@@ -150,7 +155,36 @@ export class EditorMap {
console.log("弹框");
this.flag = false;
}
if (this.detectorUserlabelsLayer != null) {
const detectorUserHas = this.selarr.indexOf(6) >= 0;
if (detectorUserHas) {
this.detectorUserlabelsLayer.show();
}
}
if (this.businessDetectorUserlabelsLayer != null) {
const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
if (businessDetectorUserHas) {
this.businessDetectorUserlabelsLayer.show();
}
}
});
this.map.on("movestart",()=>{
console.log("地图开始移动");
if (this.detectorUserlabelsLayer != null) {
const detectorUserHas = this.selarr.indexOf(6) >= 0;
if (detectorUserHas) {
this.detectorUserlabelsLayer.hide();
}
}
if (this.businessDetectorUserlabelsLayer != null) {
const businessDetectorUserHas = this.selarr.indexOf(61) >= 0;
if (businessDetectorUserHas) {
this.businessDetectorUserlabelsLayer.hide();
}
}
})
// this.map.on('zoomchange', () => {
// //获取当前最新的地图层级
// let Zoom = this.map.getZoom()
......@@ -484,13 +518,23 @@ export class EditorMap {
* @param {*} component
* @param {*} showBool
*/
addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
labelsLayerMarksDetectorUserList(mapData,compontent,showBool = true){
if(mapData !== null && mapData !== undefined) {
const hashMap = new Map();
for(var key in mapData){
var value = mapData[key];
var jsonValue = JSON.stringify(value);
var jsonValueArr = JSON.parse(jsonValue);
//居民用户
if (key === "6") {
this.detectorUserlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //该层内标注是否避让
allowCollision: true, //不同标注层之间是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
......@@ -501,9 +545,8 @@ export class EditorMap {
};
var markers = [];
if(mapData !== null && mapData !== undefined) {
const map = new Map();
mapData.forEach(item => {
if(jsonValueArr !== null && jsonValueArr !== undefined) {
jsonValueArr.forEach(item => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
......@@ -514,7 +557,7 @@ export class EditorMap {
rank: 1, //避让优先级
};
map.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId),item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -524,7 +567,7 @@ export class EditorMap {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var userId = JSON.stringify(optsObj.icon.userId);
var extData = map.get(userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
......@@ -532,11 +575,64 @@ export class EditorMap {
}
this.detectorUserlabelsLayer.add(markers);
this.map.add(this.detectorUserlabelsLayer)
if (!showBool) {
this.detectorUserlabelsLayer.hide();
}
//商业用户
} else if (key === "61") {
this.businessDetectorUserlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[61], //可访问的图片 URL
size: [30, 30], //图片尺寸
anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
if(jsonValueArr !== null && jsonValueArr !== undefined) {
jsonValueArr.forEach(item => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 2, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var userId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
});
}
this.businessDetectorUserlabelsLayer.add(markers);
this.map.add(this.businessDetectorUserlabelsLayer)
if (!showBool) {
this.businessDetectorUserlabelsLayer.hide();
}
}
}
}
}
/**
* 地图上添加用户数据 海量点标记 MassMarks 方式
......@@ -544,57 +640,57 @@ export class EditorMap {
* @param {*} component
* @param {*} showBool
*/
// addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
// if(mapData !== null && mapData !== undefined) {
// var style;
// for(var key in mapData){
// var value = mapData[key];
// var jsonValue = JSON.stringify(value);
// var jsonValueArr = JSON.parse(jsonValue);
// if ("6" === key) {
// style = [{
// url: svgUrl[6],
// anchor: new AMap.Pixel(3, 3),
// size: new AMap.Size(11, 11),
// zIndex: 3,
// }]
// } else if ("61" === key) {
// style = [{
// url: svgUrl[6],
// anchor: new AMap.Pixel(3, 3),
// size: new AMap.Size(11, 11),
// zIndex: 3,
// }]
// }
// var mass = new AMap.MassMarks(jsonValueArr, {
// opacity: 0.8,
// zIndex: 111,
// cursor: 'pointer',
// style: style
// });
addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
if(mapData !== null && mapData !== undefined) {
var style;
for(var key in mapData){
var value = mapData[key];
var jsonValue = JSON.stringify(value);
var jsonValueArr = JSON.parse(jsonValue);
if ("6" === key) {
style = [{
url: svgUrl[6],
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(11, 11),
zIndex: 3,
}]
} else if ("61" === key) {
style = [{
url: svgUrl[6],
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(11, 11),
zIndex: 3,
}]
}
var mass = new AMap.MassMarks(jsonValueArr, {
opacity: 0.8,
zIndex: 111,
cursor: 'pointer',
style: style
});
// //先一启动，直接显示
// // if (!showBool) {
// // mass.hide();
// // }
// mass.on("click", (e) => {
// var data = e.data;
// // 如果control==0就是默认值，没有使用123功能，就显示infowindow
// if (this.control == 0) {
// this.massMarksMarkerClick(data, compontent);
// } else if (this.control == 2) {
// // 2是已经上图的设备拥有的编辑功能
// } else if (this.control == 3) {
// // 3是删除操作
//先一启动，直接显示
// if (!showBool) {
// mass.hide();
// }
// });
// mass.setMap(this.map);
// }
// }
// }
mass.on("click", (e) => {
var data = e.data;
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
if (this.control == 0) {
this.massMarksMarkerClick(data, compontent);
} else if (this.control == 2) {
// 2是已经上图的设备拥有的编辑功能
} else if (this.control == 3) {
// 3是删除操作
}
});
mass.setMap(this.map);
}
}
}
/** 点击marker出现infowindow- 大屏端 massMarks设置
* @description:
......@@ -825,12 +921,27 @@ export class EditorMap {
// 判断是否需要显示 居民用户
const detectorUserHas = typeArr.indexOf(6) >= 0;
this.selarr = typeArr;
if (this.detectorUserlabelsLayer != null) {
if (detectorUserHas) {
this.detectorUserlabelsLayer.show();
} else {
this.detectorUserlabelsLayer.hide();
}
}
// 判断是否需要显示 商业用户
const businessDetectorUserHas = typeArr.indexOf(61) >= 0;
this.selarr = typeArr;
if (this.businessDetectorUserlabelsLayer != null) {
if (businessDetectorUserHas) {
this.businessDetectorUserlabelsLayer.show();
} else {
this.businessDetectorUserlabelsLayer.hide();
}
}
}
// 普通调用方法
// 设备报警
deviceAlarm(obj) {
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 36c2445d
......@@ -150,7 +150,7 @@
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList,massMarksDetectorUserList } from "@/api/detector/detectorUser";
import { detectorUserList,massMarksDetectorUserList,labelsLayerMarksDetectorUserList } from "@/api/detector/detectorUser";
import {
pipeData,
tiaoyaxiang,
......@@ -380,7 +380,7 @@ export default {
// 用户要等一下 因为有报警数据
this.massMarksDetectorUserGoMap(massMarksDetectorUserList,User, false).then((res) => {
this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => {
// 先查一下，然后开启定时器
this.userAlarm();
this.alarmTimer = setInterval(() => {
......@@ -483,10 +483,10 @@ export default {
});
},
massMarksDetectorUserGoMap(httpFunc, component, show) {
labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.addMassMarksDetectorUserGoMap(mapData, component, show);
this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
});
},
goMap(httpFunc, addFunc, component, show) {
......
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