suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

隐藏侧边

Browse Source
dhy
吕天方 2 years ago
parent 3fc9db99bc
commit 5cb5dcb7aa
1 changed files with 280 additions and 109 deletions
Show Stats Download Patch File Download Diff File

389
src/views/bigScreen/map/index.vue
Unescape View File

@ -1,39 +1,17 @@
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-14 15:46:26
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 21:32:14
-->
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-14 15:46:26
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 16:15:51
-->
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-14 15:46:26
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 15:40:05
-->
<template>
<div class="map-main">
<div id="showMap" class="showMap"></div>
<div class="left-bg">
<div class="bgt"></div>
</div>
<div class="map-left">
<map-left></map-left>
</div>
<img src="@/assets/images/action-left.png" alt="" class="left-image">
<img src="@/assets/images/action-right.png" alt="" class="right-image">
<div class="middle-top-left">
<transition name="left-animationMap">
<div class="map-left" v-if="leftAnimationData">
<map-left></map-left>
</div>
</transition>
<img :src="leftAnimationData ? require('@/assets/images/action-left.png'):require('@/assets/images/action-right.png')" alt="" :class="!leftAnimationData ? 'left-image2':'left-image'" @click="leftAnimation()">
<div class="middle-top-left" :class="!leftAnimationData ? 'middle-top-left2':'middle-top-left'">
<div class="input-keyword">
<el-input
placeholder="请输入关键字"
@ -50,7 +28,7 @@
<img src="@/assets/images/createdTask.png" alt="">
</div>
</div>
<div class="middle-bottom-left">
<div class="middle-bottom-left" :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'">
<div class="list" @click="changeMap(1)">
<div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
<img src="@/assets/images/icon1.png" alt="">
@ -92,15 +70,20 @@
</div>
</div>
</div>
<div class="middle-bottom-right">
<transition name="right-animationMap">
<div class="map-right" v-if="rightAnimationData">
<map-right></map-right>
</div>
</transition>
<img :src="rightAnimationData ? require('@/assets/images/action-right.png') : require('@/assets/images/action-left.png')" alt="" :class="!rightAnimationData ? 'right-image2' : 'right-image'" @click="rightAnimation()">
<div class="middle-bottom-right" :class="!rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'">
<div class="btn-action">
<span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
<span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
</div>
</div>
<div class="map-right">
<map-right></map-right>
</div>
<div class="right-bg">
<div class="bgt"></div>
</div>
@ -119,12 +102,12 @@
<script>
import L from 'leaflet'
//引入坐标系转换插件
import 'proj4'
import 'proj4leaflet'
// import 'proj4'
// import 'proj4leaflet'
//引入中国底图插件
import '@/utils/lib/leaflet.ChineseTmsProviders.js'
// import '@/utils/lib/leaflet.ChineseTmsProviders.js'
//引入坐标系偏移插件
import '@/utils/lib/leaflet.mapCorrection.min.js'
// import '@/utils/lib/leaflet.mapCorrection.min.js'
// import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
// import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
// import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
@ -182,6 +165,8 @@ export default {
carPopup:false,
monitoringPopup:false,
mypoint:{},
leftAnimationData:true,
rightAnimationData:true,
}
},
methods:{
@ -197,10 +182,14 @@ export default {
})
// 电子底图/百度
this.basemap = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
maxZoom: 18,
minZoom: 5,
})
this.basemap = L.tileLayer(
'https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw',
{
maxZoom: 18,
minZoom: 9,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
}
)
this.globalMap.addLayer(this.basemap);
this.globalMap.createPane('mapLayer1')
@ -294,73 +283,197 @@ export default {
point.features.map((item)=>{
if(this.actionMap == 1) {
if(item.properties.name == "执法人员"){
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1})
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" @click="close()"></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 @click="getRoute()">行程轨迹</div>
<div>附近队员</div>
<div>位置分享</div>
<div>任务派发</div>
</div>
</div>
</div>
`,
{
className: 'popup-pc-person'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker)
// this.markerClick(marker)
}
} else if(this.actionMap == 2) {
let marker
if(item.properties.name == "普通事件") {
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico2})
.bindPopup(
`
<div class="event-popup">
<div class="event-title">
<div class="title">事件信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="event-main">
<div class="event-info">
<div class="dot"></div>
<div class="name">事件名称：</div>
<div class="position">XXX小区乱堆杂物</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件类别：</div>
<div class="position">暴露垃圾</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件地址：</div>
<div class="position">XX街道XX小区</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">描述：</div>
<div class="position">XXXXXXXXXXXXXX</div>
</div>
<div class="btn" @click="zhipai()">
指派
</div>
</div>
</div>
`,
{
className: 'popup-pc-common'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker)
// this.markerClick(marker)
} else if(item.properties.name == "重点事件"){
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3})
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup(
`
<div class="event-popup">
<div class="event-title">
<div class="title">事件信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="event-main">
<div class="event-info">
<div class="dot"></div>
<div class="name">事件名称：</div>
<div class="position">XXX小区乱堆杂物</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件类别：</div>
<div class="position">暴露垃圾</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件地址：</div>
<div class="position">XX街道XX小区</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">描述：</div>
<div class="position">XXXXXXXXXXXXXX</div>
</div>
<div class="btn" @click="zhipai()">
指派
</div>
</div>
</div>
`,
{
className: 'popup-pc-emphasis'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker)
// this.markerClick(marker)
}
} else if(this.actionMap == 3) {
if(item.properties.name == "执法车辆"){
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4})
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4}).bindPopup(
`
<div class="car-popup">
<div class="car-title">
<div class="title">车辆信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="car-main">
<div class="car-info">
<div class="dot"></div>
<div class="name">执法一队1号车</div>
<div class="position">苏A568974</div>
</div>
<div class="btn" @click="carinfo">行程轨迹</div>
</div>
</div>
`,
{
className: 'popup-pc-car'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker)
// this.markerClick(marker)
}
} else if(this.actionMap == 4) {
if(item.properties.name == "监控视频"){
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5})
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5}).bindPopup(
`
<div class="monitoring-popup">
<div class="monitoring-title">
<div class="title">监控视频</div>
<div class="mask" id='monitoring' onclick="close()"></div>
</div>
<div class="monitoring">
<div class="bg">
<img src="@/assets/images/popup/screenshot20230817.png" alt="">
</div>
<div class="btns">
<div class="btn" @click="monitoringInfo()">上墙</div>
<div class="btn">转发</div>
</div>
</div>
</div>
`,
{
className: 'popup-pc-monitoring'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker)
}
}
})
// let geojson = L.geoJSON(cheshi,{
// onEachFeature: (feature, layer) => {
// console.log(feature)
// console.log(layer)
// let bounds = layer._latlng
// console.log(bounds)
// let marker
// // let center = bounds.getCenter()
// if(feature.properties.name == "监控视频"){
// marker = L.marker(bounds,{icon:ico5})
// } else if(feature.properties.name == "执法人员") {
// marker = L.marker({lng:118.74576613991007,lat:31.8391346298732},{icon:ico1})
// } else if(feature.properties.name == "普通事件") {
// marker = L.marker(bounds,{icon:ico2})
// } else if(feature.properties.name == "重点事件") {
// marker = L.marker(bounds,{icon:ico3})
// } else if(feature.properties.name == "执法车辆") {
// marker = L.marker(bounds,{icon:ico4})
// }
// marker.addTo(this.mapEvent.mapEvent1)
// }
// }).addTo(this.mapEvent.mapEvent1)
},
markerClick(marker){
marker.on('click', e => {
console.log(e);
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;
}
})
console.log(document.getElementById('monitoring'))
document.getElementById('monitoring').onclick=function(){
console.log('123123')
}
// marker.on('click', e => {
// console.log(e);
// 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;
@ -515,6 +628,18 @@ export default {
return;
}
},
leftAnimation(){
setTimeout(()=>{
this.leftAnimationData = !this.leftAnimationData;
},1000)
this.$emit('leftAnimationAction')
},
rightAnimation(){
setTimeout(()=>{
this.rightAnimationData = !this.rightAnimationData;
},1000)
this.$emit('rightAnimationAction')
},
},
mounted(){
this.$nextTick(()=>{
@ -529,6 +654,24 @@ export default {
width: 100%;
height: 100%;
position: relative;
.left-animationMap-enter-active, .left-animationMap-leave-active {
transition: all 1s;
}
.left-animationMap-enter, .left-animationMap-leave-to {
/* 进入的初始状态和离开的最终状态 */
opacity: 0;
transform: translateX(-510px);
}
.right-animationMap-enter-active, .right-animationMap-leave-active {
transition: all 1s;
}
.right-animationMap-enter, .right-animationMap-leave-to {
/* 进入的初始状态和离开的最终状态 */
opacity: 0;
transform: translateX(510px);
}
.left-bg {
position: absolute;
left: 20px;
@ -555,7 +698,7 @@ export default {
.bgt {
width: 100%;
height: 100%;
background-image: url('../../../assets/images/broadside-bg.png');
background-image: url('../../../assets/images/broadside2-bg.png');
background-size: 100% 100%;
}
}
@ -582,7 +725,7 @@ export default {
height: 95%;
z-index: 600;
box-sizing: border-box;
background: rgba(216,216,216,0.05);
// background: rgba(216,216,216,0.05);
}
.left-image {
z-index: 600;
@ -592,6 +735,14 @@ export default {
width: 40px;
cursor: pointer;
}
.left-image2 {
z-index: 600;
position: absolute;
left: 67px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.right-image {
z-index: 600;
position: absolute;
@ -600,11 +751,20 @@ export default {
width: 40px;
cursor: pointer;
}
.right-image2 {
z-index: 600;
position: absolute;
right: 67px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.map-right {
position: absolute;
right: 47px;
top: 10px;
width: 460px;
height: 95%;
z-index: 600;
// margin: 10px 17px 0 10px;
// padding: 20px 0;
@ -618,10 +778,8 @@ export default {
display: flex;
.input-keyword {
::v-deep .el-input {
background: rgba(0,60,116,0.2);
box-shadow: inset 0px 0px 6px 0px #00C2FF;
border-radius: 2px;
border: 1px solid rgba(181,207,255,0.5);
background-image: url('../../../assets/images/bgtongyong.png');
background-size: 100% 100%;
.el-input__inner {
background-color: transparent;
width: 222px;
@ -632,7 +790,7 @@ export default {
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-family: Source Han Sans CN-Regular;
font-weight: 400;
color: #D3EEF2;
line-height: 20px;
@ -651,11 +809,10 @@ export default {
}
.laser-positioning,.creation-task {
// height: 38px;
width: 130px;
margin-left: 8px;
background: rgba(0,60,116,0.6);
box-shadow: inset 0px 0px 6px 0px #00C2FF;
border-radius: 2px;
border: 1px solid rgba(181,207,255,0.5);
background-image: url('../../../assets/images/bgtongyong.png');
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
@ -663,7 +820,7 @@ export default {
cursor: pointer;
span {
font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-family: Source Han Sans CN-Regular;
font-weight: 400;
color: #D3EEF2;
line-height: 20px;
@ -674,7 +831,11 @@ export default {
}
}
}
.middle-top-left2 {
left: 67px;
}
.middle-bottom-left {
// 490
position: absolute;
left: 537px;
bottom: 40px;
@ -713,7 +874,7 @@ export default {
align-items: center;
span {
font-size: 16px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-family: Source Han Sans CN-Bold;
font-weight: 700;
color: #FFFFFF;
line-height: 26px;
@ -722,6 +883,9 @@ export default {
}
}
}
.middle-bottom-left2 {
left: 67px;
}
.middle-bottom-right {
position: absolute;
bottom: 40px;
@ -730,38 +894,45 @@ export default {
.btn-action {
display: flex;
span {
width: 142px;
height: 40px;
flex: 1;
display: inline-block;
text-align: center;
background-image: url('../../../assets/images/changeBtn2.png');
background-size: 100% 100%;
padding: 10px 33px;
font-size: 16px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-family: Source Han Sans CN-Regular;
font-weight: 400;
line-height: 20px;
color: #D3EEF2;
cursor: pointer;
background: transparent;
box-shadow: inset 0px 0px 6px 0px #00C2FF;
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid rgba(181,207,255,0.5);
// background: transparent;
// box-shadow: inset 0px 0px 6px 0px #00C2FF;
// border-radius: 2px 2px 2px 2px;
// opacity: 1;
// border: 1px solid rgba(181,207,255,0.5);
&:nth-child(1) {
margin-right: 10px;
}
}
.action {
color: #fff;
background-color: rgba(255,125,64,0.8);
box-shadow: inset 0px 0px 13px 0px #F6B463;
border-radius: 2px 2px 2px 2px;
border: 1px solid rgba(181,207,255,0.5);
background-image: url('../../../assets/images/changeBtn1.png.png');
background-size: 100% 100%;
}
}
}
.middle-bottom-right2 {
right: 67px;
}
.showMap {
width: 100%;
height: 100%;
background-color: #00192e;
}
}

Write Preview
Loading…
Cancel
Save