suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

底图更换

Browse Source
lijinlong
laozt 1 year ago
parent e35925a80e
commit 8c80909968
3 changed files with 175 additions and 93 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -37,6 +37,7 @@
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@vuemap/vue-amap": "^0.1.17",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",

12
src/main.js
Unescape View File

@ -77,6 +77,18 @@ Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'b3c7a7ce466721c3be1d4ea539f82421',
securityJsCode: 'ec84db9c5dfc3d304ca9219e764ffeb8',
});
//如果需要使用自定义的threeJS相关的组件，需要格外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api

255
src/views/bigScreen/map/index.vue
Unescape View File

@ -1,12 +1,36 @@
<template>
<div class="map-main">
<div id="showMap" class="showMap"></div>
<!-- <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"
@init="init"
view-mode="3D"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
class="amap-demo"
/>
<div class="left-bg">
<div class="bgt"></div>
</div>
<transition name="left-animationMap">
<div class="map-left" v-if="leftAnimationData">
<map-left :personLine='personLine'></map-left>
<map-left :personLine="personLine"></map-left>
</div>
</transition>
@ -93,7 +117,12 @@
</div>
<transition name="right-animationMap">
<div class="map-right" v-if="rightAnimationData">
<map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData" :wanggeData="wanggeData"></map-right>
<map-right
:quyuData="quyuData"
:weilanData="weilanData"
:luduanData="luduanData"
:wanggeData="wanggeData"
></map-right>
</div>
</transition>
@ -141,10 +170,10 @@ import L from "leaflet";
// import "proj4";
// import "proj4leaflet";
//引入中国底图插件
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
// import "@/utils/lib/leaflet.ChineseTmsProviders.js";
//引入坐标系偏移插件
// import "@/utils/lib/leaflet.mapCorrection.min.js";//
import "@/utils/lib/leaflet-tilelayer-colorizr.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"
@ -160,7 +189,6 @@ import detachment4 from "@/utils/mapJson/detachment4.json";
// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
import mapLeft from "../components/mapLeftContent.vue";
import mapRight from "../components/mapRightContent.vue";
// import mapCentre from "../components/mapCentre.vue"
@ -174,7 +202,13 @@ import shop from "../../components/shop/index.vue";
import weilan from "@/utils/data/围栏1.json";
import { regionalsettings, roadsetting, fence, getDeviceList, levelQywg } from "@/api/bigScreenApi"
import {
regionalsettings,
roadsetting,
fence,
getDeviceList,
levelQywg,
} from "@/api/bigScreenApi";
export default {
name: "myMap",
@ -188,6 +222,9 @@ export default {
},
data() {
return {
zoom: 16,
center: [121.59996, 31.197646],
map: null,
globalMap: null,
basemap: null,
townCenter: [31.863971, 118.835418],
@ -219,17 +256,24 @@ export default {
mypoint: {},
leftAnimationData: true,
rightAnimationData: true,
electronicMap: null, // 电子地图
satelliteMap: null, // 卫星地图
satelliteNoteMap:null, // 卫星地图注记
wanggeData: null, // 区域网格数据
quyuData: null, // 重点区域数据
weilanData: null, // 考勤围栏数据
luduanData: null, // 重点路段
personLine: [], // 在线人员情况
electronicMap: null, // 电子地图
satelliteMap: null, // 卫星地图
satelliteNoteMap: null, // 卫星地图注记
wanggeData: null, // 区域网格数据
quyuData: null, // 重点区域数据
weilanData: null, // 考勤围栏数据
luduanData: null, // 重点路段
personLine: [], // 在线人员情况
};
},
methods: {
init(o) {
this.map = o;
// o.setMapStyle('amap://styles/darkblue')
o.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
// console.log(o.getCenter())
// console.log(this.$refs.map.$$getInstance())
},
initMap() {
this.globalMap = L.map("showMap", {
center: this.townCenter, // 地图中心[纬度，经度]
@ -298,7 +342,7 @@ export default {
// minZoom: 5,
// color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
// })
this.globalMap.addLayer(this.basemap)
this.globalMap.addLayer(this.basemap);
// L.tileLayer
// .chinaProvider("GaoDe.Satellite.Annotion", {
// maxZoom: 18,
@ -363,10 +407,10 @@ export default {
// this.addLayer3();
// this.addLayer4();
// this.addLayer5();
this.addLayer6(); // 重点区域
this.addLayer7(); // 重点路段
this.addLayer6(); // 重点区域
this.addLayer7(); // 重点路段
this.addLayer8(); // 网格and围栏
this.addLayer8(); // 网格and围栏
// 定位点 118.797442,32.087219 南京站 测试偏移量点位
L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
@ -382,7 +426,7 @@ export default {
// 网格
levelQywg({ level: 1 }).then((res) => {
this.wanggeData = res.data;
res.data.forEach(element=>{
res.data.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr);
let geojson = L.geoJSON(shapeStr.features[0], {
pane: "mapLayer2",
@ -405,33 +449,45 @@ export default {
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);
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,'网格');
})
});
console.log(res, "网格");
});
// .addTo(this.mapLayers.mapLayer8);
// 加载围栏
fence({ pageNum: 1, pageSize: 100 }).then(res=>{
fence({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,'考勤围栏');
this.weilanData = res.rows;
res.rows.forEach(element=>{
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);
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,
@ -439,12 +495,17 @@ export default {
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") {
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",
@ -474,8 +535,8 @@ export default {
},
}).addTo(this.mapLayers.mapLayer8);
}
})
})
});
});
},
addLayer1() {
this.mapLayers.mapLayer1.clearLayers();
@ -502,43 +563,43 @@ export default {
this.globalMap.fitBounds(this.mapLayer1);
},
// 执法人员点位
getTem(){
getTem() {
this.personLine = [];
getDeviceList({imei:'861316060217211'}).then(res=>{
console.log('res0',res);
getDeviceList({ imei: "861316060217211" }).then((res) => {
console.log("res0", res);
let obj = [];
if(res.data.obj) {
res.data.obj.forEach(element => {
if(element.status == 0) {
if (res.data.obj) {
res.data.obj.forEach((element) => {
if (element.status == 0) {
// 离线
obj.push(element)
obj.push(element);
this.personLine.push(element);
} else if(element.status == 1) {
} else if (element.status == 1) {
// 在线
obj.push(element)
obj.push(element);
this.personLine.push(element);
console.log(this.personLine,'请求回来的在线情况');
} else if(element.status == 9) {
console.log(this.personLine, "请求回来的在线情况");
} else if (element.status == 9) {
// 掉线
}
});
} else {
this.$modal.msgError('执法人员' + res.data.msg);
this.$modal.msgError("执法人员" + res.data.msg);
}
this.addMark(obj);
})
});
},
getIcons(name,src){
getIcons(name, src) {
let icon = L.divIcon({
className: 'divIcon-marker',
className: "divIcon-marker",
html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`,
iconSize: [100, 50],
});
return icon
return icon;
},
addMark(obj) {
this.mapEvent.mapEvent1.clearLayers();
let ico1 = require("../../../assets/images/icon/icon1.png")
let ico1 = require("../../../assets/images/icon/icon1.png");
// let ico1 = L.icon({
// iconUrl: require("../../../assets/images/icon/icon1.png"),
// iconSize: [52, 81],
@ -560,13 +621,13 @@ export default {
iconSize: [52, 81],
});
if (this.actionMap == 1) {
obj.forEach((item,index)=>{
obj.forEach((item, index) => {
let marker = L.marker(
{
lng: item.longitude,
lat: item.latitude,
},
{ icon: this.getIcons(item.userName,ico1) }
{ icon: this.getIcons(item.userName, ico1) }
)
.bindPopup(
`
@ -597,15 +658,11 @@ export default {
.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) {
@ -647,7 +704,7 @@ export default {
// marker.addTo(this.mapEvent.mapEvent1);
// this.markerClick(marker, index);
// }
// } else
// } else
if (this.actionMap == 2) {
let marker;
if (item.properties.name == "普通事件") {
@ -886,7 +943,7 @@ export default {
document
.querySelector("#personClick" + index)
.addEventListener("click", () => {
this.$refs.personageTrack.open("person",item);
this.$refs.personageTrack.open("person", item);
});
} else if (this.actionMap == 2) {
document
@ -1016,11 +1073,11 @@ export default {
// 重点区域
addLayer6() {
// this.mapLayers.mapLayer5.clearLayers();
regionalsettings({ pageNum: 1, pageSize: 100 }).then(res=>{
regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,'重点区域');
this.quyuData = res.rows;
res.rows.forEach(element => {
let shapeStr = JSON.parse(element.shapeStr)
res.rows.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr);
let geojson = L.geoJSON(
shapeStr.features[0],
{
@ -1036,28 +1093,34 @@ export default {
},
{ 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);
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=>{
roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,'重点路段');
this.luduanData = res.rows;
res.rows.forEach(element=>{
let shapeStr = JSON.parse(element.shapeStr)
res.rows.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr);
let geojson = L.geoJSON(
shapeStr.features[0],
{
@ -1077,18 +1140,24 @@ export default {
// 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);
})
})
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;
@ -1120,7 +1189,7 @@ export default {
// 切换地图事件
changeMap(id) {
this.actionMap = id;
if(id == 1) {
if (id == 1) {
this.getTem();
} else {
this.addMark();
@ -1160,7 +1229,7 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.initMap();
// this.initMap();
});
},
};

Write Preview
Loading…
Cancel
Save