You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
11 KiB
378 lines
11 KiB
<template>
|
|
<div>
|
|
<div class="hello" id="newmap">
|
|
</div>
|
|
<el-dialog :visible.sync="dialogVisible" width="90%" :show-close="false">
|
|
<template slot="title">
|
|
<div class="el-dialog__title">
|
|
<div>事件详情</div>
|
|
<i @click="dialogVisible = false" class="el-icon-close"></i>
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-descriptions :border="false" :column="1" size="mini">
|
|
<el-descriptions-item label="事件编号">2023073024252</el-descriptions-item>
|
|
<el-descriptions-item label="事件标题">下水道结冰堵塞</el-descriptions-item>
|
|
<el-descriptions-item label="事件类型">城市安全类</el-descriptions-item>
|
|
<el-descriptions-item label="事件地址">XXXXXXXXXXXXXXXXXXXX</el-descriptions-item>
|
|
<el-descriptions-item label="发生时间">2023-07-30</el-descriptions-item>
|
|
<el-descriptions-item label="所属网格">网格2</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
<template slot="footer">
|
|
<div class="my-el-dialog__footer">
|
|
<el-button type="primary" @click="dispose">去处理</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import L from "leaflet"
|
|
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
|
|
import oneGJ02 from "@/utils/lib/jiangningqu/1GJ02(1).json"; // 一中队
|
|
import twoGJ02 from "@/utils/lib/jiangningqu/1GJ02(2).json"; // 二中队
|
|
import threeGJ02 from "@/utils/lib/jiangningqu/1GJ02(3).json"; // 三中队
|
|
import fourGJ02 from "@/utils/lib/jiangningqu/1GJ02(4).json"; // 四中队
|
|
|
|
import ruanjianyuan from "@/utils/lib/jiangningqu/1GJ02(5).json"; // 软件园
|
|
import konggang from "@/utils/lib/jiangningqu/1GJ02(6).json"; // 空港开发区
|
|
import onLine from "@/utils/lib/jiangningqu/onLine.json";
|
|
export default {
|
|
name: 'HelloWorld',
|
|
data(){
|
|
return {
|
|
map:null,
|
|
basemap:null,
|
|
mapLayers:{
|
|
mapLayer1:null,
|
|
mapLayer2:null,
|
|
mapLayer3:null,
|
|
},
|
|
dialogVisible:false,
|
|
onLoad:false,
|
|
}
|
|
},
|
|
props: {
|
|
msg: String
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initMap();
|
|
});
|
|
window.addEventListener('message',(e)=>{
|
|
console.log(e,"e");
|
|
// if(e.data)
|
|
this.onLoad = true;
|
|
},false)
|
|
},
|
|
methods:{
|
|
initMap() {
|
|
this.map = L.map("newmap", {
|
|
// crs: L.CRS.Baidu,
|
|
center: [31.953418, 118.850621],
|
|
zoom: 10,
|
|
attributionControl: false,
|
|
zoomControl: false,
|
|
});
|
|
// 电子底图
|
|
this.basemap = L.tileLayer.chinaProvider("GaoDe.Normal.Map", {
|
|
maxZoom: 18,
|
|
minZoom: 5,
|
|
});
|
|
|
|
this.map.addLayer(this.basemap);
|
|
|
|
this.map.createPane("mapLayer1");
|
|
this.map.getPane("mapLayer1").style.zIndex = 501;
|
|
this.map.getPane("mapLayer1").style.pointerEvents = "none";
|
|
|
|
this.map.createPane("mapLayer2");
|
|
this.map.getPane("mapLayer2").style.zIndex = 502;
|
|
this.map.getPane("mapLayer2").style.pointerEvents = "none";
|
|
|
|
this.map.createPane("mapLayer3");
|
|
this.map.getPane("mapLayer3").style.zIndex = 502;
|
|
this.map.getPane("mapLayer3").style.pointerEvents = "none";
|
|
|
|
this.map.createPane("mapLayer4");
|
|
this.map.getPane("mapLayer4").style.zIndex = 502;
|
|
this.map.getPane("mapLayer4").style.pointerEvents = "none";
|
|
|
|
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.map);
|
|
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.map);
|
|
this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.map);
|
|
// 中队
|
|
this.zhongdui();
|
|
// 空港
|
|
this.konggangMap();
|
|
// 软件园
|
|
this.ruanjianyuanMap();
|
|
// 点位信息
|
|
this.eventPoint();
|
|
// console.log(onLine,"在线情况");
|
|
},
|
|
// 中队
|
|
zhongdui() {
|
|
let one = L.geoJSON(oneGJ02, {
|
|
pane: "mapLayer2",
|
|
style: function (feature) {
|
|
return {
|
|
color: "#1E83EB",
|
|
weight: 2,
|
|
fillColor: "#1E83EB",
|
|
fillOpacity: 0.2,
|
|
};
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// console.log(feature,'feature');
|
|
let bounds = layer._bounds;
|
|
let center = bounds.getCenter();
|
|
let myIcon = L.divIcon({
|
|
className: "region-name3",
|
|
html: feature.properties.NAME,
|
|
iconSize: [80, 24],
|
|
iconAnchor: [20, 0],
|
|
});
|
|
// 多边形上的标记点;
|
|
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
|
|
L.marker(center, {
|
|
pane: "mapLayer3",
|
|
icon: myIcon,
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
},
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
let two = L.geoJSON(twoGJ02, {
|
|
pane: "mapLayer2",
|
|
style: function (feature) {
|
|
return {
|
|
color: "#1E83EB",
|
|
weight: 2,
|
|
fillColor: "#1E83EB",
|
|
fillOpacity: 0.2,
|
|
};
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// console.log(feature,'feature');
|
|
let bounds = layer._bounds;
|
|
let center = bounds.getCenter();
|
|
let myIcon = L.divIcon({
|
|
className: "region-name3",
|
|
html: feature.properties.NAME,
|
|
iconSize: [80, 24],
|
|
iconAnchor: [20, 0],
|
|
});
|
|
// 多边形上的标记点;
|
|
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
|
|
L.marker(center, {
|
|
pane: "mapLayer3",
|
|
icon: myIcon,
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
},
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
let three = L.geoJSON(threeGJ02, {
|
|
pane: "mapLayer2",
|
|
style: function (feature) {
|
|
return {
|
|
color: "#1E83EB",
|
|
weight: 2,
|
|
fillColor: "#1E83EB",
|
|
fillOpacity: 0.2,
|
|
};
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// console.log(feature,'feature');
|
|
let bounds = layer._bounds;
|
|
let center = bounds.getCenter();
|
|
let myIcon = L.divIcon({
|
|
className: "region-name3",
|
|
html: feature.properties.NAME,
|
|
iconSize: [80, 24],
|
|
iconAnchor: [20, 0],
|
|
});
|
|
// 多边形上的标记点;
|
|
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
|
|
L.marker(center, {
|
|
pane: "mapLayer3",
|
|
icon: myIcon,
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
},
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
let four = L.geoJSON(fourGJ02, {
|
|
pane: "mapLayer2",
|
|
style: function (feature) {
|
|
return {
|
|
color: "#1E83EB",
|
|
weight: 2,
|
|
fillColor: "#1E83EB",
|
|
fillOpacity: 0.2,
|
|
};
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// console.log(feature,'feature');
|
|
let bounds = layer._bounds;
|
|
let center = bounds.getCenter();
|
|
let myIcon = L.divIcon({
|
|
className: "region-name3",
|
|
html: feature.properties.NAME,
|
|
iconSize: [80, 24],
|
|
iconAnchor: [20, 0],
|
|
});
|
|
// 多边形上的标记点;
|
|
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
|
|
L.marker(center, {
|
|
pane: "mapLayer3",
|
|
icon: myIcon,
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
},
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
const bounds = four.getBounds();
|
|
let center = bounds.getCenter();
|
|
this.map.setView(center, 11);
|
|
},
|
|
// 空港开发区
|
|
konggangMap() {
|
|
let kg = L.geoJSON(konggang, {
|
|
pane: "mapLayer2",
|
|
style: function (feature) {
|
|
return {
|
|
color: "#1E83EB",
|
|
weight: 2,
|
|
fillColor: "#1E83EB",
|
|
fillOpacity: 0.2,
|
|
};
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
let bounds = layer._bounds;
|
|
let center = bounds.getCenter();
|
|
// console.log(feature,'feature');
|
|
let myIcon = L.divIcon({
|
|
className: "region-name3",
|
|
html: feature.properties.NAME,
|
|
iconSize: [150, 24],
|
|
iconAnchor: [45, 0],
|
|
});
|
|
// 多边形上的标记点;
|
|
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
|
|
L.marker(center, {
|
|
pane: "mapLayer3",
|
|
icon: myIcon,
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
},
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
},
|
|
// 软件园
|
|
ruanjianyuanMap() {
|
|
let rjy = L.geoJSON(ruanjianyuan, {
|
|
pane: "mapLayer2",
|
|
style: function (feature) {
|
|
return {
|
|
color: "#1E83EB",
|
|
weight: 2,
|
|
fillColor: "#1E83EB",
|
|
fillOpacity: 0.2,
|
|
};
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
// console.log(feature,'feature');
|
|
let bounds = layer._bounds;
|
|
let center = bounds.getCenter();
|
|
let myIcon = L.divIcon({
|
|
className: "region-name3",
|
|
html: feature.properties.NAME,
|
|
iconSize: [150, 24],
|
|
iconAnchor: [45, 0],
|
|
});
|
|
// 多边形上的标记点;
|
|
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
|
|
L.marker(center, {
|
|
pane: "mapLayer3",
|
|
icon: myIcon,
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
},
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
},
|
|
// 渲染事件点位
|
|
eventPoint(){
|
|
let iconUrl1 = require("@/assets/images/icon1.png");
|
|
let iconUrl2 = require("@/assets/images/icon2.png");
|
|
onLine.features.forEach((element,index) => {
|
|
let marker = L.marker({ lng: element.geometry.coordinates[0], lat: element.geometry.coordinates[1] },
|
|
{
|
|
icon: L.icon({
|
|
iconUrl:element.properties.name == "Icon1" ? iconUrl1 : iconUrl2,
|
|
iconSize: [60,70],
|
|
iconAnchor:[30,70]
|
|
})
|
|
}
|
|
).addTo(this.map)
|
|
this.markerClick(marker, element);
|
|
});
|
|
},
|
|
// 点位的点击事件
|
|
markerClick(marker,element) {
|
|
marker.on("click", (e) => {
|
|
this.dialogVisible = true;
|
|
console.log(element);
|
|
})
|
|
},
|
|
dispose(){
|
|
if(this.onLoad) {
|
|
window.parent.postMessage('go-back','*')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped lang="scss">
|
|
.hello {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
::v-deep .el-dialog {
|
|
top: 15vh;
|
|
border-radius: 5px;
|
|
.el-dialog__header {
|
|
border-bottom: 1px solid #E2E2E2;
|
|
}
|
|
.el-dialog__body {
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
.el-descriptions-row {
|
|
.el-descriptions-item__label {
|
|
font-size: 18px;
|
|
font-family: Source Han Sans CN-Bold;
|
|
font-weight: 400;
|
|
color: #9DA2AB;
|
|
}
|
|
.el-descriptions-item__content {
|
|
font-size: 18px;
|
|
font-family: Source Han Sans CN-Bold;
|
|
font-weight: 400;
|
|
color: #2E2F31;
|
|
}
|
|
}
|
|
}
|
|
.el-dialog__footer {
|
|
.el-button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.el-dialog__title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
div,i {
|
|
font-size: 22px;
|
|
font-family: Source Han Sans CN-Bold;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
</style>
|