|
|
<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"
|
|
|
v-loading="mapLoading"
|
|
|
element-loading-background="rgba(11, 34, 72, 0.8)"
|
|
|
@init="init"
|
|
|
: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> -->
|
|
|
|
|
|
<!-- marker标记点 -->
|
|
|
<el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :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="[-10,-123]"
|
|
|
: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="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">姓名：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ personInfo.info.userName }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">联系方式：</div>
|
|
|
</div>
|
|
|
<div class="position">18868887888</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">执法仪</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">江苏省南京市江宁区XX街XX号</div>
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
<div @click="travelPath()">行程轨迹</div>
|
|
|
<div>附近队员</div>
|
|
|
<div>位置分享</div>
|
|
|
<div @click="watchClick">强制观摩</div>
|
|
|
<div>任务派发</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<!-- 事件弹框 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="eventInfo.visible"
|
|
|
:offset="[-10,-113]"
|
|
|
: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="[-10,-148]"
|
|
|
: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="[-10,-94]"
|
|
|
:closeWhenClickMap="true"
|
|
|
:position="monitoringInfo.position"
|
|
|
:visible.sync="monitoringInfo.visible"
|
|
|
>
|
|
|
<div class="monitoring-popup">
|
|
|
<div class="monitoring-title">
|
|
|
<div class="title">{{ monitoringInfo.info.name }}</div>
|
|
|
<div class="mask" @click="markersClosePopup"></div>
|
|
|
</div>
|
|
|
<div class="monitoring">
|
|
|
<div class="monitoring-list">
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">监控点名称：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ monitoringInfo.info.name }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">在线状态：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
|
|
|
</div>
|
|
|
<div class="person-info">
|
|
|
<div class="info-left">
|
|
|
<div class="dot"></div>
|
|
|
<div class="name">安装位置：</div>
|
|
|
</div>
|
|
|
<div class="position">{{ monitoringInfo.info.installPlace }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
<div class="btn" @click="monitorVideos(monitoringInfo.info.status)">上墙</div>
|
|
|
<div class="btn" @click="copyUrl()">转发</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-amap-info-window>
|
|
|
|
|
|
<!-- 沿街商铺分布 -->
|
|
|
<el-amap-info-window
|
|
|
v-if="shopInfo.visible"
|
|
|
:offset="[-10,-94]"
|
|
|
: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" :carLine="carLine" @realTimeLocationClick="realTimeLocationClick"></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" @click="positioning">
|
|
|
<span>地图扎点</span>
|
|
|
<img src="@/assets/images/positioning.png" alt="" />
|
|
|
</div>
|
|
|
<div class="creation-task" @click="createdTask">
|
|
|
<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"
|
|
|
@divClick="divClick"
|
|
|
></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> -->
|
|
|
<alone-video ref="aloneVideo"></alone-video>
|
|
|
<shop ref="shop" width="50%" title="商铺详情查看" />
|
|
|
<new-event ref="newEvent" @cancel="cancel"></new-event>
|
|
|
<!-- 强制观摩弹框 -->
|
|
|
<el-dialog
|
|
|
:visible.sync="showVideo"
|
|
|
width="45%"
|
|
|
title="强制观摩"
|
|
|
:show-close="false"
|
|
|
:destroy-on-close="true"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
custom-class="travel"
|
|
|
>
|
|
|
<template slot="title">
|
|
|
<div class="closeClick">
|
|
|
<div class="headline" text="title123kmalskdnj">
|
|
|
<div class="headlinetitle" text="强制观摩">强制观摩</div>
|
|
|
</div>
|
|
|
<div class="close" @click="videoClose"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="watch-video-play">
|
|
|
<video id='flvvideo' autoplay controls class="flv-js"></video>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</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 OneGJ02 from "@/utils/mapJson/1GJ02.json";
|
|
|
import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
|
|
|
import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
|
|
|
import FourGJ02 from "@/utils/mapJson/4GJ02.json";
|
|
|
import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
|
|
|
import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.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 gridding from "@/utils/mapJson/中队小网格.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 aloneVideo from "../../components/video/index.vue"
|
|
|
import newEvent from "../../components/newEvent/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,
|
|
|
videoSurveillance,
|
|
|
getVideoPageEq,
|
|
|
getPreviewURLs,
|
|
|
getCarManageList,
|
|
|
getStreetShopList,
|
|
|
} from "@/api/bigScreenApi";
|
|
|
import flvjs from "flv.js";
|
|
|
import axios from "axios";
|
|
|
|
|
|
export default {
|
|
|
name: "myMap",
|
|
|
components: {
|
|
|
mapLeft,
|
|
|
mapRight,
|
|
|
personageTrack,
|
|
|
crewAssign,
|
|
|
videoWall,
|
|
|
shop,
|
|
|
aloneVideo,
|
|
|
newEvent
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
zoom: 12,
|
|
|
zooms:[10,18],
|
|
|
center: [118.835418, 31.863971], // 121.59996, 31.197646
|
|
|
map: null,
|
|
|
componentMarker: {
|
|
|
visible: true,
|
|
|
},
|
|
|
// 所有点位信息
|
|
|
markers:[],
|
|
|
// 人员弹框信息
|
|
|
personInfo: {
|
|
|
position: [],
|
|
|
info: {},
|
|
|
visible: false,
|
|
|
},
|
|
|
// 事件弹框
|
|
|
eventInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
// 车辆弹框信息
|
|
|
carInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
// 监控视频弹框信息
|
|
|
monitoringInfo: {
|
|
|
position: [],
|
|
|
info:{},
|
|
|
visible: false,
|
|
|
},
|
|
|
// 沿街商铺弹框信息
|
|
|
shopInfo: {
|
|
|
position: [],
|
|
|
visible: false,
|
|
|
},
|
|
|
isClickLingtedPolygonId:false,
|
|
|
lightedPolygon:null,
|
|
|
lightedText:null,
|
|
|
highlightedPolygonId:null,
|
|
|
layers: {
|
|
|
layer:null,
|
|
|
text: null,
|
|
|
layer2:null,
|
|
|
layer3:null,
|
|
|
layer4:null,
|
|
|
text1:null,
|
|
|
markers:null,
|
|
|
},
|
|
|
showVideo:false,
|
|
|
videoCondition: {
|
|
|
destID: '9999112301',
|
|
|
msgType: 1,
|
|
|
},
|
|
|
player:null,
|
|
|
timer:null,
|
|
|
isPositioning:false,
|
|
|
markerOffset: [-35,-123],
|
|
|
mapLoading: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: [], // 在线人员情况
|
|
|
carLine: [], // 车辆情况
|
|
|
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.layers.layer = new AMap.OverlayGroup(); // 一级网格
|
|
|
this.layers.layer2 = new AMap.OverlayGroup(); // 二级网格
|
|
|
this.layers.layer3 = new AMap.OverlayGroup(); // 围栏、路段、区域、及文本
|
|
|
this.layers.layer4 = new AMap.OverlayGroup(); // 地图扎点
|
|
|
this.layers.text = new AMap.OverlayGroup(); // 一级网格文本
|
|
|
this.layers.text1 = new AMap.OverlayGroup(); // 二级网格文本
|
|
|
this.layers.markers = new AMap.OverlayGroup(); // 监控视频markers
|
|
|
// this.layers.layer2.setzIndex(10);
|
|
|
// this.layers.layer3.setzIndex(9);
|
|
|
this.$nextTick(() => {
|
|
|
var geojson1 = new AMap.Polygon({
|
|
|
path:OneGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text1 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: OneGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson2 = new AMap.Polygon({
|
|
|
path:TwoGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text2 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: TwoGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson3 = new AMap.Polygon({
|
|
|
path:ThreeGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text3 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: ThreeGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson4 = new AMap.Polygon({
|
|
|
path:FourGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
|
|
|
var text4 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: FourGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson5 = new AMap.Polygon({
|
|
|
path:kaifaqu.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text5 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: kaifaqu.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
|
|
|
var geojson6 = new AMap.Polygon({
|
|
|
path:ruanjianyuan.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text6 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: ruanjianyuan.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
|
|
|
|
|
|
this.layers.layer.addOverlay(geojson1);
|
|
|
this.layers.text.addOverlay(text1);
|
|
|
this.layers.layer.addOverlay(geojson2);
|
|
|
this.layers.text.addOverlay(text2);
|
|
|
this.layers.layer.addOverlay(geojson3);
|
|
|
this.layers.text.addOverlay(text3);
|
|
|
this.layers.layer.addOverlay(geojson4);
|
|
|
this.layers.text.addOverlay(text4);
|
|
|
this.layers.layer.addOverlay(geojson5);
|
|
|
this.layers.text.addOverlay(text5);
|
|
|
this.layers.layer.addOverlay(geojson6);
|
|
|
this.layers.text.addOverlay(text6);
|
|
|
this.map.add(this.layers.layer);
|
|
|
this.map.add(this.layers.text);
|
|
|
map.setFitView();
|
|
|
// 一级网格
|
|
|
// this.stairWangge();
|
|
|
// 获取二级网格数据
|
|
|
this.getWanggeGeoJson();
|
|
|
// 获取围栏数据
|
|
|
this.getWeilanGeoJson();
|
|
|
// 获取重点区域数据
|
|
|
this.getQuyuGeoJson();
|
|
|
// 获取重点路段数据
|
|
|
this.getLuduanGeoJson();
|
|
|
|
|
|
// 修改图层组的层级在点击到围栏，区域，路段时监听网格时就能触发点击事件
|
|
|
// this.layers.layer2.setOptions({ zIndex: 100 });
|
|
|
// this.layers.layer3.setOptions({ zIndex: 99 });
|
|
|
this.layers.layer2.on('click', (e)=>{
|
|
|
// console.log(e,'this.layers.layer2的点击事件');
|
|
|
if(this.isPositioning) {
|
|
|
// console.log(e,'eeeeeeee');
|
|
|
var marker = new AMap.Marker({
|
|
|
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
|
|
|
anchor: 'bottom-center',
|
|
|
})
|
|
|
this.layers.layer4.addOverlay(marker);
|
|
|
map.add(this.layers.layer4)
|
|
|
let addressName
|
|
|
var lng = e.lnglat.lng + '';
|
|
|
var lat = e.lnglat.lat + '';
|
|
|
// let clickPoint = this.layers.layer2.getOverlays();
|
|
|
// for (var i = 0; i < clickPoint.length; i++) {
|
|
|
// console.log(clickPoint[i],'点击的地址');
|
|
|
// }
|
|
|
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
|
|
|
params:{
|
|
|
key: "5f4a2c045cffa20551a0300c31c1ee78",
|
|
|
location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
|
|
|
extensions: 'all',
|
|
|
// batch: true,
|
|
|
}
|
|
|
}).then(response=>{
|
|
|
// console.log(response,'response');
|
|
|
addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
|
|
|
// console.log(addressName,'this.addressName');
|
|
|
if(this.layers.layer4) {
|
|
|
// e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
|
|
|
this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName,meshOccurs:e.target.getExtData().name,marker:marker});
|
|
|
this.isPositioning = false;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if(this.layers.layer3) {
|
|
|
this.layers.layer3.hide();
|
|
|
}
|
|
|
if(this.layers.text1){
|
|
|
this.layers.text1.hide();
|
|
|
}
|
|
|
// 获取点位
|
|
|
this.getMarkers(1);
|
|
|
if(this.layers.layer2) {
|
|
|
this.layers.layer2.hide();
|
|
|
}
|
|
|
// zoomchange ： 地图缩放级别更改后触发。 zoomstart ： 缩放开始时触发。 zoomend ： 缩放停止时触发。
|
|
|
map.on("zoomend", (ev) => {
|
|
|
let zoom = map.getZoom();
|
|
|
console.log(zoom,'zoom层级');
|
|
|
|
|
|
if(this.actionMap == 4) {
|
|
|
|
|
|
}
|
|
|
|
|
|
if(zoom < 11) {
|
|
|
this.componentMarker.visible = false;
|
|
|
this.personInfo.visible = false;
|
|
|
this.eventInfo.visible = false;
|
|
|
this.carInfo.visible = false;
|
|
|
this.monitoringInfo.visible = false;
|
|
|
this.shopInfo.visible = false;
|
|
|
} else {
|
|
|
this.componentMarker.visible = true;
|
|
|
if(zoom < 13.2) {
|
|
|
this.unlightedPolygonId()
|
|
|
if(this.layers.layer2) {
|
|
|
this.layers.layer2.hide();
|
|
|
this.layers.text1.hide();
|
|
|
this.isPositioning = false;
|
|
|
}
|
|
|
if(this.layers.layer3) {
|
|
|
this.layers.layer3.hide();
|
|
|
}
|
|
|
if(this.layers.layer) {
|
|
|
this.layers.layer.show();
|
|
|
this.layers.text.show();
|
|
|
}
|
|
|
} else if(zoom > 13.2){
|
|
|
if(this.layers.layer2) {
|
|
|
this.layers.layer2.show();
|
|
|
this.layers.text1.hide();
|
|
|
}
|
|
|
|
|
|
if(this.layers.layer) {
|
|
|
this.layers.layer.hide();
|
|
|
this.layers.text.hide();
|
|
|
}
|
|
|
if(this.layers.layer3) {
|
|
|
this.layers.layer3.hide();
|
|
|
}
|
|
|
if(zoom > 14) {
|
|
|
this.layers.text1.show();
|
|
|
this.layers.layer3.show();
|
|
|
} else {
|
|
|
if(this.highlightedPolygonId !== 1) {
|
|
|
this.unlightedPolygonId()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
// 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,status){
|
|
|
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");
|
|
|
let ico6 = require("../../../assets/images/icon/icon6.png");
|
|
|
let offIcon1 = require("../../../assets/images/icon/offLine1.png");
|
|
|
let offIcon2 = require("../../../assets/images/icon/offLine2.png");
|
|
|
let offIcon3 = require("../../../assets/images/icon/offLine3.png");
|
|
|
let offIcon4 = require("../../../assets/images/icon/offLine4.png");
|
|
|
this.markers = [];
|
|
|
this.mapLoading = status ? false : true;
|
|
|
if(id == 1) {
|
|
|
this.personLine = [];
|
|
|
getDeviceList({ imei: "861316060216403,861316060216619,861316060207857,861316060214648,861316060214317,861316060215553,861316060212493,861316060214804,861316060207931,861316060216056" }).then((res) => {
|
|
|
this.mapLoading = false;
|
|
|
// 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 = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
|
|
|
obj.userId = element.userId;
|
|
|
obj.info = element;
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.$modal.msgError("执法人员" + res.data.msg);
|
|
|
}
|
|
|
}).catch(err=>{
|
|
|
this.mapLoading = false;
|
|
|
})
|
|
|
} 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 = element.properties.status == "0"? offIcon2 : ico2;
|
|
|
this.markers.push(obj)
|
|
|
this.mapLoading = false;
|
|
|
}
|
|
|
// 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 = element.properties.status == "0"? offIcon3 : ico4;
|
|
|
obj.text = element.properties.name;
|
|
|
this.markers.push(obj)
|
|
|
this.mapLoading = false;
|
|
|
}
|
|
|
})
|
|
|
} else if(id == 4){
|
|
|
point.features.forEach((element)=>{
|
|
|
if (element.properties.name == "监控视频") {
|
|
|
this.mapLoading = false;
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
obj.imgSrc = element.properties.status == "0" ? offIcon4 : ico5;
|
|
|
// obj.imgSrc = ico5;
|
|
|
obj.info = element;
|
|
|
|
|
|
this.markers.push(obj)
|
|
|
}
|
|
|
})
|
|
|
// getVideoPageEq({pageNo:1,pageSize:50}).then(res=>{
|
|
|
// this.mapLoading = false;
|
|
|
// // console.log(res,"res");
|
|
|
// res.data.forEach((element)=>{
|
|
|
// let obj = {position:[]};
|
|
|
// obj.position[0] = element.longitude;
|
|
|
// obj.position[1] = element.latitude;
|
|
|
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
|
|
|
// obj.imgSrc = ico5;
|
|
|
// obj.info = element
|
|
|
// this.markers.push(obj)
|
|
|
// })
|
|
|
// }).catch(err=>{
|
|
|
// this.mapLoading = false;
|
|
|
// })
|
|
|
} 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 = ico6;
|
|
|
// this.markers.push(obj)
|
|
|
// this.mapLoading = false;
|
|
|
// }
|
|
|
// })
|
|
|
getStreetShopList({pageSize:20,pageNum:1}).then(res=>{
|
|
|
res.rows.forEach(element => {
|
|
|
let obj = {position:[]};
|
|
|
obj.position[0] = element.longitude;
|
|
|
obj.position[1] = element.latitude;
|
|
|
obj.imgSrc = ico6;
|
|
|
obj.info = element;
|
|
|
this.markers.push(obj)
|
|
|
this.mapLoading = false;
|
|
|
})
|
|
|
}).catch(err=>{
|
|
|
this.$modal.msgError(err);
|
|
|
this.mapLoading = false;
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// TODO:缩放地图获取新的监控点位
|
|
|
getPageEq(pageNum){
|
|
|
this.mapLoading = true;
|
|
|
let ico5 = require("../../../assets/images/icon/icon5.png");
|
|
|
let offIcon4 = require("../../../assets/images/icon/offLine4.png");
|
|
|
getVideoPageEq({pageNo:pageNum,pageSize:30}).then(res=>{
|
|
|
this.mapLoading = false;
|
|
|
// console.log(res,"res");
|
|
|
res.data.forEach((element)=>{
|
|
|
var marker = new AMap.Marker({
|
|
|
position: [element.longitude, element.latitude], // 标记位置
|
|
|
offset: new AMap.Pixel(-27, -94),
|
|
|
content:`<div class="markerStyles">
|
|
|
<img src="${element.status == "0"? offIcon4 : ico5}" alt="">
|
|
|
</div>`,
|
|
|
});
|
|
|
marker.on("click",(e)=>{
|
|
|
this.monitoringInfo.visible = true;
|
|
|
this.monitoringInfo.position = [element.longitude,element.latitude];
|
|
|
})
|
|
|
this.layers.markers.addLayer(marker);
|
|
|
this.map.add(this.layers.markers)
|
|
|
})
|
|
|
}).catch(err=>{
|
|
|
this.mapLoading = false;
|
|
|
})
|
|
|
},
|
|
|
// 点位点击事件
|
|
|
clickMarker(marker,e){
|
|
|
console.log(marker);
|
|
|
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.info = marker.info;
|
|
|
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");
|
|
|
}
|
|
|
},
|
|
|
// 播放监控视频
|
|
|
initVideoPlayer(videoUrl){
|
|
|
this.$nextTick(()=>{
|
|
|
var videoDom = document.getElementById('flvvideo')
|
|
|
|
|
|
var player = flvjs.createPlayer({
|
|
|
type: 'flv', // 媒体类型，默认是 flv,
|
|
|
isLive: true, // 是否是直播流
|
|
|
hasAudio: true, // 是否有音频
|
|
|
hanVideo: true, // 是否有视频
|
|
|
url: videoUrl, // 流地址
|
|
|
},{
|
|
|
// 其他的配置项可以根据项目实际情况参考 api 去配置
|
|
|
autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
|
|
|
})
|
|
|
player.attachMediaElement(videoDom)
|
|
|
player.load()
|
|
|
player.play()
|
|
|
this.player = player;
|
|
|
// 视频卡顿导致流断了，那就重连
|
|
|
// this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
|
|
|
// // console.log(errType,'errTypeerrTypeerrType');
|
|
|
// // console.log(errDetail,'errDetailerrDetailerrDetailerrDetail');
|
|
|
// if(this.player){
|
|
|
// this.destroyVideos()
|
|
|
// this.initVideoPlayer(videoUrl)
|
|
|
// }
|
|
|
// })
|
|
|
this.instantaneity(this.player,videoUrl)
|
|
|
})
|
|
|
},
|
|
|
destroyVideos() {
|
|
|
if (!this.player) return;
|
|
|
this.player.pause();
|
|
|
this.player.unload();
|
|
|
this.player.detachMediaElement();
|
|
|
this.player.destroy();
|
|
|
this.player = null;
|
|
|
},
|
|
|
// 可能会有卡顿的情况 重新去拉流由于视频会延时 为保证实时性，我们可以跳帧
|
|
|
instantaneity(player,videoUrl){
|
|
|
this.timer = setInterval(() => {
|
|
|
if (player && player.buffered && player.buffered.length) {
|
|
|
let end = player.buffered.end(0); // 获取当前buffered值
|
|
|
let diff = end - player.currentTime; // 获取buffered与currentTime的差值
|
|
|
if (diff >= 3) {// 如果差值大于等于3s 手动跳帧 这里可根据自身需求来定
|
|
|
//单个视频
|
|
|
player.currentTime = end;//手动跳帧
|
|
|
player.currentTime = player.buffered.end(0);//手动跳帧
|
|
|
|
|
|
// 多个视频
|
|
|
clearInterval(this.timer)
|
|
|
// player.pause();
|
|
|
// player.unload();
|
|
|
// player.detachMediaElement();
|
|
|
// player.destroy();
|
|
|
// player= null;
|
|
|
//重新加载当前停止的视频流，根据个人的方法来配置
|
|
|
this.initVideoPlayer(videoUrl)
|
|
|
}
|
|
|
}
|
|
|
}, 2000); //2000毫秒执行一次
|
|
|
},
|
|
|
// 执法人员强制观摩
|
|
|
watchClick(){
|
|
|
this.showVideo = true;
|
|
|
videoSurveillance({...this.videoCondition,imei:this.personInfo.info.imei}).then(res=>{
|
|
|
if(res.code == 200 && res.data.msg == '操作成功') {
|
|
|
this.initVideoPlayer(`http://121.229.2.163:9302/live/9999_${this.personInfo.info.userId}.flv`)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 强制观摩关闭事件
|
|
|
videoClose(){
|
|
|
this.showVideo = false;
|
|
|
if(!this.player) return
|
|
|
this.player.pause()
|
|
|
this.player.unload()
|
|
|
this.player.detachMediaElement()
|
|
|
this.player.destroy()
|
|
|
this.player = null
|
|
|
if(this.timer) clearInterval(this.timer)
|
|
|
},
|
|
|
// 事件指派
|
|
|
eventBtn(){
|
|
|
this.$refs.crewAssign.open();
|
|
|
},
|
|
|
// 监控视频大屏播放
|
|
|
playVideo(status){
|
|
|
if(status == 1) {
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
if(res.code == 200) {
|
|
|
console.log(res);
|
|
|
this.$refs.aloneVideo.open(res.msg);
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.$modal.msgError("该设备已离线");
|
|
|
}
|
|
|
},
|
|
|
// 监控视频上墙
|
|
|
monitorVideos(status){
|
|
|
// this.$refs.videoWall.open();
|
|
|
if(status == 1) {
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
if(res.code == 200) {
|
|
|
// console.log(res,'视频地址获取');
|
|
|
this.$refs.aloneVideo.open(res.msg);
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.$modal.msgError("该设备已离线");
|
|
|
}
|
|
|
},
|
|
|
// 转发，复制视频地址
|
|
|
copyUrl(){
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
if(res.code == 200) {
|
|
|
// this.$refs.aloneVideo.open(res.msg);
|
|
|
var aux = document.createElement("input");
|
|
|
aux.setAttribute("value", res.msg);
|
|
|
document.body.appendChild(aux);
|
|
|
aux.select();
|
|
|
document.execCommand("copy");
|
|
|
document.body.removeChild(aux);
|
|
|
this.$modal.msgSuccess("视频地址已复制");
|
|
|
}
|
|
|
}).catch(error=>{
|
|
|
this.$modal.msgError(error);
|
|
|
})
|
|
|
},
|
|
|
// 商铺详情查看
|
|
|
getShopInfo(){
|
|
|
this.$refs.shop.open();
|
|
|
},
|
|
|
|
|
|
|
|
|
// 二级网格获取
|
|
|
getWanggeGeoJson(){
|
|
|
this.wanggeData = gridding.features;
|
|
|
gridding.features.forEach((element)=>{
|
|
|
var wangge = new AMap.Polygon({
|
|
|
path:element.geometry.coordinates[0],
|
|
|
strokeColor: '#FFBF7A',
|
|
|
fillColor: '#DC8419',
|
|
|
strokeOpacity: 1,
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
extData:{
|
|
|
name: element.properties.NAME
|
|
|
},
|
|
|
})
|
|
|
var text = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(element.geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: element.properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#FBFF00',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
element.myPolygon = wangge;
|
|
|
element.text = text;
|
|
|
// this.myWange.push(wangge);
|
|
|
// this.layers.layer.addLayer(wangge);
|
|
|
// this.layers.layer.addLayer(text);
|
|
|
this.layers.layer2.addOverlay(wangge);
|
|
|
this.layers.text1.addOverlay(text);
|
|
|
this.map.add(this.layers.layer2);
|
|
|
this.map.add(this.layers.text1);
|
|
|
})
|
|
|
// console.log(this.layers.layer,'this.layers.layer');
|
|
|
// this.map.add(this.layers.layer);
|
|
|
},
|
|
|
// 围栏获取
|
|
|
getWeilanGeoJson(){
|
|
|
fence({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
this.weilanData = res.rows;
|
|
|
this.weilanData.forEach((element,index) => {
|
|
|
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,
|
|
|
bubble: true,
|
|
|
extData:{
|
|
|
id: '围栏polygon'
|
|
|
},
|
|
|
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,
|
|
|
extData:{
|
|
|
id: '围栏text'
|
|
|
},
|
|
|
style: {
|
|
|
'font-size': '14px',
|
|
|
'text-align': 'center',
|
|
|
'color': '#62E1FA',
|
|
|
'line-height': '24px',
|
|
|
'letter-spacing': '2px',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.layers.layer3.addOverlay(circle)
|
|
|
this.layers.layer3.addOverlay(text)
|
|
|
this.layers.layer3.hide();
|
|
|
this.map.add(this.layers.layer3);
|
|
|
element.myPolygon = circle;
|
|
|
element.text = text;
|
|
|
this.openClick(circle)
|
|
|
// this.map.add(text);
|
|
|
// 多边形围栏
|
|
|
} else if (shapeStr.features[0].geometry.type == "Polygon") {
|
|
|
var weilan = new AMap.Polygon({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
bubble: true,
|
|
|
extData:{
|
|
|
id: '围栏polygon'
|
|
|
},
|
|
|
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,
|
|
|
extData:{
|
|
|
id: '围栏text'
|
|
|
},
|
|
|
style: {
|
|
|
'font-size': '14px',
|
|
|
'text-align': 'center',
|
|
|
'color': '#62E1FA',
|
|
|
'line-height': '24px',
|
|
|
'letter-spacing': '2px',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
this.layers.layer3.addOverlay(weilan)
|
|
|
this.layers.layer3.addOverlay(text)
|
|
|
this.layers.layer3.hide();
|
|
|
this.map.add(this.layers.layer3);
|
|
|
element.myPolygon = weilan;
|
|
|
element.text = text;
|
|
|
this.openClick(weilan)
|
|
|
// this.map.add([wangge,text]);
|
|
|
// this.map.add(text);
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 重点区域获取
|
|
|
getQuyuGeoJson(){
|
|
|
regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
this.quyuData = res.rows;
|
|
|
this.quyuData.forEach((element,index) => {
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
var quyu = new AMap.Polygon({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
bubble: true,
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.38,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
extData:{
|
|
|
id: '区域polygon',
|
|
|
name: element.name
|
|
|
},
|
|
|
})
|
|
|
var text = new AMap.Text({
|
|
|
position: shapeStr.features[1].geometry.coordinates,
|
|
|
anchor: 'bottom-center',
|
|
|
text: element.name,
|
|
|
extData:{
|
|
|
id: '区域text'
|
|
|
},
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#F44444',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
element.myPolygon = quyu;
|
|
|
element.text = text;
|
|
|
this.layers.layer3.addOverlay(quyu)
|
|
|
this.layers.layer3.addOverlay(text)
|
|
|
this.layers.layer3.hide();
|
|
|
this.map.add(this.layers.layer3);
|
|
|
this.openClick(quyu)
|
|
|
// this.map.add([quyu,text]);
|
|
|
// this.map.add(text);
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 重点路段获取
|
|
|
getLuduanGeoJson(){
|
|
|
roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
this.luduanData = res.rows;
|
|
|
// console.log(res,'resresres');
|
|
|
this.luduanData.forEach((element) => {
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
// console.log(shapeStr,'shapeStrshapeStrshapeStr');
|
|
|
var luduan = new AMap.Polyline({
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
bubble: true,
|
|
|
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.layers.layer3.addOverlay(luduan)
|
|
|
this.layers.layer3.addOverlay(text)
|
|
|
this.layers.layer3.hide();
|
|
|
this.map.add(this.layers.layer3);
|
|
|
element.myPolyline = luduan;
|
|
|
element.text = text;
|
|
|
this.openClick(luduan)
|
|
|
// this.map.add([luduan,text]);
|
|
|
// this.map.add(text);
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 开启围栏，路段，区域的点击事件
|
|
|
openClick(layer){
|
|
|
layer.on('click',(e)=>{
|
|
|
// console.log(e,'区域的点击事件');
|
|
|
// console.log(this.map.getAllOverlays('circle','polyline','polygon'),'this.layers.layer2');
|
|
|
if(this.isPositioning) {
|
|
|
let latlng = e.lnglat
|
|
|
let name;
|
|
|
this.layers.layer2.eachOverlay((item)=>{
|
|
|
// console.log(item,'item');
|
|
|
if(item.getBounds().contains(latlng)){
|
|
|
name = item.getExtData().name
|
|
|
}
|
|
|
})
|
|
|
var marker = new AMap.Marker({
|
|
|
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
|
|
|
anchor: 'bottom-center',
|
|
|
})
|
|
|
this.layers.layer4.addOverlay(marker);
|
|
|
this.map.add(this.layers.layer4)
|
|
|
let addressName
|
|
|
var lng = e.lnglat.lng + '';
|
|
|
var lat = e.lnglat.lat + '';
|
|
|
// let clickPoint = this.layers.layer2.getOverlays();
|
|
|
// for (var i = 0; i < clickPoint.length; i++) {
|
|
|
// console.log(clickPoint[i],'点击的地址');
|
|
|
// }
|
|
|
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
|
|
|
params:{
|
|
|
key: "5f4a2c045cffa20551a0300c31c1ee78",
|
|
|
location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
|
|
|
extensions: 'all',
|
|
|
// batch: true,
|
|
|
}
|
|
|
}).then(response=>{
|
|
|
// console.log(response,'response');
|
|
|
addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
|
|
|
// console.log(addressName,'this.addressName');
|
|
|
if(this.layers.layer4) {
|
|
|
// e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
|
|
|
this.$refs.newEvent.open({lnglat:latlng,address:addressName,meshOccurs:name,marker:marker});
|
|
|
this.isPositioning = false;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 子组件的实时定位事件
|
|
|
realTimeLocationClick(item){
|
|
|
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
|
|
|
},
|
|
|
// 子组件的名称点击事件
|
|
|
divClick(lightedPolygonId){
|
|
|
// console.log(lightedPolygonId,"父组件的名称点击事件");
|
|
|
// 取消重点区域高亮
|
|
|
this.quyuData.forEach((element) => {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.38,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#F44444',
|
|
|
});
|
|
|
})
|
|
|
// 取消重点路段高亮
|
|
|
this.luduanData.forEach((element) => {
|
|
|
element.myPolyline.setOptions({
|
|
|
strokeOpacity: 1,
|
|
|
strokeColor: '#46FF77',
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#46FF77',
|
|
|
});
|
|
|
})
|
|
|
// 取消考勤围栏高亮
|
|
|
this.weilanData.forEach((element) => {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeOpacity: 0.9,
|
|
|
strokeColor: "#62E1FA",
|
|
|
fillColor: "#62E1FA",
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#62E1FA',
|
|
|
});
|
|
|
})
|
|
|
// 取消区域网格高亮
|
|
|
gridding.features.forEach((element)=>{
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeColor: '#FFBF7A',
|
|
|
fillColor: '#DC8419',
|
|
|
strokeOpacity: 1,
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#FFDBB7',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
});
|
|
|
})
|
|
|
this.isClickLingtedPolygonId = true;
|
|
|
this.highlightedPolygonId = lightedPolygonId.id;
|
|
|
if(lightedPolygonId.id == 1) {
|
|
|
// 区域网格
|
|
|
gridding.features.forEach((element)=>{
|
|
|
if(element.properties.COOD === lightedPolygonId.item.properties.COOD) {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeColor: '#46FF77',
|
|
|
fillColor: '#46FF77',
|
|
|
fillOpacity: 0.5,
|
|
|
strokeOpacity: 0.8,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#46FF77',
|
|
|
});
|
|
|
this.lightedPolygon = element.myPolygon;
|
|
|
this.lightedText = element.text;
|
|
|
this.map.setFitView(element.myPolygon);
|
|
|
} else {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeColor: '#FFBF7A',
|
|
|
fillColor: '#DC8419',
|
|
|
strokeOpacity: 1,
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#FFDBB7',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
} else if(lightedPolygonId.id == 2) {
|
|
|
// 重点区域
|
|
|
this.quyuData.forEach((element) => {
|
|
|
if(element.id == lightedPolygonId.item.id) {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeColor: '#46FF77',
|
|
|
fillColor: '#46FF77',
|
|
|
fillOpacity: 0.5,
|
|
|
strokeOpacity: 0.8,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#FFDBB7',
|
|
|
});
|
|
|
this.lightedPolygon = element.myPolygon;
|
|
|
this.lightedText = element.text;
|
|
|
this.map.setFitView(element.myPolygon);
|
|
|
} else {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.38,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#F44444',
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
} else if(lightedPolygonId.id == 3) {
|
|
|
// 重点路段
|
|
|
this.luduanData.forEach((element) => {
|
|
|
if(element.id == lightedPolygonId.item.id) {
|
|
|
element.myPolyline.setOptions({
|
|
|
strokeOpacity: 1,
|
|
|
strokeColor: '#FF0000',
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#FF0000',
|
|
|
});
|
|
|
this.lightedPolygon = element.myPolyline;
|
|
|
this.lightedText = element.text;
|
|
|
this.map.setFitView(element.myPolyline);
|
|
|
} else {
|
|
|
element.myPolyline.setOptions({
|
|
|
strokeOpacity: 1,
|
|
|
strokeColor: '#46FF77',
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#46FF77',
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
} else if(lightedPolygonId.id == 4) {
|
|
|
// 考勤围栏
|
|
|
this.weilanData.forEach((element) => {
|
|
|
if(element.id == lightedPolygonId.item.id) {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeColor: '#46FF77',
|
|
|
fillColor: '#46FF77',
|
|
|
fillOpacity: 0.5,
|
|
|
strokeOpacity: 0.8,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#46FF77',
|
|
|
});
|
|
|
this.lightedPolygon = element.myPolygon;
|
|
|
this.lightedText = element.text;
|
|
|
this.map.setFitView(element.myPolygon);
|
|
|
} else {
|
|
|
element.myPolygon.setOptions({
|
|
|
strokeOpacity: 0.9,
|
|
|
strokeColor: "#62E1FA",
|
|
|
fillColor: "#62E1FA",
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
element.text.setStyle({
|
|
|
'color': '#62E1FA',
|
|
|
});
|
|
|
}
|
|
|
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
// 地图等级变化时如果有高亮则取消高亮
|
|
|
unlightedPolygonId(){
|
|
|
// console.log(this.highlightedPolygonId,'this.highlightedPolygonId');
|
|
|
if(this.isClickLingtedPolygonId) {
|
|
|
this.isClickLingtedPolygonId = false;
|
|
|
if(this.highlightedPolygonId == 1) {
|
|
|
this.lightedPolygon.setOptions({
|
|
|
strokeColor: '#FFBF7A',
|
|
|
fillColor: '#DC8419',
|
|
|
strokeOpacity: 1,
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
this.lightedText.setStyle({
|
|
|
'color': '#FFDBB7',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
});
|
|
|
} else if(this.highlightedPolygonId == 2) {
|
|
|
console.log("进入区域取消高亮");
|
|
|
this.lightedPolygon.setOptions({
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.38,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
this.lightedText.setStyle({
|
|
|
'color': '#F44444',
|
|
|
});
|
|
|
} else if(this.highlightedPolygonId == 3) {
|
|
|
this.lightedPolygon.setOptions({
|
|
|
strokeOpacity: 1,
|
|
|
strokeColor: '#46FF77',
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
this.lightedText.setStyle({
|
|
|
'color': '#46FF77',
|
|
|
});
|
|
|
} else if(this.highlightedPolygonId == 4) {
|
|
|
this.lightedPolygon.setOptions({
|
|
|
strokeColor: '#62E1FA',
|
|
|
fillColor: '#62E1FA',
|
|
|
strokeOpacity: 0.9,
|
|
|
fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
});
|
|
|
this.lightedText.setStyle({
|
|
|
'color': '#62E1FA',
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
// 重点区域
|
|
|
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;
|
|
|
this.$emit("changeBackground",id)
|
|
|
if(id == 1) {
|
|
|
this.visible = false;
|
|
|
// 修改一级网格背景
|
|
|
this.layers.layer.setOptions ({
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
// 修改一级网格字体颜色
|
|
|
let text = this.layers.text.getOverlays();
|
|
|
for (let i = 0; i < text.length; i++) {
|
|
|
text[i].setStyle({
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
})
|
|
|
}
|
|
|
// 修改二级网格背景
|
|
|
this.layers.layer2.setOptions ({
|
|
|
strokeColor: '#FFBF7A',
|
|
|
fillColor: '#DC8419',
|
|
|
strokeOpacity: 1,
|
|
|
fillOpacity: 0.3,
|
|
|
})
|
|
|
// 修改围栏区域文本样式
|
|
|
var overlays = this.layers.layer3.getOverlays();
|
|
|
for (var i = 0; i < overlays.length; i++) {
|
|
|
let id = overlays[i].getExtData().id;
|
|
|
if(id == "围栏text" || id == "区域text") {
|
|
|
overlays[i].setStyle({
|
|
|
'font-size': '14px',
|
|
|
'text-align': 'center',
|
|
|
'color': '#62E1FA',
|
|
|
'line-height': '24px',
|
|
|
'letter-spacing': '2px',
|
|
|
'white-space': 'nowrap',
|
|
|
})
|
|
|
} else if(id == "区域polygon") {
|
|
|
overlays[i].setOptions({
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.38,
|
|
|
})
|
|
|
} else if(id == "围栏polygon") {
|
|
|
overlays[i].setOptions({
|
|
|
strokeOpacity: 0.9,
|
|
|
strokeColor: "#62E1FA",
|
|
|
fillColor: "#62E1FA",
|
|
|
fillOpacity: 0.3,
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
this.map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518")
|
|
|
} else {
|
|
|
this.visible = true;
|
|
|
// 修改一级网格背景
|
|
|
this.layers.layer.setOptions ({
|
|
|
strokeColor: '#0084FF',
|
|
|
fillColor: '#40AFFF',
|
|
|
fillOpacity: 0.8,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
// 修改一级网格字体颜色
|
|
|
let text = this.layers.text.getOverlays();
|
|
|
for (let i = 0; i < text.length; i++) {
|
|
|
text[i].setStyle({
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#DFFAFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
})
|
|
|
}
|
|
|
// 修改二级网格背景
|
|
|
this.layers.layer2.setOptions ({
|
|
|
strokeColor: '#FF8400',
|
|
|
fillColor: '#FF911A',
|
|
|
strokeOpacity: 1,
|
|
|
fillOpacity: 0.4,
|
|
|
})
|
|
|
// 修改围栏区域文本样式
|
|
|
var overlays = this.layers.layer3.getOverlays();
|
|
|
for (var i = 0; i < overlays.length; i++) {
|
|
|
let id = overlays[i].getExtData().id;
|
|
|
console.log(id,'id');
|
|
|
if(id == "围栏text" || id == "区域text") {
|
|
|
overlays[i].setStyle({
|
|
|
'font-size': '14px',
|
|
|
'text-align': 'center',
|
|
|
'color': '#E4ECFF',
|
|
|
'line-height': '24px',
|
|
|
'letter-spacing': '2px',
|
|
|
'white-space': 'nowrap',
|
|
|
})
|
|
|
} else if(id == "区域polygon") {
|
|
|
overlays[i].setOptions({
|
|
|
strokeOpacity: 0,
|
|
|
strokeColor: '#FF0000',
|
|
|
fillColor: '#FF0000',
|
|
|
fillOpacity:0.6,
|
|
|
})
|
|
|
} else if(id == "围栏polygon") {
|
|
|
overlays[i].setOptions({
|
|
|
strokeOpacity: 1,
|
|
|
strokeColor: "#00B7FF",
|
|
|
fillColor: "#001AFF",
|
|
|
fillOpacity: 0.5,
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
// this.layers.text.setOptions ({
|
|
|
// setStyle:{
|
|
|
// 'font-size': '16px',
|
|
|
// 'font-weight': 'bold',
|
|
|
// 'text-align': 'center',
|
|
|
// 'color': '#DFFAFF',
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
// 'white-space': 'nowrap',
|
|
|
// }
|
|
|
// })
|
|
|
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() {
|
|
|
// TODO:新增marker的方法
|
|
|
let ico5 = require("../../../assets/images/icon/icon5.png");
|
|
|
let offIcon4 = require("../../../assets/images/icon/offLine4.png");
|
|
|
point.features.forEach((element)=>{
|
|
|
if(element.properties.name == "重点事件"){
|
|
|
var marker = new AMap.Marker({
|
|
|
position: new AMap.LngLat(element.geometry.coordinates[0], element.geometry.coordinates[1]), // 标记位置
|
|
|
offset: new AMap.Pixel(-27, -94),
|
|
|
content:`<div class="markerStyles">
|
|
|
<img src="${element.properties.status == "0"? offIcon4 : ico5}" alt="">
|
|
|
</div>`,
|
|
|
});
|
|
|
marker.on("click",(e)=>{
|
|
|
this.monitoringInfo.visible = true;
|
|
|
this.monitoringInfo.position = [element.geometry.coordinates[0],element.geometry.coordinates[1]];
|
|
|
})
|
|
|
this.layers.markers.addOverlay(marker);
|
|
|
this.map.add(this.layers.markers)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 新增事件的点击事件
|
|
|
createdTask() {
|
|
|
this.$refs.newEvent.open();
|
|
|
},
|
|
|
// 地图扎点的点击事件
|
|
|
positioning() {
|
|
|
this.isPositioning = true;
|
|
|
// this.$refs.videoWall.open();
|
|
|
},
|
|
|
// 弹框点击取消事件
|
|
|
cancel(marker){
|
|
|
this.layers.layer4.removeOverlay(marker)
|
|
|
},
|
|
|
// 切换地图事件
|
|
|
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;
|
|
|
if (id == 1) {
|
|
|
this.markerOffset = new AMap.Pixel(-35, -123);
|
|
|
} else if (id == 2) {
|
|
|
this.markerOffset = new AMap.Pixel(-27, -113);
|
|
|
} else if (id == 3) {
|
|
|
this.markerOffset = new AMap.Pixel(-35, -148);
|
|
|
} else if (id == 4) {
|
|
|
this.markerOffset = new AMap.Pixel(-27, -94);
|
|
|
} else if (id == 5) {
|
|
|
this.markerOffset = new AMap.Pixel(-27, -94);
|
|
|
}
|
|
|
this.getMarkers(id);
|
|
|
// this.markerInterval()
|
|
|
|
|
|
// 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");
|
|
|
},
|
|
|
getCarList(){
|
|
|
getCarManageList({pageNum: 1,pageSize: 10}).then(res=>{
|
|
|
// console.log(res);
|
|
|
this.carLine = res.rows
|
|
|
})
|
|
|
},
|
|
|
// 定时器
|
|
|
markerInterval(){
|
|
|
let timer
|
|
|
if(this.actionMap == 1) {
|
|
|
timer = setInterval(() => {
|
|
|
this.getMarkers(1,true)
|
|
|
}, 10000);
|
|
|
} else {
|
|
|
clearInterval(timer)
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
this.getCarList()
|
|
|
// this.markerInterval()
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.map-main {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
.map-mengcheng {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
|
|
|
}
|
|
|
.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>
|
