|
|
<template>
|
|
|
<div class="Map_Zhongdianrenyuan_box">
|
|
|
<div class="Map_Zhongdianrenyuan_box_map" id="Map_Zhongdianrenyuan_box_map">
|
|
|
<el-amap ref="map" map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="center" :zoom="zoom"
|
|
|
:zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)" @init="init"
|
|
|
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
|
|
|
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
|
|
|
@click="JSONclick" />
|
|
|
|
|
|
<el-amap-ellipse :center="circleCenter" :radius="radius" :visible="true" :editable="false" :draggable="false"
|
|
|
@click="ellipseclick" :zIndex="8000" :fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
|
|
|
|
|
|
|
|
|
<el-amap-ellipse :center="circleCenterTow" :radius="radius" :visible="true" :editable="false" :draggable="false"
|
|
|
@click="ellipseclick" :zIndex="8000":fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
|
|
|
<!-- 点 -->
|
|
|
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
|
|
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 2 || radio == 1">
|
|
|
<div class="markerStyles">
|
|
|
<!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
|
|
|
<img :src="marker.imgSrc" alt="">
|
|
|
</div>
|
|
|
</el-amap-marker>
|
|
|
|
|
|
<!-- 飞机 -->
|
|
|
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[0, 0]" :closeWhenClickMap="true"
|
|
|
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
|
|
|
<div class="person-popup person-popupShow">
|
|
|
<div class="person-title">
|
|
|
<div class="title">无人机信息</div>
|
|
|
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
|
|
|
</div>
|
|
|
<div class="person-main">
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">设备编号：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "131654656" }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">当前位置：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "长沙镇XX街XX号" }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">飞行任务：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "XXXXXXXXXXXXXX" }}</div>
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
<div @click="guojilook(1)">查看轨迹</div>
|
|
|
<div @click="guojilook(2)">历史任务</div>
|
|
|
<!-- <div @click="watchClick">强制观摩</div>
|
|
|
<div @click="taskClick">任务派发</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<el-amap-info-window v-if="personInfoTow.visible" anchor="bottom-center" :offset="[0, 0]"
|
|
|
:closeWhenClickMap="true" :position="personInfoTow.position" :visible.sync="personInfoTow.visible"
|
|
|
:zIndex="900">
|
|
|
<div class="person-popup person-popupmini">
|
|
|
<div class="person-title">
|
|
|
<div class="title">无人机巡查事件</div>
|
|
|
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
|
|
|
</div>
|
|
|
<div class="person-main">
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">事件地点：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "长沙镇XX街XX号" }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">发生时间：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "2024.09.01 15:00:00" }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">事件照片：</div>
|
|
|
</div>
|
|
|
<div class="position">
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">是否处理：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "已处理" }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">处理时间：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ "2024.09.01 15:20:00" }}</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
</el-amap>
|
|
|
</div>
|
|
|
<!-- 图层展示 -->
|
|
|
<div>
|
|
|
<ZhanshiTubiao showType="地空协同" @markersradio="markersradio"></ZhanshiTubiao>
|
|
|
</div>
|
|
|
<leftrightEcahts></leftrightEcahts>
|
|
|
<righttEcahts></righttEcahts>
|
|
|
<MapWrenjidialog ref="MapWrenjidialog"></MapWrenjidialog>
|
|
|
<MapWrenjiLishidialog ref="MapWrenjiLishidialog"></MapWrenjiLishidialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
|
|
// 线路
|
|
|
import roadline1 from "@/assets/mapjson/Chaangshazhen/road-line.geojson"
|
|
|
//
|
|
|
import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
|
|
|
// 点
|
|
|
import roadpoint from "@/assets/mapjson/Chaangshazhen/road-point.geojson"
|
|
|
// 点
|
|
|
import roadpoint2 from "@/assets/mapjson/Chaangshazhen/road-point2.geojson"
|
|
|
|
|
|
// 人员分布图标
|
|
|
import ZhanshiTubiao from "@/views/components/ZhanshiTubiao/index.vue"
|
|
|
import MapWrenjidialog from "@/views/components/MapWrenjidialog/index.vue"
|
|
|
import MapWrenjiLishidialog from "@/views/components/MapWrenjiLishidialog/index.vue"
|
|
|
|
|
|
// 左右两边图
|
|
|
import leftrightEcahts from "@/views/Map/Map_Dikong/leftrightEcahts/index.vue"
|
|
|
import righttEcahts from "@/views/Map/Map_Dikong/righttEcahts/index.vue"
|
|
|
|
|
|
export default {
|
|
|
name: "map-view",
|
|
|
components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, MapWrenjidialog, MapWrenjiLishidialog },
|
|
|
data() {
|
|
|
return {
|
|
|
zoom: 11.8,
|
|
|
zooms: [3, 20],
|
|
|
center: [121.298563, 32.451807],
|
|
|
map: null,
|
|
|
draggable: false,
|
|
|
visible: true,
|
|
|
changshazhen: changshazhen,
|
|
|
roadline1: roadline1,
|
|
|
roadline2: roadline2,
|
|
|
roadpoint: roadpoint,
|
|
|
roadpoint2: roadpoint2,
|
|
|
circleCenter: [121.211641, 32.4569487],
|
|
|
circleCenterTow: [121.338284, 32.388852],
|
|
|
radius: [1800, 700],
|
|
|
// 面图层样式
|
|
|
polygonOptions: {
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF'
|
|
|
},
|
|
|
// 线图层样式
|
|
|
polyline: {
|
|
|
path: roadline1,
|
|
|
editable: false,
|
|
|
visible: true,
|
|
|
draggable: false
|
|
|
},
|
|
|
// 人员点
|
|
|
markers: [
|
|
|
{
|
|
|
position: [121.183697866903292, 32.460227941215508],
|
|
|
id: 1,
|
|
|
name: "飞机",
|
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
|
imgSrc: require("@/assets/images/icon/weurneji.png")
|
|
|
},
|
|
|
{
|
|
|
position: [121.235712627230569, 32.447218823220901],
|
|
|
id: 2,
|
|
|
name: "对讲",
|
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
|
imgSrc: require("@/assets/images/icon/xuncha.png")
|
|
|
},
|
|
|
{
|
|
|
position: [121.318413448767714, 32.411908360092688],
|
|
|
id: 3,
|
|
|
name: "飞机",
|
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
|
imgSrc: require("@/assets/images/icon/weurneji.png")
|
|
|
},
|
|
|
{
|
|
|
position: [121.359751265879749, 32.38683020264299],
|
|
|
id: 4,
|
|
|
name: "对讲",
|
|
|
content: '<i class="el-icon-user-solid bendiren"></i>',
|
|
|
imgSrc: require("@/assets/images/icon/xuncha.png")
|
|
|
},
|
|
|
],
|
|
|
|
|
|
// 选项
|
|
|
radio: 1,
|
|
|
personInfo: {
|
|
|
position: [],
|
|
|
info: {},
|
|
|
visible: false,
|
|
|
},
|
|
|
personInfoTow: {
|
|
|
position: [],
|
|
|
info: {},
|
|
|
visible: false,
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
},
|
|
|
unmounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
ellipseclick() {
|
|
|
|
|
|
},
|
|
|
getMap() {
|
|
|
// bmap vue component
|
|
|
console.log('$refs: ', this.$refs.map.$$getInstance())
|
|
|
},
|
|
|
init(map) {
|
|
|
this.map = map;
|
|
|
// o.setMapStyle('amap://styles/darkblue')
|
|
|
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
console.log(this.map.getCenter())
|
|
|
console.log(this.$refs.map.$$getInstance())
|
|
|
},
|
|
|
// 地图点击事件
|
|
|
click() {
|
|
|
alert('click map')
|
|
|
},
|
|
|
// 面图层样式
|
|
|
JSONclick: (e) => {
|
|
|
console.log('click event: ', e);
|
|
|
},
|
|
|
JSONclick2: (e) => {
|
|
|
console.log('click event2: ', e);
|
|
|
},
|
|
|
JSONclick3: (e) => {
|
|
|
console.log('click event3: ', e);
|
|
|
},
|
|
|
//mark点
|
|
|
clickArrayMarker(e) {
|
|
|
console.log(e);
|
|
|
if (e.name == "飞机") {
|
|
|
this.personInfo.visible = true
|
|
|
this.personInfo.position = e.position
|
|
|
this.personInfo.info = e.info
|
|
|
}
|
|
|
if (e.name == "对讲") {
|
|
|
this.personInfoTow.visible = true
|
|
|
this.personInfoTow.position = e.position
|
|
|
this.personInfoTow.info = e.info
|
|
|
}
|
|
|
|
|
|
},
|
|
|
guojilook(type) {
|
|
|
if (type == 1) {
|
|
|
this.$refs.MapWrenjidialog.open("person")
|
|
|
|
|
|
}
|
|
|
if (type == 2) {
|
|
|
this.$refs.MapWrenjiLishidialog.open("person")
|
|
|
|
|
|
}
|
|
|
},
|
|
|
markersClosePopup() {
|
|
|
this.personInfo.visible = false;
|
|
|
this.personInfoTow.visible = false;
|
|
|
|
|
|
},
|
|
|
// 切换人员
|
|
|
markersradio(type) {
|
|
|
console.log(type);
|
|
|
|
|
|
this.radio = type
|
|
|
}
|
|
|
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang='scss'>
|
|
|
.Map_Zhongdianrenyuan_box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
position: relative;
|
|
|
|
|
|
.Map_Zhongdianrenyuan_box_map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
::v-deep {
|
|
|
.bendiren {
|
|
|
color: greenyellow;
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
|
|
|
.waidi {
|
|
|
color: goldenrod;
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
::v-deep .person-popupmini {
|
|
|
min-height: 270px;
|
|
|
|
|
|
.position {
|
|
|
img {
|
|
|
width: 150px
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style>
|
