|
|
|
|
@ -23,7 +23,51 @@
|
|
|
|
|
view-mode="3D"
|
|
|
|
|
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
|
|
|
|
|
class="amap-demo"
|
|
|
|
|
/>
|
|
|
|
|
>
|
|
|
|
|
<el-amap-layer-satellite :visible="visible"></el-amap-layer-satellite>
|
|
|
|
|
<!-- 江宁GeoJson文件 -->
|
|
|
|
|
<el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson>
|
|
|
|
|
<!-- 测试点位 -->
|
|
|
|
|
<el-amap-marker :position="componentMarker.position" :visible="componentMarker.visible" :draggable="componentMarker.draggable">
|
|
|
|
|
<div style="padding: 5px 10px;color: #fff; display:flex;" class="testMarker">
|
|
|
|
|
<div>{{componentMarker.text}}</div>
|
|
|
|
|
<img src="../../../assets/images/3.png" alt="" style="width: 40px">
|
|
|
|
|
</div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<!-- marker标记点 -->
|
|
|
|
|
<el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
|
|
|
|
|
<div class="markerStyles">
|
|
|
|
|
<div class="marker-Text">{{marker.text}}</div>
|
|
|
|
|
<img :src="marker.imgSrc" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<!-- 人员信息弹框 -->
|
|
|
|
|
<el-amap-info-window
|
|
|
|
|
v-if="personInfo.visible"
|
|
|
|
|
:offset="[27,0]"
|
|
|
|
|
:position="personInfo.position"
|
|
|
|
|
:visible.sync="personInfo.visible">
|
|
|
|
|
<div class="person-popup">
|
|
|
|
|
<div class="person-title">
|
|
|
|
|
<div class="title">人员信息</div>
|
|
|
|
|
<div class="mask" @click="markersClosePopup"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="person-main">
|
|
|
|
|
<div class="person-info">
|
|
|
|
|
<div class="dot"></div>
|
|
|
|
|
<div class="name">李飞</div>
|
|
|
|
|
<div class="position">执法1队队员</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btns">
|
|
|
|
|
<div id='personClick'>行程轨迹</div>
|
|
|
|
|
<div>附近队员</div>
|
|
|
|
|
<div>位置分享</div>
|
|
|
|
|
<div>任务派发</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-amap-info-window>
|
|
|
|
|
</el-amap>
|
|
|
|
|
|
|
|
|
|
<div class="left-bg">
|
|
|
|
|
<div class="bgt"></div>
|
|
|
|
|
@ -165,8 +209,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import L from "leaflet";
|
|
|
|
|
import VueAMap from '@vuemap/vue-amap';
|
|
|
|
|
// import L from "leaflet";
|
|
|
|
|
|
|
|
|
|
//引入坐标系转换插件
|
|
|
|
|
// import "proj4";
|
|
|
|
|
// import "proj4leaflet";
|
|
|
|
|
@ -223,9 +267,33 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
zoom: 16,
|
|
|
|
|
center: [121.59996, 31.197646],
|
|
|
|
|
zoom: 12,
|
|
|
|
|
center: [118.835418, 31.863971], // 121.59996, 31.197646
|
|
|
|
|
map: null,
|
|
|
|
|
// GeoJson文件的基本样式
|
|
|
|
|
polygonOptions: {
|
|
|
|
|
strokeColor: '#00C5EC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
|
|
|
|
|
fillColor: 'rgba(64,175,255,0.4)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
|
|
|
|
|
},
|
|
|
|
|
draggable:false, // 是否可拖动
|
|
|
|
|
jiangninggeo:jiangninggeo,
|
|
|
|
|
componentMarker: {
|
|
|
|
|
position: [118.79808425903322, 31.96840071263104],
|
|
|
|
|
visible: true,
|
|
|
|
|
draggable: false,
|
|
|
|
|
text: '1'
|
|
|
|
|
},
|
|
|
|
|
// 所有点位信息
|
|
|
|
|
markers:[],
|
|
|
|
|
// 人员弹框信息
|
|
|
|
|
personInfo: {
|
|
|
|
|
position: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
globalMap: null,
|
|
|
|
|
basemap: null,
|
|
|
|
|
townCenter: [31.863971, 118.835418],
|
|
|
|
|
@ -265,15 +333,22 @@ export default {
|
|
|
|
|
weilanData: null, // 考勤围栏数据
|
|
|
|
|
luduanData: null, // 重点路段
|
|
|
|
|
personLine: [], // 在线人员情况
|
|
|
|
|
visible: false, // 卫星底图是否显示
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init(o) {
|
|
|
|
|
this.map = o;
|
|
|
|
|
init(map) {
|
|
|
|
|
this.map = map;
|
|
|
|
|
// o.setMapStyle('amap://styles/darkblue')
|
|
|
|
|
o.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
|
|
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
|
|
// console.log(o.getCenter())
|
|
|
|
|
// console.log(this.$refs.map.$$getInstance())
|
|
|
|
|
// 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", {
|
|
|
|
|
@ -590,6 +665,54 @@ export default {
|
|
|
|
|
this.addMark(obj);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 各个点位获取
|
|
|
|
|
getMarkers(id){
|
|
|
|
|
let ico1 = require("../../../assets/images/icon/icon1.png");
|
|
|
|
|
let ico2 = require("../../../assets/images/icon/icon2.png");
|
|
|
|
|
let ico3 = require("../../../assets/images/icon/icon3.png");
|
|
|
|
|
let ico4 = require("../../../assets/images/icon/icon4.png");
|
|
|
|
|
let ico5 = require("../../../assets/images/icon/icon5.png");
|
|
|
|
|
this.markers = [];
|
|
|
|
|
if(id == 1) {
|
|
|
|
|
getDeviceList({ imei: "861316060217211" }).then((res) => {
|
|
|
|
|
console.log(res,'点位信息');
|
|
|
|
|
if (res.data.obj) {
|
|
|
|
|
res.data.obj.forEach((element) => {
|
|
|
|
|
if (element.status == 0 || element.status == 1) {
|
|
|
|
|
this.personLine.push(element);
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
obj.position[0] = element.longitude;
|
|
|
|
|
obj.position[1] = element.latitude;
|
|
|
|
|
obj.text = element.userName;
|
|
|
|
|
obj.imgSrc = ico1;
|
|
|
|
|
obj.userId = element.userId;
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.$modal.msgError("执法人员" + res.data.msg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 2) {
|
|
|
|
|
point.forEach((element)=>{
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 点位点击事件
|
|
|
|
|
clickMarker(marker,e){
|
|
|
|
|
console.log(marker,e);
|
|
|
|
|
if (this.actionMap == 1) {
|
|
|
|
|
this.personInfo.position = marker.position;
|
|
|
|
|
this.personInfo.visible = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 点位关闭事件
|
|
|
|
|
markersClosePopup(){
|
|
|
|
|
if (this.actionMap == 1) {
|
|
|
|
|
this.personInfo.visible = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getIcons(name, src) {
|
|
|
|
|
let icon = L.divIcon({
|
|
|
|
|
className: "divIcon-marker",
|
|
|
|
|
@ -1160,8 +1283,16 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 电子底图/卫星底图切换事件
|
|
|
|
|
actionBtn(id) {
|
|
|
|
|
this.action = id;
|
|
|
|
|
if(id == 1) {
|
|
|
|
|
this.visible = false
|
|
|
|
|
this.map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518")
|
|
|
|
|
} else {
|
|
|
|
|
this.visible = true;
|
|
|
|
|
this.map.setMapStyle("amap://styles/whitesmoke")
|
|
|
|
|
}
|
|
|
|
|
// if(id == 1) {
|
|
|
|
|
// this.globalMap.removeLayer(this.satelliteMap);
|
|
|
|
|
// this.globalMap.removeLayer(this.satelliteNoteMap);
|
|
|
|
|
@ -1172,12 +1303,6 @@ export default {
|
|
|
|
|
// this.globalMap.addLayer(this.satelliteNoteMap);
|
|
|
|
|
// }
|
|
|
|
|
// console.log(id)
|
|
|
|
|
// this.$emit('actionBtn',id);
|
|
|
|
|
// if(id == 1){
|
|
|
|
|
// this.$refs.personageTrack.open();
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$refs.crewAssign.open();
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
// 输入框的搜索框点击事件
|
|
|
|
|
search() {},
|
|
|
|
|
@ -1215,12 +1340,14 @@ export default {
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
// 隐藏地图左侧
|
|
|
|
|
leftAnimation() {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.leftAnimationData = !this.leftAnimationData;
|
|
|
|
|
}, 200);
|
|
|
|
|
this.$emit("leftAnimationAction");
|
|
|
|
|
},
|
|
|
|
|
// 隐藏地图右侧
|
|
|
|
|
rightAnimation() {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.rightAnimationData = !this.rightAnimationData;
|
|
|
|
|
@ -1230,7 +1357,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
// this.initMap();
|
|
|
|
|
this.getMarkers(1)
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
