suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
10
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": { "dependencies": {
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"@vuemap/vue-amap": "^0.1.17",
"axios": "0.24.0", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",
"core-js": "3.25.3", "core-js": "3.25.3",

12
src/main.js
Unescape View File

@ -77,6 +77,18 @@ Vue.use(plugins)
Vue.use(VueMeta) Vue.use(VueMeta)
DictData.install() 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 * If you don't want to use mock-server
* you want to use MockJs for mock api * you want to use MockJs for mock api

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

@ -1,12 +1,36 @@
<template> <template>
<div class="map-main"> <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="left-bg">
<div class="bgt"></div> <div class="bgt"></div>
</div> </div>
<transition name="left-animationMap"> <transition name="left-animationMap">
<div class="map-left" v-if="leftAnimationData"> <div class="map-left" v-if="leftAnimationData">
<map-left :personLine='personLine'></map-left> <map-left :personLine="personLine"></map-left>
</div> </div>
</transition> </transition>
@ -93,7 +117,12 @@
</div> </div>
<transition name="right-animationMap"> <transition name="right-animationMap">
<div class="map-right" v-if="rightAnimationData"> <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> </div>
</transition> </transition>
@ -141,10 +170,10 @@ import L from "leaflet";
// import "proj4"; // import "proj4";
// import "proj4leaflet"; // 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.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 zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
// import shijianfenbu from "@/utils/mapJson/shijianfenbu.json" // import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
// import zhifacheliang from "@/utils/mapJson/zhifacheliang.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 zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json"; // import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
import mapLeft from "../components/mapLeftContent.vue"; import mapLeft from "../components/mapLeftContent.vue";
import mapRight from "../components/mapRightContent.vue"; import mapRight from "../components/mapRightContent.vue";
// import mapCentre from "../components/mapCentre.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 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 { export default {
name: "myMap", name: "myMap",
@ -188,6 +222,9 @@ export default {
}, },
data() { data() {
return { return {
zoom: 16,
center: [121.59996, 31.197646],
map: null,
globalMap: null, globalMap: null,
basemap: null, basemap: null,
townCenter: [31.863971, 118.835418], townCenter: [31.863971, 118.835418],
@ -219,17 +256,24 @@ export default {
mypoint: {}, mypoint: {},
leftAnimationData: true, leftAnimationData: true,
rightAnimationData: true, rightAnimationData: true,
electronicMap: null, // 电子地图 electronicMap: null, // 电子地图
satelliteMap: null, // 卫星地图 satelliteMap: null, // 卫星地图
satelliteNoteMap:null, // 卫星地图注记 satelliteNoteMap: null, // 卫星地图注记
wanggeData: null, // 区域网格数据 wanggeData: null, // 区域网格数据
quyuData: null, // 重点区域数据 quyuData: null, // 重点区域数据
weilanData: null, // 考勤围栏数据 weilanData: null, // 考勤围栏数据
luduanData: null, // 重点路段 luduanData: null, // 重点路段
personLine: [], // 在线人员情况 personLine: [], // 在线人员情况
}; };
}, },
methods: { 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() { initMap() {
this.globalMap = L.map("showMap", { this.globalMap = L.map("showMap", {
center: this.townCenter, // 地图中心[纬度，经度] center: this.townCenter, // 地图中心[纬度，经度]
@ -298,7 +342,7 @@ export default {
// minZoom: 5, // minZoom: 5,
// color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜 // color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
// }) // })
this.globalMap.addLayer(this.basemap) this.globalMap.addLayer(this.basemap);
// L.tileLayer // L.tileLayer
// .chinaProvider("GaoDe.Satellite.Annotion", { // .chinaProvider("GaoDe.Satellite.Annotion", {
// maxZoom: 18, // maxZoom: 18,
@ -363,10 +407,10 @@ export default {
// this.addLayer3(); // this.addLayer3();
// this.addLayer4(); // this.addLayer4();
// this.addLayer5(); // this.addLayer5();
this.addLayer6(); // 重点区域 this.addLayer6(); // 重点区域
this.addLayer7(); // 重点路段 this.addLayer7(); // 重点路段
this.addLayer8(); // 网格and围栏 this.addLayer8(); // 网格and围栏
// 定位点 118.797442,32.087219 南京站 测试偏移量点位 // 定位点 118.797442,32.087219 南京站 测试偏移量点位
L.marker(L.latLng(31.96840071263104, 118.79808425903322), { L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
@ -382,7 +426,7 @@ export default {
// 网格 // 网格
levelQywg({ level: 1 }).then((res) => { levelQywg({ level: 1 }).then((res) => {
this.wanggeData = res.data; this.wanggeData = res.data;
res.data.forEach(element=>{ res.data.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr); let shapeStr = JSON.parse(element.shapeStr);
let geojson = L.geoJSON(shapeStr.features[0], { let geojson = L.geoJSON(shapeStr.features[0], {
pane: "mapLayer2", pane: "mapLayer2",
@ -405,33 +449,45 @@ export default {
iconAnchor: [75, 12], iconAnchor: [75, 12],
}); });
// 多边形上的标记点; // 多边形上的标记点;
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, { L.marker(
pane: "mapLayer3", {
icon: myIcon, lng: shapeStr.features[1].geometry.coordinates[0],
}).addTo(this.mapLayers.mapLayer8); 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); // .addTo(this.mapLayers.mapLayer8);
// 加载围栏 // 加载围栏
fence({ pageNum: 1, pageSize: 100 }).then(res=>{ fence({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,'考勤围栏'); // console.log(res,'考勤围栏');
this.weilanData = res.rows; this.weilanData = res.rows;
res.rows.forEach(element=>{ res.rows.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr); let shapeStr = JSON.parse(element.shapeStr);
// 圆形围栏 // 圆形围栏
if(shapeStr.features[0].geometry.type == "Point") { if (shapeStr.features[0].geometry.type == "Point") {
let geojson2 = L.circle([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], { let geojson2 = L.circle(
radius: shapeStr.features[0].properties.radius, [
color: "#62E1FA", shapeStr.features[0].geometry.coordinates[1],
weight: 1, shapeStr.features[0].geometry.coordinates[0],
fillColor: "#62E1FA", ],
fillOpacity: 0.3, {
pane: "mapLayer2" radius: shapeStr.features[0].properties.radius,
}).addTo(this.mapLayers.mapLayer8); color: "#62E1FA",
weight: 1,
fillColor: "#62E1FA",
fillOpacity: 0.3,
pane: "mapLayer2",
}
).addTo(this.mapLayers.mapLayer8);
let myIcon = L.divIcon({ let myIcon = L.divIcon({
className: "land-name5", className: "land-name5",
html: element.name, html: element.name,
@ -439,12 +495,17 @@ export default {
iconAnchor: [75, 12], iconAnchor: [75, 12],
}); });
// 多边形上的标记点; // 多边形上的标记点;
L.marker([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], { L.marker(
pane: "mapLayer3", [
icon: myIcon, shapeStr.features[0].geometry.coordinates[1],
}).addTo(this.mapLayers.mapLayer8); shapeStr.features[0].geometry.coordinates[0],
],
} else if(shapeStr.features[0].geometry.type == "Polygon") { {
pane: "mapLayer3",
icon: myIcon,
}
).addTo(this.mapLayers.mapLayer8);
} else if (shapeStr.features[0].geometry.type == "Polygon") {
// 多边形围栏 // 多边形围栏
let geojson2 = L.geoJSON(shapeStr.features[0], { let geojson2 = L.geoJSON(shapeStr.features[0], {
pane: "mapLayer2", pane: "mapLayer2",
@ -474,8 +535,8 @@ export default {
}, },
}).addTo(this.mapLayers.mapLayer8); }).addTo(this.mapLayers.mapLayer8);
} }
}) });
}) });
}, },
addLayer1() { addLayer1() {
this.mapLayers.mapLayer1.clearLayers(); this.mapLayers.mapLayer1.clearLayers();
@ -502,43 +563,43 @@ export default {
this.globalMap.fitBounds(this.mapLayer1); this.globalMap.fitBounds(this.mapLayer1);
}, },
// 执法人员点位 // 执法人员点位
getTem(){ getTem() {
this.personLine = []; this.personLine = [];
getDeviceList({imei:'861316060217211'}).then(res=>{ getDeviceList({ imei: "861316060217211" }).then((res) => {
console.log('res0',res); console.log("res0", res);
let obj = []; let obj = [];
if(res.data.obj) { if (res.data.obj) {
res.data.obj.forEach(element => { res.data.obj.forEach((element) => {
if(element.status == 0) { if (element.status == 0) {
// 离线 // 离线
obj.push(element) obj.push(element);
this.personLine.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); this.personLine.push(element);
console.log(this.personLine,'请求回来的在线情况'); console.log(this.personLine, "请求回来的在线情况");
} else if(element.status == 9) { } else if (element.status == 9) {
// 掉线 // 掉线
} }
}); });
} else { } else {
this.$modal.msgError('执法人员' + res.data.msg); this.$modal.msgError("执法人员" + res.data.msg);
} }
this.addMark(obj); this.addMark(obj);
}) });
}, },
getIcons(name,src){ getIcons(name, src) {
let icon = L.divIcon({ let icon = L.divIcon({
className: 'divIcon-marker', className: "divIcon-marker",
html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`, html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`,
iconSize: [100, 50], iconSize: [100, 50],
}); });
return icon return icon;
}, },
addMark(obj) { addMark(obj) {
this.mapEvent.mapEvent1.clearLayers(); this.mapEvent.mapEvent1.clearLayers();
let ico1 = require("../../../assets/images/icon/icon1.png") let ico1 = require("../../../assets/images/icon/icon1.png");
// let ico1 = L.icon({ // let ico1 = L.icon({
// iconUrl: require("../../../assets/images/icon/icon1.png"), // iconUrl: require("../../../assets/images/icon/icon1.png"),
// iconSize: [52, 81], // iconSize: [52, 81],
@ -560,13 +621,13 @@ export default {
iconSize: [52, 81], iconSize: [52, 81],
}); });
if (this.actionMap == 1) { if (this.actionMap == 1) {
obj.forEach((item,index)=>{ obj.forEach((item, index) => {
let marker = L.marker( let marker = L.marker(
{ {
lng: item.longitude, lng: item.longitude,
lat: item.latitude, lat: item.latitude,
}, },
{ icon: this.getIcons(item.userName,ico1) } { icon: this.getIcons(item.userName, ico1) }
) )
.bindPopup( .bindPopup(
` `
@ -597,15 +658,11 @@ export default {
.openPopup(); .openPopup();
marker.addTo(this.mapEvent.mapEvent1); marker.addTo(this.mapEvent.mapEvent1);
this.markerClick(marker, index, item); this.markerClick(marker, index, item);
}) });
} else if (this.actionMap == 2) { } else if (this.actionMap == 2) {
} else if (this.actionMap == 3) { } else if (this.actionMap == 3) {
} else if (this.actionMap == 4) { } else if (this.actionMap == 4) {
} else if (this.actionMap == 5) { } else if (this.actionMap == 5) {
} }
point.features.map((item, index) => { point.features.map((item, index) => {
// if (this.actionMap == 1) { // if (this.actionMap == 1) {
@ -886,7 +943,7 @@ export default {
document document
.querySelector("#personClick" + index) .querySelector("#personClick" + index)
.addEventListener("click", () => { .addEventListener("click", () => {
this.$refs.personageTrack.open("person",item); this.$refs.personageTrack.open("person", item);
}); });
} else if (this.actionMap == 2) { } else if (this.actionMap == 2) {
document document
@ -1016,11 +1073,11 @@ export default {
// 重点区域 // 重点区域
addLayer6() { addLayer6() {
// this.mapLayers.mapLayer5.clearLayers(); // this.mapLayers.mapLayer5.clearLayers();
regionalsettings({ pageNum: 1, pageSize: 100 }).then(res=>{ regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,'重点区域'); // console.log(res,'重点区域');
this.quyuData = res.rows; this.quyuData = res.rows;
res.rows.forEach(element => { res.rows.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr) let shapeStr = JSON.parse(element.shapeStr);
let geojson = L.geoJSON( let geojson = L.geoJSON(
shapeStr.features[0], shapeStr.features[0],
{ {
@ -1042,22 +1099,28 @@ export default {
html: element.name, html: element.name,
iconSize: [120, 68], iconSize: [120, 68],
}); });
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, { L.marker(
pane: "mapLayer4", {
icon: myIcon1, lng: shapeStr.features[1].geometry.coordinates[0],
}).addTo(this.mapLayers.mapLayer6); lat: shapeStr.features[1].geometry.coordinates[1],
},
{
pane: "mapLayer4",
icon: myIcon1,
}
).addTo(this.mapLayers.mapLayer6);
}); });
}) });
// this.mapLayer5 = geojson.getBounds() // this.mapLayer5 = geojson.getBounds()
}, },
// 重点路段 // 重点路段
addLayer7() { addLayer7() {
// this.mapLayers.mapLayer7.clearLayers(); // this.mapLayers.mapLayer7.clearLayers();
roadsetting({ pageNum: 1, pageSize: 100 }).then(res=>{ roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
// console.log(res,'重点路段'); // console.log(res,'重点路段');
this.luduanData = res.rows; this.luduanData = res.rows;
res.rows.forEach(element=>{ res.rows.forEach((element) => {
let shapeStr = JSON.parse(element.shapeStr) let shapeStr = JSON.parse(element.shapeStr);
let geojson = L.geoJSON( let geojson = L.geoJSON(
shapeStr.features[0], shapeStr.features[0],
{ {
@ -1083,12 +1146,18 @@ export default {
html: element.name, html: element.name,
iconSize: [120, 68], iconSize: [120, 68],
}); });
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, { L.marker(
pane: "mapLayer4", {
icon: myIcon1, lng: shapeStr.features[1].geometry.coordinates[0],
}).addTo(this.mapLayers.mapLayer7); lat: shapeStr.features[1].geometry.coordinates[1],
}) },
}) {
pane: "mapLayer4",
icon: myIcon1,
}
).addTo(this.mapLayers.mapLayer7);
});
});
}, },
actionBtn(id) { actionBtn(id) {
this.action = id; this.action = id;
@ -1120,7 +1189,7 @@ export default {
// 切换地图事件 // 切换地图事件
changeMap(id) { changeMap(id) {
this.actionMap = id; this.actionMap = id;
if(id == 1) { if (id == 1) {
this.getTem(); this.getTem();
} else { } else {
this.addMark(); this.addMark();
@ -1160,7 +1229,7 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initMap(); // this.initMap();
}); });
}, },
}; };

Write Preview
Loading…
Cancel
Save