- ![]()
{{marker.text}}
+ {{marker.text}}
@@ -59,7 +65,7 @@
执法1队队员
-
行程轨迹
+ 行程轨迹
附近队员
位置分享
任务派发
@@ -67,6 +73,138 @@
+
+
+
+ 事件信息
+
+
+
+
+
+
+ 事件名称：
+ XXX小区乱堆杂物
+
+
+
+ 事件类别：
+ 暴露垃圾
+
+
+
+ 事件地址：
+ XX街道XX小区
+
+
+
+ 描述：
+ XXXXXXXXXXXXXX
+
+ 指派
+
+
+
+
+
+ 车辆信息
+
+
+
+
+
+
+ 执法一队1号车
+ 苏A568974
+ 行程轨迹
+
+
+
+
+ 监控视频
+
+
+
+
+ 
+
+
+
+
+ 上墙
+ 转发
+
+
+
+
+ 主体基本信息
+
+
+
+
+
+
+ 商铺名称：
+ xxx商铺
+
+
+
+ 商铺类型：
+ 餐饮店
+
+
+
+ 所在地址：
+ XX街道XX小区
+
+
+
+
+ 描述：
+ xxxxxxxxxxxxxxxxxxxxxxxx
+
+ 查看载体详情
+
+
@@ -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.map,'initMapinitMap');
+ this.$nextTick(() => {
+ // 获取网格数据
+ this.getWanggeGeoJson();
+ // 获取围栏数据
+ this.getWeilanGeoJson();
+ // 获取重点区域数据
+ this.getQuyuGeoJson();
+ // 获取重点路段数据
+ this.getLuduanGeoJson();
+ // 获取点位
+ this.getMarkers(1);
+ AMap.plugin('AMap.GeoJSON',()=>{
+ let polygon
+ var geojson = new AMap.GeoJSON({
+ geoJSON:jiangninggeo,
+ getPolygon:(geojson, lnglats)=>{
+ polygon = new AMap.Polygon({
+ path: lnglats,
+ strokeColor: '#00C5EC',
+ fillColor: '#00AEFF',
+ fillOpacity: 0.4,
+ })
+ return polygon
+ },
+ })
+ map.add(geojson)
+ map.setFitView(polygon);
+ })
+ });
// console.log(this.$refs.map.$$getInstance(),'TTTTTTT')
},
- initLocation(map){
- // 获取地图实例
- const mapInstance = this.$refs.map.$$getInstance();
- // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
- mapInstance.setFitView();
- },
+
+
+
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)
- });
+
},
};
diff --git a/src/views/components/personagetrack/index.vue b/src/views/components/personagetrack/index.vue
index 8e2030c..5e43f17 100644
--- a/src/views/components/personagetrack/index.vue
+++ b/src/views/components/personagetrack/index.vue
@@ -85,9 +85,23 @@
轨迹地图：
-
@@ -99,10 +113,11 @@
+
+
+
+