|
|
<template>
|
|
|
<div class="map-main">
|
|
|
<!-- <div id="showMap" class="showMap"></div> -->
|
|
|
<!-- <el-amap
|
|
|
ref="map"
|
|
|
:min-zoom="10"
|
|
|
:max-zoom="22"
|
|
|
:center="center"
|
|
|
:zoom="zoom"
|
|
|
@init="init"
|
|
|
@click="click"
|
|
|
class="bmap-demo"
|
|
|
:events="selfMapEv"
|
|
|
>
|
|
|
</el-amap> -->
|
|
|
|
|
|
<el-amap
|
|
|
ref="map"
|
|
|
map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
|
|
|
:center="center"
|
|
|
:zoom="zoom"
|
|
|
:zooms="zooms"
|
|
|
@init="init"
|
|
|
view-mode="3D"
|
|
|
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
|
|
|
class="amap-demo"
|
|
|
>
|
|
|
<el-amap-layer-satellite :visible="visible"></el-amap-layer-satellite>
|
|
|
|
|
|
<!-- 江宁GeoJson文件 -->
|
|
|
<!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
|
|
|
|
|
|
<!-- 测试点位 -->
|
|
|
<el-amap-marker :position="componentMarker.position" :visible="componentMarker.visible" :draggable="componentMarker.draggable">
|
|
|
<div style="padding: 5px 10px;color: #fff; display:flex;" class="testMarker">
|
|
|
<div>{{componentMarker.text}}</div>
|
|
|
<img src="../../../assets/images/3.png" alt="" style="width: 40px">
|
|
|
</div>
|
|
|
</el-amap-marker>
|
|
|
<!-- marker标记点 -->
|
|
|
<el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
|
|
|
<div class="markerStyles">
|
|
|
<div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
|
|
|
<img :src="marker.imgSrc" alt="">
|
|
|
</div>
|
|
|
</el-amap-marker>
|
|
|
|
|
|
<!-- 人员信息弹框 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="personInfo.visible"
|
|
|
anchor="bottom-center"
|
|
|
:offset="[27,0]"
|
|
|
:closeWhenClickMap="true"
|
|
|
:position="personInfo.position"
|
|
|
:visible.sync="personInfo.visible">
|
|
|
<div class="person-popup">
|
|
|
<div class="person-title">
|
|
|
<div class="title">人员信息</div>
|
|
|
<div class="mask" @click="markersClosePopup"></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="travelPath()">行程轨迹</div>
|
|
|
<div>附近队员</div>
|
|
|
<div>位置分享</div>
|
|
|
<div>任务派发</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<!-- 事件弹框 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="eventInfo.visible"
|
|
|
:offset="[27,0]"
|
|
|
:closeWhenClickMap="true"
|
|
|
:position="eventInfo.position"
|
|
|
:visible.sync="eventInfo.visible"
|
|
|
>
|
|
|
<div class="event-popup">
|
|
|
<div class="event-title">
|
|
|
<div class="title">事件信息</div>
|
|
|
<div class="mask" @click="markersClosePopup"></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="eventBtn">
|
|
|
指派
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<!-- 执法车辆弹框 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="carInfo.visible"
|
|
|
:offset="[27,0]"
|
|
|
:closeWhenClickMap="true"
|
|
|
:position="carInfo.position"
|
|
|
:visible.sync="carInfo.visible"
|
|
|
>
|
|
|
<div class="car-popup">
|
|
|
<div class="car-title">
|
|
|
<div class="title">车辆信息</div>
|
|
|
<div class="mask" @click="markersClosePopup"></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="travelPath()">行程轨迹</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<!-- 监控视频弹框 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="monitoringInfo.visible"
|
|
|
:offset="[27,0]"
|
|
|
:closeWhenClickMap="true"
|
|
|
:position="monitoringInfo.position"
|
|
|
:visible.sync="monitoringInfo.visible"
|
|
|
>
|
|
|
<div class="monitoring-popup">
|
|
|
<div class="monitoring-title">
|
|
|
<div class="title">监控视频</div>
|
|
|
<div class="mask" @click="markersClosePopup"></div>
|
|
|
</div>
|
|
|
<div class="monitoring">
|
|
|
<div class="bg">
|
|
|
<img src="@/assets/images/popup/screenshot20230817.png" alt="">
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
<div class="btn" @click="monitorVideos">上墙</div>
|
|
|
<div class="btn">转发</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<!-- 沿街商铺分布 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="shopInfo.visible"
|
|
|
:offset="[27,0]"
|
|
|
:closeWhenClickMap="true"
|
|
|
:position="shopInfo.position"
|
|
|
:visible.sync="shopInfo.visible"
|
|
|
>
|
|
|
<div class="event-popup">
|
|
|
<div class="event-title">
|
|
|
<div class="title">主体基本信息</div>
|
|
|
<div class="mask" @click="markersClosePopup"></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">xxxxxxxxxxxxxxxxxxxxxxxx</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="btn" @click="getShopInfo">
|
|
|
查看载体详情
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
</el-amap>
|
|
|
|
|
|
<div class="left-bg">
|
|
|
<div class="bgt"></div>
|
|
|
</div>
|
|
|
<transition name="left-animationMap">
|
|
|
<div class="map-left" v-if="leftAnimationData">
|
|
|
<map-left :personLine="personLine"></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="请输入关键字" v-model="input">
|
|
|
<i slot="suffix" class="el-icon-search" @click="search"></i>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="laser-positioning">
|
|
|
<span>地图扎点</span>
|
|
|
<img src="@/assets/images/positioning.png" alt="" />
|
|
|
</div>
|
|
|
<div class="creation-task">
|
|
|
<span>任务创建</span>
|
|
|
<img src="@/assets/images/createdTask.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<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="" />
|
|
|
</div>
|
|
|
<div class="rightbg" v-show="actionMap == 1">
|
|
|
<span>执法人员</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list" @click="changeMap(2)">
|
|
|
<div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
|
|
|
<img src="@/assets/images/icon2.png" alt="" />
|
|
|
</div>
|
|
|
<div class="rightbg" v-show="actionMap == 2">
|
|
|
<span>普通事件</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list" @click="changeMap(2)">
|
|
|
<div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
|
|
|
<img src="@/assets/images/icon3.png" alt="" />
|
|
|
</div>
|
|
|
<div class="rightbg" v-show="actionMap == 2">
|
|
|
<span>重点事件</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list" @click="changeMap(3)">
|
|
|
<div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
|
|
|
<img src="@/assets/images/icon4.png" alt="" />
|
|
|
</div>
|
|
|
<div class="rightbg" v-show="actionMap == 3">
|
|
|
<span>执法车辆</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list" @click="changeMap(4)">
|
|
|
<div class="leftbg" :class="actionMap == 4 ? 'action-map' : ''">
|
|
|
<img src="@/assets/images/icon5.png" alt="" />
|
|
|
</div>
|
|
|
<div class="rightbg" v-show="actionMap == 4">
|
|
|
<span>监控视频</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list" @click="changeMap(5)">
|
|
|
<div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
|
|
|
<img src="@/assets/images/icon6.png" alt="" />
|
|
|
</div>
|
|
|
<div class="rightbg" v-show="actionMap == 5">
|
|
|
<span>沿街商铺分布</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<transition name="right-animationMap">
|
|
|
<div class="map-right" v-if="rightAnimationData">
|
|
|
<map-right
|
|
|
:quyuData="quyuData"
|
|
|
:weilanData="weilanData"
|
|
|
:luduanData="luduanData"
|
|
|
:wanggeData="wanggeData"
|
|
|
></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="right-bg">
|
|
|
<div class="bgt"></div>
|
|
|
</div>
|
|
|
<div class="bottom-bg">
|
|
|
<div class="bgt"></div>
|
|
|
</div>
|
|
|
<personage-track ref="personageTrack"></personage-track>
|
|
|
<crew-assign ref="crewAssign"></crew-assign>
|
|
|
<video-wall ref="videoWall"></video-wall>
|
|
|
<shop ref="shop" width="50%" title="商铺详情查看" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
// import L from "leaflet";
|
|
|
|
|
|
//引入坐标系转换插件
|
|
|
// import "proj4";
|
|
|
// import "proj4leaflet";
|
|
|
//引入中国底图插件
|
|
|
// import "@/utils/lib/leaflet.ChineseTmsProviders.js";
|
|
|
//引入坐标系偏移插件
|
|
|
// import "@/utils/lib/leaflet.mapCorrection.min.js";//
|
|
|
// import "@/utils/lib/leaflet-tilelayer-colorizr.js";
|
|
|
// import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
|
|
|
// import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
|
|
|
// import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
|
|
|
// import jiankongshipin from "@/utils/mapJson/jiankongshipin.json"
|
|
|
import point from "@/utils/mapJson/point.json";
|
|
|
|
|
|
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
|
|
|
import detachment1 from "@/utils/mapJson/detachment1.json";
|
|
|
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 mapLeft from "../components/mapLeftContent.vue";
|
|
|
import mapRight from "../components/mapRightContent.vue";
|
|
|
// import mapCentre from "../components/mapCentre.vue"
|
|
|
// 弹窗
|
|
|
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 jiangningwangge from "@/utils/data/江宁开发区网格.json";
|
|
|
|
|
|
import weilan from "@/utils/data/围栏1.json";
|
|
|
import { getCenter } from "@/utils/amap"
|
|
|
import {
|
|
|
regionalsettings,
|
|
|
roadsetting,
|
|
|
fence,
|
|
|
getDeviceList,
|
|
|
levelQywg,
|
|
|
} from "@/api/bigScreenApi";
|
|
|
|
|
|
export default {
|
|
|
name: "myMap",
|
|
|
components: {
|
|
|
mapLeft,
|
|
|
mapRight,
|
|
|
personageTrack,
|
|
|
crewAssign,
|
|
|
videoWall,
|
|
|
shop,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
zoom: 12,
|
|
|
zooms:[10,18],
|
|
|
center: [118.835418, 31.863971], // 121.59996, 31.197646
|
|
|
map: null,
|
|
|
// GeoJson文件的基本样式
|
|
|
polygonOptions: {
|
|
|
strokeColor: '#00C5EC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
|
|
|
fillColor: 'rgba(64,175,255,0.4)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
|
|
|
},
|
|
|
draggable:false, // 是否可拖动
|
|
|
jiangninggeo:jiangninggeo,
|
|
|
componentMarker: {
|
|
|
position: [118.79808425903322, 31.96840071263104],
|
|
|
visible: true,
|
|
|
draggable: false,
|
|
|
text: '1'
|
|
|
},
|
|
|
// 所有点位信息
|
|
|
markers:[],
|
|
|
// 人员弹框信息
|
|
|
personInfo: {
|
|
|
position: [],
|
|
|
info: {},
|
|
|
visible: false,
|
|
|
},
|
|
|
// 事件弹框
|
|
|
eventInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
// 车辆弹框信息
|
|
|
carInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
// 监控视频弹框信息
|
|
|
monitoringInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
// 沿街商铺弹框信息
|
|
|
shopInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
globalMap: null,
|
|
|
basemap: null,
|
|
|
townCenter: [31.863971, 118.835418],
|
|
|
myZoom: 12,
|
|
|
mapLayers: {
|
|
|
mapLayer1: null,
|
|
|
mapLayer2: null,
|
|
|
mapLayer3: null,
|
|
|
mapLayer4: null,
|
|
|
mapLayer5: null,
|
|
|
mapLayer6: null,
|
|
|
mapLayer7: null,
|
|
|
mapLayer8: null,
|
|
|
},
|
|
|
mapEvent: {
|
|
|
mapEvent1: null,
|
|
|
mapEvent2: null,
|
|
|
mapEvent3: null,
|
|
|
mapEvent4: null,
|
|
|
},
|
|
|
mapLayer1: null,
|
|
|
mapLayer2: null,
|
|
|
mapLayer3: null,
|
|
|
mapLayer4: null,
|
|
|
mapLayer5: null,
|
|
|
input: "", // 输入框的值
|
|
|
actionMap: 1, // 默认选中执法人员地图
|
|
|
action: 1, // 切换执法人员/车辆/事件分类/监控视频/沿街商铺分布 控制的值
|
|
|
mypoint: {},
|
|
|
leftAnimationData: true,
|
|
|
rightAnimationData: true,
|
|
|
electronicMap: null, // 电子地图
|
|
|
satelliteMap: null, // 卫星地图
|
|
|
satelliteNoteMap: null, // 卫星地图注记
|
|
|
wanggeData: null, // 区域网格数据
|
|
|
quyuData: null, // 重点区域数据
|
|
|
weilanData: null, // 考勤围栏数据
|
|
|
luduanData: null, // 重点路段
|
|
|
personLine: [], // 在线人员情况
|
|
|
visible: false, // 卫星底图是否显示
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
init(map) {
|
|
|
this.map = map;
|
|
|
// o.setMapStyle('amap://styles/darkblue')
|
|
|
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
// console.log(o.getCenter())
|
|
|
// console.log(this.map,'initMapinitMap');
|
|
|
this.$nextTick(() => {
|
|
|
// 获取网格数据
|
|
|
this.getWanggeGeoJson();
|
|
|
// 获取围栏数据
|
|
|
this.getWeilanGeoJson();
|
|
|
// 获取重点区域数据
|
|
|
this.getQuyuGeoJson();
|
|
|
// 获取重点路段数据
|
|
|
this.getLuduanGeoJson();
|
|
|
// 获取点位
|
|
|
this.getMarkers(1);
|
|
|
AMap.plugin('AMap.GeoJSON',()=>{
|
|
|
let polygon
|
|
|
var geojson = new AMap.GeoJSON({
|
|
|
geoJSON:jiangninggeo,
|
|
|
getPolygon:(geojson, lnglats)=>{
|
|
|
polygon = new AMap.Polygon({
|
|
|
path: lnglats,
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
})
|
|
|
return polygon
|
|
|
},
|
|
|
})
|
|
|
map.add(geojson)
|
|
|
map.setFitView(polygon);
|
|
|
})
|
|
|
});
|
|
|
// console.log(this.$refs.map.$$getInstance(),'TTTTTTT')
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
initMap() {
|
|
|
this.globalMap = L.map("showMap", {
|
|
|
center: this.townCenter, // 地图中心[纬度，经度]
|
|
|
zoom: this.myZoom, // 地图层级
|
|
|
zoomControl: false,
|
|
|
attributionControl: false, // 右下角leaflet图标
|
|
|
doubleClickZoom: false, // 双击放大
|
|
|
scrollWheelZoom: true, // 滚轮放大
|
|
|
dragging: true,
|
|
|
renderer: L.svg(),
|
|
|
});
|
|
|
|
|
|
// 电子底图/百度
|
|
|
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"],
|
|
|
}
|
|
|
).addTo(this.globalMap);
|
|
|
|
|
|
// this.basemap = L.tileLayer(
|
|
|
// "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
|
|
// {
|
|
|
// maxZoom: 18,
|
|
|
// minZoom: 9,
|
|
|
// subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
|
|
// }
|
|
|
// ).addTo(this.globalMap);
|
|
|
|
|
|
//L.tileLayer
|
|
|
// .colorizr(
|
|
|
// "/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
|
|
// {
|
|
|
// maxZoom: 18,
|
|
|
// minZoom: 3,
|
|
|
// colorize: function (pixel) {
|
|
|
// 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
|
|
|
// pixel.r += 30;
|
|
|
// pixel.g += 30;
|
|
|
// pixel.b += 48;
|
|
|
// return pixel;
|
|
|
// },
|
|
|
// }
|
|
|
// )
|
|
|
// .addTo(this.globalMap);
|
|
|
// 电子地图
|
|
|
// this.electronicMap = L.tileLayer
|
|
|
// .chinaProvider("GaoDe.Normal.Map", {
|
|
|
// maxZoom: 18,
|
|
|
// minZoom: 5,
|
|
|
// color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
|
|
|
// })
|
|
|
// // 卫星地图
|
|
|
// 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.basemap);
|
|
|
// L.tileLayer
|
|
|
// .chinaProvider("GaoDe.Satellite.Annotion", {
|
|
|
// maxZoom: 18,
|
|
|
// minZoom: 5,
|
|
|
// })
|
|
|
// .addTo(this.globalMap);
|
|
|
|
|
|
this.globalMap.createPane("mapLayer1");
|
|
|
this.globalMap.getPane("mapLayer1").style.zIndex = 501;
|
|
|
this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapLayer2");
|
|
|
this.globalMap.getPane("mapLayer2").style.zIndex = 502;
|
|
|
this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapLayer3");
|
|
|
this.globalMap.getPane("mapLayer3").style.zIndex = 502;
|
|
|
this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapLayer4");
|
|
|
this.globalMap.getPane("mapLayer4").style.zIndex = 502;
|
|
|
this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapLayer5");
|
|
|
this.globalMap.getPane("mapLayer5").style.zIndex = 502;
|
|
|
this.globalMap.getPane("mapLayer5").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapLayer6");
|
|
|
this.globalMap.getPane("mapLayer6").style.zIndex = 502;
|
|
|
this.globalMap.getPane("mapLayer6").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapLayer7");
|
|
|
this.globalMap.getPane("mapLayer7").style.zIndex = 503;
|
|
|
this.globalMap.getPane("mapLayer7").style.pointerEvents = "none";
|
|
|
|
|
|
this.globalMap.createPane("mapEvent1");
|
|
|
this.globalMap.getPane("mapEvent1").style.zIndex = 504;
|
|
|
this.globalMap.getPane("mapEvent1").style.pointerEvents = "none";
|
|
|
|
|
|
this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
|
|
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer6 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer7 = L.featureGroup().addTo(this.globalMap);
|
|
|
this.mapLayers.mapLayer8 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
|
|
this.globalMap.on("zoomend", (e) => {
|
|
|
let zoom = this.globalMap.getZoom();
|
|
|
// console.log("层级：", zoom);
|
|
|
});
|
|
|
this.globalMap.on("click", (e) => {
|
|
|
// console.log("click：", e);
|
|
|
});
|
|
|
// this.addLayer2();
|
|
|
this.addLayer1();
|
|
|
this.getTem();
|
|
|
// this.addLayer2();
|
|
|
// this.addLayer3();
|
|
|
// this.addLayer4();
|
|
|
// this.addLayer5();
|
|
|
this.addLayer6(); // 重点区域
|
|
|
this.addLayer7(); // 重点路段
|
|
|
|
|
|
this.addLayer8(); // 网格and围栏
|
|
|
|
|
|
// 定位点 118.797442,32.087219 南京站 测试偏移量点位
|
|
|
L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
|
|
|
icon: L.icon({
|
|
|
iconUrl: require("../../../assets/images/3.png"),
|
|
|
iconSize: [38, 43],
|
|
|
iconAnchor: [22, 38],
|
|
|
}),
|
|
|
}).addTo(this.globalMap);
|
|
|
},
|
|
|
// 网格and围栏
|
|
|
addLayer8() {
|
|
|
// 网格
|
|
|
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);
|
|
|
},
|
|
|
});
|
|
|
})
|
|
|
// console.log(res,'网格');
|
|
|
})
|
|
|
// .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();
|
|
|
// this.mapLayers.mapLayer2.clearLayers()
|
|
|
let geojson = L.geoJSON(
|
|
|
jiangninggeo,
|
|
|
{
|
|
|
pane: "mapLayer1",
|
|
|
style: function (feature) {
|
|
|
return {
|
|
|
color: "#00C5EC",
|
|
|
weight: 1,
|
|
|
fillColor: "rgba(64,175,255,0.4)",
|
|
|
fillOpacity: 1,
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
{ className: "jack-s" }
|
|
|
).addTo(this.mapLayers.mapLayer1);
|
|
|
// this.addMark()
|
|
|
// 获取json文件的中心位置
|
|
|
this.mapLayer1 = geojson.getBounds();
|
|
|
// 居中加载json文件
|
|
|
this.globalMap.fitBounds(this.mapLayer1);
|
|
|
},
|
|
|
// 执法人员点位
|
|
|
getTem() {
|
|
|
this.personLine = [];
|
|
|
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);
|
|
|
});
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 各个点位获取
|
|
|
getMarkers(id){
|
|
|
let ico1 = require("../../../assets/images/icon/icon1.png");
|
|
|
let ico2 = require("../../../assets/images/icon/icon2.png");
|
|
|
let ico3 = require("../../../assets/images/icon/icon3.png");
|
|
|
let ico4 = require("../../../assets/images/icon/icon4.png");
|
|
|
let ico5 = require("../../../assets/images/icon/icon5.png");
|
|
|
this.markers = [];
|
|
|
|
|
|
if(id == 1) {
|
|
|
this.personLine = [];
|
|
|
getDeviceList({ imei: "861316060217211" }).then((res) => {
|
|
|
// console.log(res,'点位信息');
|
|
|
if (res.data.obj) {
|
|
|
res.data.obj.forEach((element) => {
|
|
|
if (element.status == 0 || element.status == 1) {
|
|
|
this.personLine.push(element);
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.longitude;
|
|
|
obj.position[1] = element.latitude;
|
|
|
obj.text = element.userName;
|
|
|
obj.imgSrc = ico1;
|
|
|
obj.userId = element.userId;
|
|
|
obj.info = element;
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.$modal.msgError("执法人员" + res.data.msg);
|
|
|
}
|
|
|
})
|
|
|
} else if(id == 2) {
|
|
|
point.features.forEach((element)=>{
|
|
|
if (element.properties.name == "普通事件") {
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
obj.imgSrc = ico2;
|
|
|
this.markers.push(obj)
|
|
|
} else if (element.properties.name == "重点事件") {
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
obj.imgSrc = ico3;
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
} else if(id == 3){
|
|
|
point.features.forEach((element)=>{
|
|
|
if (element.properties.name == "执法车辆") {
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
obj.imgSrc = ico4;
|
|
|
obj.text = element.properties.name;
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
} else if(id == 4){
|
|
|
point.features.forEach((element)=>{
|
|
|
if (element.properties.name == "监控视频") {
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
obj.imgSrc = ico5;
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
} else if(id == 5){
|
|
|
point.features.forEach((element)=>{
|
|
|
if (element.properties.name == "沿街商铺分布") {
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
obj.imgSrc = ico2;
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 点位点击事件
|
|
|
clickMarker(marker,e){
|
|
|
// console.log(marker,e);
|
|
|
if (this.actionMap == 1) {
|
|
|
this.personInfo.position = marker.position;
|
|
|
this.personInfo.info = marker.info;
|
|
|
this.personInfo.visible = true;
|
|
|
} else if (this.actionMap == 2) {
|
|
|
this.eventInfo.position = marker.position;
|
|
|
this.eventInfo.visible = true;
|
|
|
} else if (this.actionMap == 3) {
|
|
|
this.carInfo.position = marker.position;
|
|
|
this.carInfo.visible = true;
|
|
|
} else if (this.actionMap == 4) {
|
|
|
this.monitoringInfo.position = marker.position;
|
|
|
this.monitoringInfo.visible = true;
|
|
|
} else if (this.actionMap == 5) {
|
|
|
this.shopInfo.position = marker.position;
|
|
|
this.shopInfo.visible = true;
|
|
|
}
|
|
|
},
|
|
|
// 点位关闭事件
|
|
|
markersClosePopup(){
|
|
|
if (this.actionMap == 1) {
|
|
|
this.personInfo.visible = false;
|
|
|
} else if(this.actionMap == 2) {
|
|
|
this.eventInfo.visible = false;
|
|
|
} else if(this.actionMap == 3) {
|
|
|
this.carInfo.visible = false;
|
|
|
} else if(this.actionMap == 4) {
|
|
|
this.monitoringInfo.visible = false;
|
|
|
} else if(this,this.actionMap == 5) {
|
|
|
this.shopInfo.visible = false;
|
|
|
}
|
|
|
},
|
|
|
// 执法人员/执法车辆 行程轨迹
|
|
|
travelPath(){
|
|
|
if(this.actionMap == 1) {
|
|
|
this.$refs.personageTrack.open("person", this.personInfo.info);
|
|
|
} else if(this.actionMap == 3) {
|
|
|
this.$refs.personageTrack.open("car");
|
|
|
}
|
|
|
},
|
|
|
// 事件指派
|
|
|
eventBtn(){
|
|
|
this.$refs.crewAssign.open();
|
|
|
},
|
|
|
// 监控视频上墙
|
|
|
monitorVideos(){
|
|
|
this.$refs.videoWall.open();
|
|
|
},
|
|
|
// 商铺详情查看
|
|
|
getShopInfo(){
|
|
|
this.$refs.shop.open();
|
|
|
},
|
|
|
|
|
|
// 网格获取
|
|
|
getWanggeGeoJson(){
|
|
|
levelQywg({ level: 1 }).then((res) => {
|
|
|
this.wanggeData = res.data;
|
|
|
res.data.forEach((element) => {
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
var wangge = new AMap.Polygon({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
strokeOpacity:0,
|
|
|
fillOpacity:0,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text = new AMap.Text({
|
|
|
position: shapeStr.features[1].geometry.coordinates,
|
|
|
anchor: 'bottom-center',
|
|
|
text: element.name,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': 'rgba(181, 207, 255, 0.5)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.map.add(wangge);
|
|
|
this.map.add(text);
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 围栏获取
|
|
|
getWeilanGeoJson(){
|
|
|
fence({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
this.weilanData = res.rows;
|
|
|
res.rows.forEach((element) => {
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
// 圆形围栏
|
|
|
if (shapeStr.features[0].geometry.type == "Point") {
|
|
|
var circle = new AMap.Circle({
|
|
|
center: shapeStr.features[0].geometry.coordinates,
|
|
|
radius: shapeStr.features[0].properties.radius,
|
|
|
strokeOpacity: 0.9,
|
|
|
strokeColor: "#62E1FA",
|
|
|
fillColor: "#62E1FA",
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text = new AMap.Text({
|
|
|
position: shapeStr.features[0].geometry.coordinates,
|
|
|
anchor: 'bottom-center',
|
|
|
offset: [0, 12],
|
|
|
text: element.name,
|
|
|
style: {
|
|
|
'font-size': '14px',
|
|
|
'text-align': 'center',
|
|
|
'color': '#62E1FA',
|
|
|
'line-height': '24px',
|
|
|
'letter-spacing': '2px',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.map.add(circle);
|
|
|
this.map.add(text);
|
|
|
// 多边形围栏
|
|
|
} else if (shapeStr.features[0].geometry.type == "Polygon") {
|
|
|
var wangge = new AMap.Polygon({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
strokeOpacity: 0.9,
|
|
|
strokeColor: "#62E1FA",
|
|
|
fillColor: "#62E1FA",
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
// 获取多边形的中心点
|
|
|
var currentCenter = getCenter(shapeStr.features[0].geometry.coordinates[0]);
|
|
|
var text = new AMap.Text({
|
|
|
position: currentCenter,
|
|
|
anchor: 'bottom-center',
|
|
|
offset: [0, 12],
|
|
|
text: element.name,
|
|
|
style: {
|
|
|
'font-size': '14px',
|
|
|
'text-align': 'center',
|
|
|
'color': '#62E1FA',
|
|
|
'line-height': '24px',
|
|
|
'letter-spacing': '2px',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.map.add(wangge);
|
|
|
this.map.add(text);
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 重点区域获取
|
|
|
getQuyuGeoJson(){
|
|
|
regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
this.quyuData = res.rows;
|
|
|
res.rows.forEach((element) => {
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
var quyu = new AMap.Polygon({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.38,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text = new AMap.Text({
|
|
|
position: shapeStr.features[1].geometry.coordinates,
|
|
|
anchor: 'bottom-center',
|
|
|
text: element.name,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#F44444',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.map.add(quyu);
|
|
|
this.map.add(text);
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 重点路段获取
|
|
|
getLuduanGeoJson(){
|
|
|
roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
this.luduanData = res.rows;
|
|
|
// console.log(res,'resresres');
|
|
|
res.rows.forEach((element) => {
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
// console.log(shapeStr,'shapeStrshapeStrshapeStr');
|
|
|
var luduan = new AMap.Polyline({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
strokeOpacity: 1,
|
|
|
strokeColor: '#46FF77',
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text = new AMap.Text({
|
|
|
position: shapeStr.features[1].geometry.coordinates,
|
|
|
anchor: 'bottom-center',
|
|
|
text: element.name,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#46FF77',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.map.add(luduan);
|
|
|
this.map.add(text);
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
getIcons(name, src) {
|
|
|
let icon = L.divIcon({
|
|
|
className: "divIcon-marker",
|
|
|
html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`,
|
|
|
iconSize: [100, 50],
|
|
|
});
|
|
|
return icon;
|
|
|
},
|
|
|
addMark(obj) {
|
|
|
this.mapEvent.mapEvent1.clearLayers();
|
|
|
let ico1 = require("../../../assets/images/icon/icon1.png");
|
|
|
// let ico1 = L.icon({
|
|
|
// iconUrl: require("../../../assets/images/icon/icon1.png"),
|
|
|
// iconSize: [52, 81],
|
|
|
// });
|
|
|
let ico2 = L.icon({
|
|
|
iconUrl: require("../../../assets/images/icon/icon2.png"),
|
|
|
iconSize: [44, 91],
|
|
|
});
|
|
|
let ico3 = L.icon({
|
|
|
iconUrl: require("../../../assets/images/icon/icon3.png"),
|
|
|
iconSize: [44, 91],
|
|
|
});
|
|
|
let ico4 = L.icon({
|
|
|
iconUrl: require("../../../assets/images/icon/icon4.png"),
|
|
|
iconSize: [45, 95],
|
|
|
});
|
|
|
let ico5 = L.icon({
|
|
|
iconUrl: require("../../../assets/images/icon/icon5.png"),
|
|
|
iconSize: [52, 81],
|
|
|
});
|
|
|
if (this.actionMap == 1) {
|
|
|
obj.forEach((item, index) => {
|
|
|
let marker = L.marker(
|
|
|
{
|
|
|
lng: item.longitude,
|
|
|
lat: item.latitude,
|
|
|
},
|
|
|
{ icon: this.getIcons(item.userName, 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, 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(
|
|
|
{
|
|
|
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" id='monitoring${index}'></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" id="zhipai${index}">
|
|
|
指派
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`,
|
|
|
{
|
|
|
className: "popup-pc-common",
|
|
|
}
|
|
|
)
|
|
|
.openPopup();
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
this.markerClick(marker, index);
|
|
|
} else if (item.properties.name == "重点事件") {
|
|
|
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" id='monitoring${index}'></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" id="zhipai${index}">
|
|
|
指派
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`,
|
|
|
{
|
|
|
className: "popup-pc-emphasis",
|
|
|
}
|
|
|
)
|
|
|
.openPopup();
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
this.markerClick(marker, index);
|
|
|
}
|
|
|
} 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 }
|
|
|
)
|
|
|
.bindPopup(
|
|
|
`
|
|
|
<div class="car-popup">
|
|
|
<div class="car-title">
|
|
|
<div class="title">车辆信息</div>
|
|
|
<div class="mask" id='monitoring${index}'></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" id="carinfo${index}">行程轨迹</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`,
|
|
|
{
|
|
|
className: "popup-pc-car",
|
|
|
}
|
|
|
)
|
|
|
.openPopup();
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
this.markerClick(marker, index);
|
|
|
}
|
|
|
} 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 }
|
|
|
)
|
|
|
.bindPopup(
|
|
|
`
|
|
|
<div class="monitoring-popup">
|
|
|
<div class="monitoring-title">
|
|
|
<div class="title">监控视频</div>
|
|
|
<div class="mask" id='monitoring${index}'></div>
|
|
|
</div>
|
|
|
<div class="monitoring">
|
|
|
<div class="bg">
|
|
|
<img src="@/assets/images/popup/screenshot20230817.png" alt="">
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
<div class="btn" id="monitoringInfo${index}">上墙</div>
|
|
|
<div class="btn">转发</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`,
|
|
|
{
|
|
|
className: "popup-pc-monitoring",
|
|
|
}
|
|
|
)
|
|
|
.openPopup();
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
this.markerClick(marker, index);
|
|
|
}
|
|
|
} else if (this.actionMap == 5) {
|
|
|
if (item.properties.name == "沿街商铺分布") {
|
|
|
let 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" id='monitoring${index}'></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">xxxxxxxxxxxxxxxxxxxxxxxx</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="btn" id="shopInfo">
|
|
|
查看载体详情
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`,
|
|
|
{
|
|
|
className: "popup-pc-common",
|
|
|
}
|
|
|
)
|
|
|
.openPopup();
|
|
|
marker.addTo(this.mapEvent.mapEvent1);
|
|
|
this.markerClick(marker, index);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
markerClick(marker, index, item) {
|
|
|
marker.on("click", (e) => {
|
|
|
this.$nextTick(() => {
|
|
|
document
|
|
|
.querySelector("#monitoring" + index)
|
|
|
.addEventListener("click", function () {
|
|
|
//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
|
|
|
marker.closePopup();
|
|
|
});
|
|
|
if (this.actionMap == 1) {
|
|
|
document
|
|
|
.querySelector("#personClick" + index)
|
|
|
.addEventListener("click", () => {
|
|
|
this.$refs.personageTrack.open("person", item);
|
|
|
});
|
|
|
} else if (this.actionMap == 2) {
|
|
|
document
|
|
|
.querySelector("#zhipai" + index)
|
|
|
.addEventListener("click", () => {
|
|
|
this.$refs.crewAssign.open();
|
|
|
});
|
|
|
// document.querySelector('#zhipai2' + index).addEventListener("click",()=>{
|
|
|
// this.$refs.crewAssign.open();
|
|
|
// })
|
|
|
} else if (this.actionMap == 3) {
|
|
|
document
|
|
|
.querySelector("#carinfo" + index)
|
|
|
.addEventListener("click", () => {
|
|
|
this.$refs.personageTrack.open("car");
|
|
|
});
|
|
|
} else if (this.actionMap == 4) {
|
|
|
document
|
|
|
.querySelector("#monitoringInfo" + index)
|
|
|
.addEventListener("click", () => {
|
|
|
this.$refs.videoWall.open();
|
|
|
});
|
|
|
} else if (this.actionMap == 5) {
|
|
|
document
|
|
|
.querySelector("#shopInfo")
|
|
|
.addEventListener("click", () => {
|
|
|
this.$refs.shop.open();
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
addLayer2() {
|
|
|
this.mapLayers.mapLayer2.clearLayers();
|
|
|
let geojson = L.geoJSON(
|
|
|
detachment1,
|
|
|
{
|
|
|
pane: "mapLayer2",
|
|
|
style: function (feature) {
|
|
|
return {
|
|
|
color: "#00C5EC",
|
|
|
weight: 1,
|
|
|
fillColor: "rgba(255,0,0,0.38)",
|
|
|
fillOpacity: 1,
|
|
|
};
|
|
|
},
|
|
|
onEachFeature: (feature, layer) => {
|
|
|
// console.log(feature.properties.name);
|
|
|
let polygon = L.polygon(layer._latlngs, {
|
|
|
text: feature.properties.name,
|
|
|
textStyle: {
|
|
|
strokeStyle: "#ffffff", //描边颜色
|
|
|
fillStyle: "#00000", //文字颜色
|
|
|
// eslint-disable-next-line quotes
|
|
|
font: "18px 'PuHuiTi-Medium'",
|
|
|
lineWidth: 1, //描边粗细
|
|
|
offsetX: -36, //-字号*4个字/2
|
|
|
offsetY: 9, //字号/2
|
|
|
},
|
|
|
});
|
|
|
polygon.addTo(this.mapLayers.mapLayer2);
|
|
|
},
|
|
|
},
|
|
|
{ className: "jack-s2" }
|
|
|
).addTo(this.mapLayers.mapLayer2);
|
|
|
this.mapLayer2 = geojson.getBounds();
|
|
|
},
|
|
|
addLayer3() {
|
|
|
this.mapLayers.mapLayer3.clearLayers();
|
|
|
let geojson = L.geoJSON(
|
|
|
detachment2,
|
|
|
{
|
|
|
pane: "mapLayer3",
|
|
|
style: function (feature) {
|
|
|
return {
|
|
|
color: "#00C5EC",
|
|
|
weight: 1,
|
|
|
fillColor: "rgba(255,0,0,0.38)",
|
|
|
fillOpacity: 1,
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
{ className: "jack-s3" }
|
|
|
).addTo(this.mapLayers.mapLayer3);
|
|
|
this.mapLayer3 = geojson.getBounds();
|
|
|
},
|
|
|
addLayer4() {
|
|
|
this.mapLayers.mapLayer4.clearLayers();
|
|
|
let geojson = L.geoJSON(
|
|
|
detachment3,
|
|
|
{
|
|
|
pane: "mapLayer4",
|
|
|
style: function (feature) {
|
|
|
return {
|
|
|
color: "#00C5EC",
|
|
|
weight: 1,
|
|
|
fillColor: "rgba(255,0,0,0.38)",
|
|
|
fillOpacity: 1,
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
{ className: "jack-s4" }
|
|
|
).addTo(this.mapLayers.mapLayer4);
|
|
|
// 获取json文件的中心位置
|
|
|
this.mapLayer4 = geojson.getBounds();
|
|
|
},
|
|
|
addLayer5() {
|
|
|
this.mapLayers.mapLayer5.clearLayers();
|
|
|
let geojson = L.geoJSON(
|
|
|
detachment4,
|
|
|
{
|
|
|
pane: "mapLayer5",
|
|
|
style: function (feature) {
|
|
|
return {
|
|
|
color: "rgba(255,0,0,0.38)",
|
|
|
weight: 1,
|
|
|
fillColor: "rgba(255,0,0,0.38)",
|
|
|
fillOpacity: 1,
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
{ className: "jack-s5" }
|
|
|
).addTo(this.mapLayers.mapLayer5);
|
|
|
// 获取json文件的中心位置
|
|
|
this.mapLayer5 = geojson.getBounds();
|
|
|
},
|
|
|
// 重点区域
|
|
|
addLayer6() {
|
|
|
// 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();
|
|
|
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.visible = false
|
|
|
this.map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518")
|
|
|
} else {
|
|
|
this.visible = true;
|
|
|
this.map.setMapStyle("amap://styles/whitesmoke")
|
|
|
}
|
|
|
// 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)
|
|
|
},
|
|
|
// 输入框的搜索框点击事件
|
|
|
search() {},
|
|
|
// 创建任务的点击事件
|
|
|
createdTask() {},
|
|
|
// 地图扎点的点击事件
|
|
|
positioning() {
|
|
|
// this.$refs.videoWall.open();
|
|
|
},
|
|
|
// 切换地图事件
|
|
|
changeMap(id) {
|
|
|
this.actionMap = id;
|
|
|
this.personInfo.visible = false;
|
|
|
this.eventInfo.visible = false;
|
|
|
this.carInfo.visible = false;
|
|
|
this.monitoringInfo.visible = false;
|
|
|
this.shopInfo.visible = false;
|
|
|
this.getMarkers(id)
|
|
|
// if (id == 1) {
|
|
|
// this.getTem();
|
|
|
// } else {
|
|
|
// this.addMark();
|
|
|
// }
|
|
|
},
|
|
|
// 隐藏地图左侧
|
|
|
leftAnimation() {
|
|
|
setTimeout(() => {
|
|
|
this.leftAnimationData = !this.leftAnimationData;
|
|
|
}, 200);
|
|
|
this.$emit("leftAnimationAction");
|
|
|
},
|
|
|
// 隐藏地图右侧
|
|
|
rightAnimation() {
|
|
|
setTimeout(() => {
|
|
|
this.rightAnimationData = !this.rightAnimationData;
|
|
|
}, 200);
|
|
|
this.$emit("rightAnimationAction");
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.map-main {
|
|
|
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;
|
|
|
top: 0;
|
|
|
width: 11px;
|
|
|
height: 95%;
|
|
|
padding: 20px 0 0 0;
|
|
|
z-index: 600;
|
|
|
.bgt {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-image: url("../../../assets/images/broadside-bg.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.right-bg {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 20px;
|
|
|
width: 11px;
|
|
|
height: 95%;
|
|
|
padding: 20px 0;
|
|
|
z-index: 600;
|
|
|
.bgt {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-image: url("../../../assets/images/broadside2-bg.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.bottom-bg {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
width: 100%;
|
|
|
height: 20px;
|
|
|
z-index: 600;
|
|
|
.bgt {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-image: url("../../../assets/images/bottom-bg.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.map-left {
|
|
|
position: absolute;
|
|
|
left: 47px;
|
|
|
top: 10px;
|
|
|
width: 460px;
|
|
|
height: 95%;
|
|
|
z-index: 600;
|
|
|
box-sizing: border-box;
|
|
|
// background: rgba(216,216,216,0.05);
|
|
|
}
|
|
|
.left-image {
|
|
|
z-index: 600;
|
|
|
position: absolute;
|
|
|
left: 527px;
|
|
|
bottom: 50%;
|
|
|
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;
|
|
|
right: 527px;
|
|
|
bottom: 50%;
|
|
|
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;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.middle-top-left {
|
|
|
z-index: 600;
|
|
|
position: absolute;
|
|
|
left: 537px;
|
|
|
top: 10px;
|
|
|
display: flex;
|
|
|
.input-keyword {
|
|
|
::v-deep .el-input {
|
|
|
background-image: url("../../../assets/images/bgtongyong.png");
|
|
|
background-size: 100% 100%;
|
|
|
.el-input__inner {
|
|
|
background-color: transparent;
|
|
|
width: 222px;
|
|
|
height: 38px;
|
|
|
color: #fff;
|
|
|
border: none;
|
|
|
}
|
|
|
.el-input__inner::placeholder {
|
|
|
/* 在这里添加你想要修改的 placeholder 样式 */
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
font-weight: 400;
|
|
|
color: #d3eef2;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-input__suffix {
|
|
|
line-height: 44px;
|
|
|
color: #d3eef2;
|
|
|
right: 10px;
|
|
|
cursor: pointer;
|
|
|
.el-icon-search:before {
|
|
|
font-size: 24px;
|
|
|
color: #d3eef2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.laser-positioning,
|
|
|
.creation-task {
|
|
|
// height: 38px;
|
|
|
width: 130px;
|
|
|
margin-left: 8px;
|
|
|
background-image: url("../../../assets/images/bgtongyong.png");
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 9px 13px;
|
|
|
cursor: pointer;
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
font-weight: 400;
|
|
|
color: #d3eef2;
|
|
|
line-height: 20px;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
img {
|
|
|
width: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.middle-top-left2 {
|
|
|
left: 67px;
|
|
|
}
|
|
|
.middle-bottom-left {
|
|
|
// 490
|
|
|
position: absolute;
|
|
|
left: 537px;
|
|
|
bottom: 40px;
|
|
|
// width: 200px;
|
|
|
z-index: 600;
|
|
|
padding: 5px 10px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.list {
|
|
|
margin-top: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.leftbg {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-image: url("../../../assets/images/iconbg2.png");
|
|
|
background-size: 100% 100%;
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
cursor: pointer;
|
|
|
img {
|
|
|
width: 20px;
|
|
|
}
|
|
|
}
|
|
|
.action-map {
|
|
|
background-image: url("../../../assets/images/iconbg1.png");
|
|
|
}
|
|
|
.rightbg {
|
|
|
padding-left: 6px;
|
|
|
margin-left: 2px;
|
|
|
background-image: url("../../../assets/images/right-icon.png");
|
|
|
width: 115px;
|
|
|
height: 36px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
font-family: "Source Han Sans CN-Bold";
|
|
|
font-weight: 700;
|
|
|
color: #ffffff;
|
|
|
line-height: 26px;
|
|
|
text-shadow: 0px 0px 5px #0077ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.middle-bottom-left2 {
|
|
|
left: 67px;
|
|
|
}
|
|
|
.middle-bottom-right {
|
|
|
position: absolute;
|
|
|
bottom: 40px;
|
|
|
right: 537px;
|
|
|
z-index: 600;
|
|
|
.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";
|
|
|
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);
|
|
|
&:nth-child(1) {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
.action {
|
|
|
color: #fff;
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
