|
|
|
|
@ -19,14 +19,17 @@
|
|
|
|
|
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-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">
|
|
|
|
|
@ -35,16 +38,19 @@
|
|
|
|
|
</div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<!-- marker标记点 -->
|
|
|
|
|
<el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
|
|
|
|
|
<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 class="marker-Text">{{marker.text}}</div>
|
|
|
|
|
<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">
|
|
|
|
|
@ -59,7 +65,7 @@
|
|
|
|
|
<div class="position">执法1队队员</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btns">
|
|
|
|
|
<div id='personClick'>行程轨迹</div>
|
|
|
|
|
<div @click="travelPath()">行程轨迹</div>
|
|
|
|
|
<div>附近队员</div>
|
|
|
|
|
<div>位置分享</div>
|
|
|
|
|
<div>任务派发</div>
|
|
|
|
|
@ -67,6 +73,138 @@
|
|
|
|
|
</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">
|
|
|
|
|
@ -246,7 +384,7 @@ 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,
|
|
|
|
|
@ -268,6 +406,7 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
zoom: 12,
|
|
|
|
|
zooms:[10,18],
|
|
|
|
|
center: [118.835418, 31.863971], // 121.59996, 31.197646
|
|
|
|
|
map: null,
|
|
|
|
|
// GeoJson文件的基本样式
|
|
|
|
|
@ -287,10 +426,30 @@ export default {
|
|
|
|
|
markers:[],
|
|
|
|
|
// 人员弹框信息
|
|
|
|
|
personInfo: {
|
|
|
|
|
position: [],
|
|
|
|
|
info: {},
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
// 事件弹框
|
|
|
|
|
eventInfo: {
|
|
|
|
|
position: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
// 车辆弹框信息
|
|
|
|
|
carInfo: {
|
|
|
|
|
position: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
// 监控视频弹框信息
|
|
|
|
|
monitoringInfo: {
|
|
|
|
|
position: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
// 沿街商铺弹框信息
|
|
|
|
|
shopInfo: {
|
|
|
|
|
position: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -342,14 +501,41 @@ export default {
|
|
|
|
|
// o.setMapStyle('amap://styles/darkblue')
|
|
|
|
|
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
|
|
// console.log(o.getCenter())
|
|
|
|
|
// console.log(this.$refs.map.$$getInstance(),'TTTTTTT')
|
|
|
|
|
// 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
|
|
|
|
|
},
|
|
|
|
|
initLocation(map){
|
|
|
|
|
// 获取地图实例
|
|
|
|
|
const mapInstance = this.$refs.map.$$getInstance();
|
|
|
|
|
// 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
|
|
|
|
|
mapInstance.setFitView();
|
|
|
|
|
})
|
|
|
|
|
map.add(geojson)
|
|
|
|
|
map.setFitView(polygon);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
// console.log(this.$refs.map.$$getInstance(),'TTTTTTT')
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initMap() {
|
|
|
|
|
this.globalMap = L.map("showMap", {
|
|
|
|
|
center: this.townCenter, // 地图中心[纬度，经度]
|
|
|
|
|
@ -665,6 +851,9 @@ export default {
|
|
|
|
|
this.addMark(obj);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 各个点位获取
|
|
|
|
|
getMarkers(id){
|
|
|
|
|
let ico1 = require("../../../assets/images/icon/icon1.png");
|
|
|
|
|
@ -673,9 +862,11 @@ export default {
|
|
|
|
|
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,'点位信息');
|
|
|
|
|
// console.log(res,'点位信息');
|
|
|
|
|
if (res.data.obj) {
|
|
|
|
|
res.data.obj.forEach((element) => {
|
|
|
|
|
if (element.status == 0 || element.status == 1) {
|
|
|
|
|
@ -686,6 +877,7 @@ export default {
|
|
|
|
|
obj.text = element.userName;
|
|
|
|
|
obj.imgSrc = ico1;
|
|
|
|
|
obj.userId = element.userId;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
@ -694,25 +886,274 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 2) {
|
|
|
|
|
point.forEach((element)=>{
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
// 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",
|
|
|
|
|
@ -1315,29 +1756,16 @@ export default {
|
|
|
|
|
// 切换地图事件
|
|
|
|
|
changeMap(id) {
|
|
|
|
|
this.actionMap = id;
|
|
|
|
|
if (id == 1) {
|
|
|
|
|
this.getTem();
|
|
|
|
|
} else {
|
|
|
|
|
this.addMark();
|
|
|
|
|
}
|
|
|
|
|
// switch (id) {
|
|
|
|
|
// case 1:
|
|
|
|
|
// this.addMark("执法人员");
|
|
|
|
|
// break;
|
|
|
|
|
// case 2:
|
|
|
|
|
// this.addMark("普通事件");
|
|
|
|
|
// break;
|
|
|
|
|
// case 3:
|
|
|
|
|
// this.addMark("执法车辆");
|
|
|
|
|
// break;
|
|
|
|
|
// case 4:
|
|
|
|
|
// this.addMark("监控视频");
|
|
|
|
|
// break;
|
|
|
|
|
// case 5:
|
|
|
|
|
// this.addMark("沿街商铺分布");
|
|
|
|
|
// break;
|
|
|
|
|
// default:
|
|
|
|
|
// return;
|
|
|
|
|
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();
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
// 隐藏地图左侧
|
|
|
|
|
@ -1356,9 +1784,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getMarkers(1)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
