|
|
|
|
@ -93,7 +93,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<transition name="right-animationMap">
|
|
|
|
|
<div class="map-right" v-if="rightAnimationData">
|
|
|
|
|
<map-right></map-right>
|
|
|
|
|
<map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData"></map-right>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
@ -133,30 +133,6 @@
|
|
|
|
|
<crew-assign ref="crewAssign"></crew-assign>
|
|
|
|
|
<video-wall ref="videoWall"></video-wall>
|
|
|
|
|
<shop ref="shop" width="50%" title="商铺详情查看" />
|
|
|
|
|
<person-popup
|
|
|
|
|
v-if="personPopup"
|
|
|
|
|
v-on:personClose="personClose"
|
|
|
|
|
v-on:getRoute="presoninfo"
|
|
|
|
|
:point="mypoint"
|
|
|
|
|
></person-popup>
|
|
|
|
|
<event-popup
|
|
|
|
|
v-if="eventPopup"
|
|
|
|
|
v-on:eventClose="eventClose"
|
|
|
|
|
v-on:zhipai="personzhipai"
|
|
|
|
|
:point="mypoint"
|
|
|
|
|
></event-popup>
|
|
|
|
|
<car-popup
|
|
|
|
|
v-if="carPopup"
|
|
|
|
|
v-on:carClose="carClose"
|
|
|
|
|
v-on:carinfo="carinfo"
|
|
|
|
|
:point="mypoint"
|
|
|
|
|
></car-popup>
|
|
|
|
|
<monitoring-popup
|
|
|
|
|
v-if="monitoringPopup"
|
|
|
|
|
v-on:monitoringClose="monitoringClose"
|
|
|
|
|
v-on:monitoringInfo="monitoringInfo"
|
|
|
|
|
:point="mypoint"
|
|
|
|
|
></monitoring-popup>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
@ -181,8 +157,9 @@ import detachment2 from "@/utils/mapJson/detachment2.json";
|
|
|
|
|
import detachment3 from "@/utils/mapJson/detachment3.json";
|
|
|
|
|
import detachment4 from "@/utils/mapJson/detachment4.json";
|
|
|
|
|
|
|
|
|
|
import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
|
|
|
|
|
import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
|
|
|
|
|
// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
|
|
|
|
|
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import mapLeft from "../components/mapLeftContent.vue";
|
|
|
|
|
import mapRight from "../components/mapRightContent.vue";
|
|
|
|
|
@ -192,16 +169,12 @@ import personageTrack from "../../components/personagetrack/index.vue";
|
|
|
|
|
import crewAssign from "../../components/crewAssign/index.vue";
|
|
|
|
|
import videoWall from "../../components/videoWall/index.vue";
|
|
|
|
|
import shop from "../../components/shop/index.vue";
|
|
|
|
|
import personPopup from "../../components/personPopup/index.vue";
|
|
|
|
|
import eventPopup from "../../components/eventPopup/index.vue";
|
|
|
|
|
import carPopup from "../../components/carPopup/index.vue";
|
|
|
|
|
import monitoringPopup from "../../components/monitoringPopup/index.vue";
|
|
|
|
|
|
|
|
|
|
import jiangningwangge from "@/utils/data/江宁开发区网格.json";
|
|
|
|
|
|
|
|
|
|
import weilan from "@/utils/data/围栏1.json";
|
|
|
|
|
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import { regionalsettings, roadsetting, fence } from "@/api/bigScreenApi"
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "myMap",
|
|
|
|
|
@ -212,10 +185,6 @@ export default {
|
|
|
|
|
crewAssign,
|
|
|
|
|
videoWall,
|
|
|
|
|
shop,
|
|
|
|
|
personPopup,
|
|
|
|
|
eventPopup,
|
|
|
|
|
carPopup,
|
|
|
|
|
monitoringPopup,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -246,14 +215,17 @@ export default {
|
|
|
|
|
mapLayer5: null,
|
|
|
|
|
input: "", // 输入框的值
|
|
|
|
|
actionMap: 1, // 默认选中执法人员地图
|
|
|
|
|
action: 1, // 切换执法人员/车辆/事件分类/监控视频控制的值
|
|
|
|
|
personPopup: false,
|
|
|
|
|
eventPopup: false,
|
|
|
|
|
carPopup: false,
|
|
|
|
|
monitoringPopup: false,
|
|
|
|
|
action: 1, // 切换执法人员/车辆/事件分类/监控视频/沿街商铺分布 控制的值
|
|
|
|
|
mypoint: {},
|
|
|
|
|
leftAnimationData: true,
|
|
|
|
|
rightAnimationData: true,
|
|
|
|
|
electronicMap: null, // 电子地图
|
|
|
|
|
satelliteMap: null, // 卫星地图
|
|
|
|
|
satelliteNoteMap:null, // 卫星地图注记
|
|
|
|
|
wanggeData: null, // 重点网格数据
|
|
|
|
|
quyuData: null, // 重点区域数据
|
|
|
|
|
weilanData: null, // 考勤围栏数据
|
|
|
|
|
luduanData: null, // 重点路段
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
@ -304,15 +276,28 @@ export default {
|
|
|
|
|
// }
|
|
|
|
|
// )
|
|
|
|
|
// .addTo(this.globalMap);
|
|
|
|
|
|
|
|
|
|
L.tileLayer
|
|
|
|
|
// 电子地图
|
|
|
|
|
this.electronicMap = L.tileLayer
|
|
|
|
|
.chinaProvider("GaoDe.Normal.Map", {
|
|
|
|
|
maxZoom: 18,
|
|
|
|
|
minZoom: 5,
|
|
|
|
|
color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
|
|
|
|
|
})
|
|
|
|
|
.addTo(this.globalMap);
|
|
|
|
|
|
|
|
|
|
// 卫星地图
|
|
|
|
|
this.satelliteMap = L.tileLayer
|
|
|
|
|
.chinaProvider("GaoDe.Satellite.Map", {
|
|
|
|
|
maxZoom: 18,
|
|
|
|
|
minZoom: 5,
|
|
|
|
|
color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
|
|
|
|
|
})
|
|
|
|
|
// 卫星地图注记
|
|
|
|
|
this.satelliteNoteMap = L.tileLayer
|
|
|
|
|
.chinaProvider("GaoDe.Satellite.Annotion", {
|
|
|
|
|
maxZoom: 18,
|
|
|
|
|
minZoom: 5,
|
|
|
|
|
color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
|
|
|
|
|
})
|
|
|
|
|
this.globalMap.addLayer(this.electronicMap)
|
|
|
|
|
// L.tileLayer
|
|
|
|
|
// .chinaProvider("GaoDe.Satellite.Annotion", {
|
|
|
|
|
// maxZoom: 18,
|
|
|
|
|
@ -345,11 +330,11 @@ export default {
|
|
|
|
|
this.globalMap.getPane("mapLayer6").style.pointerEvents = "none";
|
|
|
|
|
|
|
|
|
|
this.globalMap.createPane("mapLayer7");
|
|
|
|
|
this.globalMap.getPane("mapLayer7").style.zIndex = 502;
|
|
|
|
|
this.globalMap.getPane("mapLayer7").style.zIndex = 503;
|
|
|
|
|
this.globalMap.getPane("mapLayer7").style.pointerEvents = "none";
|
|
|
|
|
|
|
|
|
|
this.globalMap.createPane("mapEvent1");
|
|
|
|
|
this.globalMap.getPane("mapEvent1").style.zIndex = 503;
|
|
|
|
|
this.globalMap.getPane("mapEvent1").style.zIndex = 504;
|
|
|
|
|
this.globalMap.getPane("mapEvent1").style.pointerEvents = "none";
|
|
|
|
|
|
|
|
|
|
this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
|
@ -377,20 +362,21 @@ export default {
|
|
|
|
|
// this.addLayer3();
|
|
|
|
|
// this.addLayer4();
|
|
|
|
|
// this.addLayer5();
|
|
|
|
|
this.addLayer6();
|
|
|
|
|
this.addLayer7();
|
|
|
|
|
this.addLayer6(); // 重点区域
|
|
|
|
|
this.addLayer7(); // 重点路段
|
|
|
|
|
|
|
|
|
|
this.addLayer8();
|
|
|
|
|
this.addLayer8(); // 网格and围栏
|
|
|
|
|
|
|
|
|
|
// 定位点 118.797442,32.087219 南京站
|
|
|
|
|
// 定位点 118.797442,32.087219 南京站 测试偏移量点位
|
|
|
|
|
L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
|
|
|
|
|
icon: L.icon({
|
|
|
|
|
iconUrl: require("../../../assets/images/3.png"),
|
|
|
|
|
iconSize: [38, 38],
|
|
|
|
|
iconSize: [38, 43],
|
|
|
|
|
iconAnchor: [22, 38],
|
|
|
|
|
}),
|
|
|
|
|
}).addTo(this.globalMap);
|
|
|
|
|
},
|
|
|
|
|
// 网格and围栏
|
|
|
|
|
addLayer8() {
|
|
|
|
|
// 加载geojson
|
|
|
|
|
let geojson = L.geoJSON(jiangningwangge, {
|
|
|
|
|
@ -422,34 +408,66 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
// .addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
|
|
|
|
|
// 加载geojson
|
|
|
|
|
let geojson2 = L.geoJSON(weilan, {
|
|
|
|
|
pane: "mapLayer2",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "#62E1FA",
|
|
|
|
|
weight: 1,
|
|
|
|
|
fillColor: "#62E1FA",
|
|
|
|
|
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-name5",
|
|
|
|
|
html: text,
|
|
|
|
|
iconSize: [150, 24],
|
|
|
|
|
iconAnchor: [75, 12],
|
|
|
|
|
});
|
|
|
|
|
// 多边形上的标记点;
|
|
|
|
|
L.marker(center, {
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
},
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
// 加载围栏
|
|
|
|
|
fence({ pageNum: 1, pageSize: 100 }).then(res=>{
|
|
|
|
|
// console.log(res,'考勤围栏');
|
|
|
|
|
this.weilanData = res.rows;
|
|
|
|
|
res.rows.forEach(element=>{
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
|
|
// 圆形围栏
|
|
|
|
|
if(shapeStr.features[0].geometry.type == "Point") {
|
|
|
|
|
let geojson2 = L.circle([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
|
|
|
|
|
radius: shapeStr.features[0].properties.radius,
|
|
|
|
|
color: "#62E1FA",
|
|
|
|
|
weight: 1,
|
|
|
|
|
fillColor: "#62E1FA",
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
pane: "mapLayer2"
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
let myIcon = L.divIcon({
|
|
|
|
|
className: "land-name5",
|
|
|
|
|
html: element.name,
|
|
|
|
|
iconSize: [150, 24],
|
|
|
|
|
iconAnchor: [75, 12],
|
|
|
|
|
});
|
|
|
|
|
// 多边形上的标记点;
|
|
|
|
|
L.marker([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
|
|
|
|
|
} else if(shapeStr.features[0].geometry.type == "Polygon") {
|
|
|
|
|
// 多边形围栏
|
|
|
|
|
let geojson2 = L.geoJSON(shapeStr.features[0], {
|
|
|
|
|
pane: "mapLayer2",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "#62E1FA",
|
|
|
|
|
weight: 1,
|
|
|
|
|
fillColor: "#62E1FA",
|
|
|
|
|
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-name5",
|
|
|
|
|
html: element.name,
|
|
|
|
|
iconSize: [150, 24],
|
|
|
|
|
iconAnchor: [75, 12],
|
|
|
|
|
});
|
|
|
|
|
// 多边形上的标记点;
|
|
|
|
|
L.marker(center, {
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
},
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer8);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
addLayer1() {
|
|
|
|
|
this.mapLayers.mapLayer1.clearLayers();
|
|
|
|
|
@ -763,12 +781,7 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
markerClick(marker, index) {
|
|
|
|
|
// document.getElementsByName('monitoring').addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
|
|
|
|
|
// console.log("点击");
|
|
|
|
|
// })
|
|
|
|
|
// console.log(marker);
|
|
|
|
|
marker.on("click", (e) => {
|
|
|
|
|
// console.log(e);
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
document
|
|
|
|
|
.querySelector("#monitoring" + index)
|
|
|
|
|
@ -811,43 +824,8 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// this.mypoint = e.containerPoint;
|
|
|
|
|
// if(this.actionMap == 1) {
|
|
|
|
|
// // this.personPopup = true;
|
|
|
|
|
|
|
|
|
|
// } else if(this.actionMap == 2) {
|
|
|
|
|
// // this.eventPopup = true;
|
|
|
|
|
// } else if(this.actionMap == 3) {
|
|
|
|
|
// // this.carPopup = true
|
|
|
|
|
// } else if(this.actionMap == 4){
|
|
|
|
|
// // this.monitoringPopup = true;
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
personClose() {
|
|
|
|
|
this.personPopup = false;
|
|
|
|
|
},
|
|
|
|
|
eventClose() {
|
|
|
|
|
this.eventPopup = false;
|
|
|
|
|
},
|
|
|
|
|
carClose() {
|
|
|
|
|
this.carPopup = false;
|
|
|
|
|
},
|
|
|
|
|
monitoringClose() {
|
|
|
|
|
this.monitoringPopup = false;
|
|
|
|
|
},
|
|
|
|
|
// personzhipai(){
|
|
|
|
|
// this.$refs.crewAssign.open();
|
|
|
|
|
// },
|
|
|
|
|
// presoninfo(){
|
|
|
|
|
// this.$refs.personageTrack.open('person');
|
|
|
|
|
// },
|
|
|
|
|
// carinfo(){
|
|
|
|
|
// this.$refs.personageTrack.open('car');
|
|
|
|
|
// },
|
|
|
|
|
// monitoringInfo(){
|
|
|
|
|
// this.$refs.videoWall.open();
|
|
|
|
|
// },
|
|
|
|
|
addLayer2() {
|
|
|
|
|
this.mapLayers.mapLayer2.clearLayers();
|
|
|
|
|
let geojson = L.geoJSON(
|
|
|
|
|
@ -942,72 +920,94 @@ export default {
|
|
|
|
|
// 获取json文件的中心位置
|
|
|
|
|
this.mapLayer5 = geojson.getBounds();
|
|
|
|
|
},
|
|
|
|
|
// 重点区域
|
|
|
|
|
addLayer6() {
|
|
|
|
|
this.mapLayers.mapLayer5.clearLayers();
|
|
|
|
|
let geojson = L.geoJSON(
|
|
|
|
|
zhongdianquyu,
|
|
|
|
|
{
|
|
|
|
|
pane: "mapLayer6",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "rgba(255,0,0,0.38)",
|
|
|
|
|
weight: 1,
|
|
|
|
|
fillColor: "rgba(255,0,0,0.38)",
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{ className: "jack-s6" }
|
|
|
|
|
).addTo(this.mapLayers.mapLayer6);
|
|
|
|
|
// 获取json文件的中心位置
|
|
|
|
|
let bounds = geojson.getBounds();
|
|
|
|
|
let latlng = bounds.getCenter();
|
|
|
|
|
|
|
|
|
|
let myIcon1 = L.divIcon({
|
|
|
|
|
className: "region-name1",
|
|
|
|
|
html: "重点区域",
|
|
|
|
|
iconSize: [120, 68],
|
|
|
|
|
});
|
|
|
|
|
L.marker(latlng, {
|
|
|
|
|
pane: "mapLayer4",
|
|
|
|
|
icon: myIcon1,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer6);
|
|
|
|
|
// this.mapLayers.mapLayer5.clearLayers();
|
|
|
|
|
regionalsettings({ pageNum: 1, pageSize: 100 }).then(res=>{
|
|
|
|
|
// console.log(res,'重点区域');
|
|
|
|
|
this.quyuData = res.rows;
|
|
|
|
|
res.rows.forEach(element => {
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr)
|
|
|
|
|
let geojson = L.geoJSON(
|
|
|
|
|
shapeStr.features[0],
|
|
|
|
|
{
|
|
|
|
|
pane: "mapLayer6",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "rgba(255,0,0,0.38)",
|
|
|
|
|
weight: 1,
|
|
|
|
|
fillColor: "rgba(255,0,0,0.38)",
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{ className: "jack-s6" }
|
|
|
|
|
).addTo(this.mapLayers.mapLayer6);
|
|
|
|
|
|
|
|
|
|
let myIcon1 = L.divIcon({
|
|
|
|
|
className: "region-name1",
|
|
|
|
|
html: element.name,
|
|
|
|
|
iconSize: [120, 68],
|
|
|
|
|
});
|
|
|
|
|
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
|
|
|
|
|
pane: "mapLayer4",
|
|
|
|
|
icon: myIcon1,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer6);
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
// this.mapLayer5 = geojson.getBounds()
|
|
|
|
|
},
|
|
|
|
|
// 重点路段
|
|
|
|
|
addLayer7() {
|
|
|
|
|
this.mapLayers.mapLayer7.clearLayers();
|
|
|
|
|
let geojson = L.geoJSON(
|
|
|
|
|
zhongdianluduan,
|
|
|
|
|
{
|
|
|
|
|
pane: "mapLayer7",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "#00C5EC",
|
|
|
|
|
weight: 0,
|
|
|
|
|
fillColor: "rgba(70,255,119,0.38)",
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{ className: "jack-s7" }
|
|
|
|
|
).addTo(this.mapLayers.mapLayer7);
|
|
|
|
|
// 获取json文件的中心位置
|
|
|
|
|
// this.mapLayer5 = geojson.getBounds()
|
|
|
|
|
let bounds = geojson.getBounds();
|
|
|
|
|
let latlng = bounds.getCenter();
|
|
|
|
|
|
|
|
|
|
let myIcon1 = L.divIcon({
|
|
|
|
|
className: "region-name2",
|
|
|
|
|
html: "重点路段",
|
|
|
|
|
iconSize: [120, 68],
|
|
|
|
|
});
|
|
|
|
|
L.marker(latlng, {
|
|
|
|
|
pane: "mapLayer4",
|
|
|
|
|
icon: myIcon1,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer7);
|
|
|
|
|
// this.mapLayers.mapLayer7.clearLayers();
|
|
|
|
|
roadsetting({ pageNum: 1, pageSize: 100 }).then(res=>{
|
|
|
|
|
// console.log(res,'重点路段');
|
|
|
|
|
this.luduanData = res.rows;
|
|
|
|
|
res.rows.forEach(element=>{
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr)
|
|
|
|
|
let geojson = L.geoJSON(
|
|
|
|
|
shapeStr.features[0],
|
|
|
|
|
{
|
|
|
|
|
pane: "mapLayer7",
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {
|
|
|
|
|
color: "#46FF77",
|
|
|
|
|
// weight: 0,
|
|
|
|
|
// fillColor: "rgba(70,255,119,0.38)",
|
|
|
|
|
// fillOpacity: 1,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{ className: "jack-s7" }
|
|
|
|
|
).addTo(this.mapLayers.mapLayer7);
|
|
|
|
|
// 获取json文件的中心位置
|
|
|
|
|
// this.mapLayer5 = geojson.getBounds()
|
|
|
|
|
// let bounds = geojson.getBounds();
|
|
|
|
|
// let latlng = bounds.getCenter();
|
|
|
|
|
|
|
|
|
|
let myIcon1 = L.divIcon({
|
|
|
|
|
className: "region-name2",
|
|
|
|
|
html: element.name,
|
|
|
|
|
iconSize: [120, 68],
|
|
|
|
|
});
|
|
|
|
|
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
|
|
|
|
|
pane: "mapLayer4",
|
|
|
|
|
icon: myIcon1,
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer7);
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
actionBtn(id) {
|
|
|
|
|
this.action = id;
|
|
|
|
|
if(id == 1) {
|
|
|
|
|
this.globalMap.removeLayer(this.satelliteMap);
|
|
|
|
|
this.globalMap.removeLayer(this.satelliteNoteMap);
|
|
|
|
|
this.globalMap.addLayer(this.electronicMap);
|
|
|
|
|
} else {
|
|
|
|
|
this.globalMap.removeLayer(this.electronicMap);
|
|
|
|
|
this.globalMap.addLayer(this.satelliteMap);
|
|
|
|
|
this.globalMap.addLayer(this.satelliteNoteMap);
|
|
|
|
|
}
|
|
|
|
|
// console.log(id)
|
|
|
|
|
// this.$emit('actionBtn',id);
|
|
|
|
|
// if(id == 1){
|
|
|
|
|
@ -1027,41 +1027,37 @@ export default {
|
|
|
|
|
// 切换地图事件
|
|
|
|
|
changeMap(id) {
|
|
|
|
|
this.actionMap = id;
|
|
|
|
|
this.personPopup = false;
|
|
|
|
|
this.eventPopup = false;
|
|
|
|
|
this.carPopup = false;
|
|
|
|
|
this.monitoringPopup = false;
|
|
|
|
|
this.addMark();
|
|
|
|
|
switch (id) {
|
|
|
|
|
case 1:
|
|
|
|
|
this.addMark("执法人员");
|
|
|
|
|
break;
|
|
|
|
|
case 2:
|
|
|
|
|
this.addMark("普通事件");
|
|
|
|
|
break;
|
|
|
|
|
case 3:
|
|
|
|
|
this.addMark("执法车辆");
|
|
|
|
|
break;
|
|
|
|
|
case 4:
|
|
|
|
|
this.addMark("监控视频");
|
|
|
|
|
break;
|
|
|
|
|
case 5:
|
|
|
|
|
this.addMark("沿街商铺分布");
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// switch (id) {
|
|
|
|
|
// case 1:
|
|
|
|
|
// this.addMark("执法人员");
|
|
|
|
|
// break;
|
|
|
|
|
// case 2:
|
|
|
|
|
// this.addMark("普通事件");
|
|
|
|
|
// break;
|
|
|
|
|
// case 3:
|
|
|
|
|
// this.addMark("执法车辆");
|
|
|
|
|
// break;
|
|
|
|
|
// case 4:
|
|
|
|
|
// this.addMark("监控视频");
|
|
|
|
|
// break;
|
|
|
|
|
// case 5:
|
|
|
|
|
// this.addMark("沿街商铺分布");
|
|
|
|
|
// break;
|
|
|
|
|
// default:
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
leftAnimation() {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.leftAnimationData = !this.leftAnimationData;
|
|
|
|
|
}, 800);
|
|
|
|
|
}, 200);
|
|
|
|
|
this.$emit("leftAnimationAction");
|
|
|
|
|
},
|
|
|
|
|
rightAnimation() {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.rightAnimationData = !this.rightAnimationData;
|
|
|
|
|
}, 1000);
|
|
|
|
|
}, 200);
|
|
|
|
|
this.$emit("rightAnimationAction");
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
