|
|
|
|
@ -6,7 +6,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<transition name="left-animationMap">
|
|
|
|
|
<div class="map-left" v-if="leftAnimationData">
|
|
|
|
|
<map-left></map-left>
|
|
|
|
|
<map-left :personLine='personLine'></map-left>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
@ -93,7 +93,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<transition name="right-animationMap">
|
|
|
|
|
<div class="map-right" v-if="rightAnimationData">
|
|
|
|
|
<map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData"></map-right>
|
|
|
|
|
<map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData" :wanggeData="wanggeData"></map-right>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
@ -170,11 +170,11 @@ import crewAssign from "../../components/crewAssign/index.vue";
|
|
|
|
|
import videoWall from "../../components/videoWall/index.vue";
|
|
|
|
|
import shop from "../../components/shop/index.vue";
|
|
|
|
|
|
|
|
|
|
import jiangningwangge from "@/utils/data/江宁开发区网格.json";
|
|
|
|
|
// import jiangningwangge from "@/utils/data/江宁开发区网格.json";
|
|
|
|
|
|
|
|
|
|
import weilan from "@/utils/data/围栏1.json";
|
|
|
|
|
|
|
|
|
|
import { regionalsettings, roadsetting, fence } from "@/api/bigScreenApi"
|
|
|
|
|
import { regionalsettings, roadsetting, fence, getDeviceList, levelQywg } from "@/api/bigScreenApi"
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "myMap",
|
|
|
|
|
@ -222,10 +222,11 @@ export default {
|
|
|
|
|
electronicMap: null, // 电子地图
|
|
|
|
|
satelliteMap: null, // 卫星地图
|
|
|
|
|
satelliteNoteMap:null, // 卫星地图注记
|
|
|
|
|
wanggeData: null, // 重点网格数据
|
|
|
|
|
wanggeData: null, // 区域网格数据
|
|
|
|
|
quyuData: null, // 重点区域数据
|
|
|
|
|
weilanData: null, // 考勤围栏数据
|
|
|
|
|
luduanData: null, // 重点路段
|
|
|
|
|
personLine: [], // 在线人员情况
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
@ -357,7 +358,7 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
// this.addLayer2();
|
|
|
|
|
this.addLayer1();
|
|
|
|
|
this.addMark("执法人员");
|
|
|
|
|
this.getTem();
|
|
|
|
|
// this.addLayer2();
|
|
|
|
|
// this.addLayer3();
|
|
|
|
|
// this.addLayer4();
|
|
|
|
|
@ -378,34 +379,41 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 网格and围栏
|
|
|
|
|
addLayer8() {
|
|
|
|
|
// 加载geojson
|
|
|
|
|
let geojson = L.geoJSON(jiangningwangge, {
|
|
|
|
|
pane: "mapLayer2",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "#ffa500",
|
|
|
|
|
weight: 3,
|
|
|
|
|
fillColor: "#ffa500",
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
onEachFeature: (feature, layer) => {
|
|
|
|
|
let text = feature.properties.name;
|
|
|
|
|
let bounds = layer._bounds;
|
|
|
|
|
let center = bounds.getCenter();
|
|
|
|
|
let myIcon = L.divIcon({
|
|
|
|
|
className: "land-name2",
|
|
|
|
|
html: text,
|
|
|
|
|
iconSize: [150, 24],
|
|
|
|
|
iconAnchor: [75, 12],
|
|
|
|
|
// 网格
|
|
|
|
|
levelQywg({ level: 1 }).then((res) => {
|
|
|
|
|
this.wanggeData = res.data;
|
|
|
|
|
res.data.forEach(element=>{
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
|
|
let geojson = L.geoJSON(shapeStr.features[0], {
|
|
|
|
|
pane: "mapLayer2",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "#ffa500",
|
|
|
|
|
weight: 3,
|
|
|
|
|
fillColor: "#ffa500",
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
onEachFeature: (feature, layer) => {
|
|
|
|
|
// let text = feature.properties.name;
|
|
|
|
|
// let bounds = layer._bounds;
|
|
|
|
|
// let center = bounds.getCenter();
|
|
|
|
|
let myIcon = L.divIcon({
|
|
|
|
|
className: "land-name2",
|
|
|
|
|
html: element.name,
|
|
|
|
|
iconSize: [150, 24],
|
|
|
|
|
iconAnchor: [75, 12],
|
|
|
|
|
});
|
|
|
|
|
// 多边形上的标记点;
|
|
|
|
|
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
// 多边形上的标记点;
|
|
|
|
|
L.marker(center, {
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
console.log(res,'网格');
|
|
|
|
|
})
|
|
|
|
|
// .addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
|
|
|
|
|
// 加载围栏
|
|
|
|
|
@ -493,7 +501,33 @@ export default {
|
|
|
|
|
// 居中加载json文件
|
|
|
|
|
this.globalMap.fitBounds(this.mapLayer1);
|
|
|
|
|
},
|
|
|
|
|
addMark(name) {
|
|
|
|
|
// 执法人员点位
|
|
|
|
|
getTem(){
|
|
|
|
|
getDeviceList({imei:'861316060217211'}).then(res=>{
|
|
|
|
|
console.log('res0',res);
|
|
|
|
|
let obj = [];
|
|
|
|
|
if(res.data.obj) {
|
|
|
|
|
res.data.obj.forEach(element => {
|
|
|
|
|
if(element.status == 0) {
|
|
|
|
|
// 离线
|
|
|
|
|
obj.push(element)
|
|
|
|
|
this.personLine.push(element);
|
|
|
|
|
} else if(element.status == 1) {
|
|
|
|
|
// 在线
|
|
|
|
|
obj.push(element)
|
|
|
|
|
this.personLine.push(element);
|
|
|
|
|
console.log(this.personLine,'请求回来的在线情况');
|
|
|
|
|
} else if(element.status == 9) {
|
|
|
|
|
// 掉线
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$modal.msgError('执法人员' + res.data.msg);
|
|
|
|
|
}
|
|
|
|
|
this.addMark(obj);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addMark(obj) {
|
|
|
|
|
this.mapEvent.mapEvent1.clearLayers();
|
|
|
|
|
let ico1 = L.icon({
|
|
|
|
|
iconUrl: require("../../../assets/images/icon/icon1.png"),
|
|
|
|
|
@ -515,47 +549,96 @@ export default {
|
|
|
|
|
iconUrl: require("../../../assets/images/icon/icon5.png"),
|
|
|
|
|
iconSize: [52, 81],
|
|
|
|
|
});
|
|
|
|
|
point.features.map((item, index) => {
|
|
|
|
|
if (this.actionMap == 1) {
|
|
|
|
|
if (item.properties.name == "执法人员") {
|
|
|
|
|
let marker = L.marker(
|
|
|
|
|
{
|
|
|
|
|
lng: item.geometry.coordinates[0],
|
|
|
|
|
lat: item.geometry.coordinates[1],
|
|
|
|
|
},
|
|
|
|
|
{ icon: ico1 }
|
|
|
|
|
)
|
|
|
|
|
.bindPopup(
|
|
|
|
|
`
|
|
|
|
|
<div class="person-popup">
|
|
|
|
|
<div class="person-title">
|
|
|
|
|
<div class="title">人员信息</div>
|
|
|
|
|
<div class="mask" id='monitoring${index}'></div>
|
|
|
|
|
if (this.actionMap == 1) {
|
|
|
|
|
obj.forEach((item,index)=>{
|
|
|
|
|
let marker = L.marker(
|
|
|
|
|
{
|
|
|
|
|
lng: item.longitude,
|
|
|
|
|
lat: item.latitude,
|
|
|
|
|
},
|
|
|
|
|
{ icon: ico1 }
|
|
|
|
|
)
|
|
|
|
|
.bindPopup(
|
|
|
|
|
`
|
|
|
|
|
<div class="person-popup">
|
|
|
|
|
<div class="person-title">
|
|
|
|
|
<div class="title">人员信息</div>
|
|
|
|
|
<div class="mask" id='monitoring${index}'></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="person-main">
|
|
|
|
|
<div class="person-info">
|
|
|
|
|
<div class="dot"></div>
|
|
|
|
|
<div class="name">李飞</div>
|
|
|
|
|
<div class="position">执法1队队员</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="person-main">
|
|
|
|
|
<div class="person-info">
|
|
|
|
|
<div class="dot"></div>
|
|
|
|
|
<div class="name">李飞</div>
|
|
|
|
|
<div class="position">执法1队队员</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btns">
|
|
|
|
|
<div id='personClick${index}'>行程轨迹</div>
|
|
|
|
|
<div>附近队员</div>
|
|
|
|
|
<div>位置分享</div>
|
|
|
|
|
<div>任务派发</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btns">
|
|
|
|
|
<div id='personClick${index}'>行程轨迹</div>
|
|
|
|
|
<div>附近队员</div>
|
|
|
|
|
<div>位置分享</div>
|
|
|
|
|
<div>任务派发</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`,
|
|
|
|
|
{
|
|
|
|
|
className: "popup-pc-person",
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
.openPopup();
|
|
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
|
|
this.markerClick(marker, index);
|
|
|
|
|
}
|
|
|
|
|
} else if (this.actionMap == 2) {
|
|
|
|
|
</div>
|
|
|
|
|
`,
|
|
|
|
|
{
|
|
|
|
|
className: "popup-pc-person",
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
.openPopup();
|
|
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
|
|
this.markerClick(marker, index, item);
|
|
|
|
|
})
|
|
|
|
|
} else if (this.actionMap == 2) {
|
|
|
|
|
|
|
|
|
|
} else if (this.actionMap == 3) {
|
|
|
|
|
|
|
|
|
|
} else if (this.actionMap == 4) {
|
|
|
|
|
|
|
|
|
|
} else if (this.actionMap == 5) {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
point.features.map((item, index) => {
|
|
|
|
|
// if (this.actionMap == 1) {
|
|
|
|
|
// if (item.properties.name == "执法人员") {
|
|
|
|
|
// let marker = L.marker(
|
|
|
|
|
// {
|
|
|
|
|
// lng: item.geometry.coordinates[0],
|
|
|
|
|
// lat: item.geometry.coordinates[1],
|
|
|
|
|
// },
|
|
|
|
|
// { icon: ico1 }
|
|
|
|
|
// )
|
|
|
|
|
// .bindPopup(
|
|
|
|
|
// `
|
|
|
|
|
// <div class="person-popup">
|
|
|
|
|
// <div class="person-title">
|
|
|
|
|
// <div class="title">人员信息</div>
|
|
|
|
|
// <div class="mask" id='monitoring${index}'></div>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div class="person-main">
|
|
|
|
|
// <div class="person-info">
|
|
|
|
|
// <div class="dot"></div>
|
|
|
|
|
// <div class="name">李飞</div>
|
|
|
|
|
// <div class="position">执法1队队员</div>
|
|
|
|
|
// </div>
|
|
|
|
|
// <div class="btns">
|
|
|
|
|
// <div id='personClick${index}'>行程轨迹</div>
|
|
|
|
|
// <div>附近队员</div>
|
|
|
|
|
// <div>位置分享</div>
|
|
|
|
|
// <div>任务派发</div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// `,
|
|
|
|
|
// {
|
|
|
|
|
// className: "popup-pc-person",
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
// .openPopup();
|
|
|
|
|
// marker.addTo(this.mapEvent.mapEvent1);
|
|
|
|
|
// this.markerClick(marker, index);
|
|
|
|
|
// }
|
|
|
|
|
// } else
|
|
|
|
|
if (this.actionMap == 2) {
|
|
|
|
|
let marker;
|
|
|
|
|
if (item.properties.name == "普通事件") {
|
|
|
|
|
marker = L.marker(
|
|
|
|
|
@ -780,7 +863,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
markerClick(marker, index) {
|
|
|
|
|
markerClick(marker, index, item) {
|
|
|
|
|
marker.on("click", (e) => {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
document
|
|
|
|
|
@ -793,7 +876,7 @@ export default {
|
|
|
|
|
document
|
|
|
|
|
.querySelector("#personClick" + index)
|
|
|
|
|
.addEventListener("click", () => {
|
|
|
|
|
this.$refs.personageTrack.open("person");
|
|
|
|
|
this.$refs.personageTrack.open("person",item);
|
|
|
|
|
});
|
|
|
|
|
} else if (this.actionMap == 2) {
|
|
|
|
|
document
|
|
|
|
|
|
