大屏地图作为整体底图 修改
This commit is contained in:
996555510
parent
3689cbf6f6
commit
d76df1be8a
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
**/*.log
|
||||
|
||||
tests/**/coverage/
|
||||
tests/e2e/reports
|
||||
selenium-debug.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.local
|
||||
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
"echarts": "^5.5.0",
|
||||
"element-plus": "^2.6.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
|
|
@ -3562,6 +3563,11 @@
|
|||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||
},
|
||||
"node_modules/mlly": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"echarts": "^5.5.0",
|
||||
"element-plus": "^2.6.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ var bmapcfg = {
|
|||
'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
|
||||
//这里我直接用的路径是/static/bmap_offline_demo/tiles，如果瓦片数量较大，可改为瓦片服务的地址
|
||||
tiles_dir: "images", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目
|
||||
tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
|
||||
tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
|
||||
tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
|
||||
tiles_path : 'http://111.229.30.246:4008/HeBeiDarkMap/',
|
||||
tiles_hybrid: 'http://111.229.30.246:4008/HeBeiDarkMap/', //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
|
||||
tiles_self : 'http://111.229.30.246:4008/HeBeiDarkMap/' //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
|
||||
// tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
|
||||
// tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
|
||||
// tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
import mitt from 'mitt';
|
||||
export const emitter = mitt();
|
||||
|
|
@ -2,12 +2,16 @@
|
|||
import { ref } from "vue";
|
||||
import { RouterView } from "vue-router";
|
||||
import ScaleScreen from "@/components/scale-screen";
|
||||
import Left from "./component/left.vue";
|
||||
import Right from "./component/right.vue";
|
||||
import Center from "./component/center.vue";
|
||||
import Headers from "./header.vue";
|
||||
import Setting from "./setting.vue";
|
||||
import { useSettingStore } from "@/stores/index";
|
||||
import { storeToRefs } from "pinia";
|
||||
import MessageContent from "@/components/Plugins/MessageContent";
|
||||
import Map from "./component/map.vue"
|
||||
import Map from "./component/map.vue";
|
||||
import Home from "./index/index.vue"
|
||||
const settingStore = useSettingStore();
|
||||
const { isScale } = storeToRefs(settingStore);
|
||||
const wrapperStyle = {};
|
||||
|
|
@ -26,11 +30,27 @@ const wrapperStyle = {};
|
|||
:wrapperStyle="wrapperStyle"
|
||||
:autoScale="isScale"
|
||||
>
|
||||
<Map width="12960"
|
||||
height="2430"></Map>
|
||||
<div class="content_wrap">
|
||||
<Headers />
|
||||
<RouterView />
|
||||
<!-- 背景层 -->
|
||||
<div class="background_layer">
|
||||
<Map />
|
||||
<div class="header_layer">
|
||||
<!-- <Headers /> -->
|
||||
</div>
|
||||
<div class="left">
|
||||
<Left title=""></Left>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Right title=""></Right>
|
||||
</div>
|
||||
<Center class="center" />
|
||||
</div>
|
||||
|
||||
<!-- 前景层 -->
|
||||
<!-- <div class="foreground_layer">
|
||||
<Headers />
|
||||
<RouterView />
|
||||
</div> -->
|
||||
<!-- <MessageContent /> -->
|
||||
</div>
|
||||
</scale-screen>
|
||||
|
|
@ -40,11 +60,43 @@ const wrapperStyle = {};
|
|||
.content_wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 16px 16px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-image: url("@/assets/img/pageBg.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
overflow: hidden; // 防止地图溢出边界
|
||||
}
|
||||
|
||||
.background_layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// z-index: 0; // 确保在前景层之下
|
||||
position: relative;
|
||||
.header_layer{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.left{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
}
|
||||
.right{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
}
|
||||
.center{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.foreground_layer {
|
||||
position: relative;
|
||||
// z-index: 1; // 确保在背景层之上
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,10 +47,6 @@
|
|||
<DeviceInfoComponentTwo :deviceInfo="deviceInfoTwo" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showMap" class="map-container">
|
||||
<!-- <div id="baiduMap" style="width: 100%; height: 100%;"></div> -->
|
||||
<Map @show-device-info="handleShowDeviceInfo"></Map>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -67,7 +63,7 @@ import hub from "@/assets/img/hub.png";
|
|||
import { getDeviceList } from "@/api/modules/index";
|
||||
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
|
||||
import Map from "./map.vue"
|
||||
|
||||
import { emitter } from '@/utils/eventBus';
|
||||
const showServiceArea = ref(false);
|
||||
const showMap = ref(true);
|
||||
const showDeviceInfo = ref(false);
|
||||
|
|
@ -131,12 +127,18 @@ const deviceInfoTwo = ref({
|
|||
|
||||
// const deviceInfo = ref({});
|
||||
function handleShowDeviceInfo(data) {
|
||||
console.log("设备信息数据:", data);
|
||||
if(data.deviceTypeId=="22"){
|
||||
console.log("接收到设备信息:", data);
|
||||
|
||||
// 关闭其他面板
|
||||
showDeviceInfo.value = false;
|
||||
showDeviceInfoTwo.value = false;
|
||||
|
||||
if (data.deviceTypeId === "22" || data.deviceTypeId === "44") {
|
||||
showDeviceInfo.value = true;
|
||||
} else if(data.deviceTypeId=="15"){
|
||||
} else if (data.deviceTypeId === "15" || data.deviceTypeId === "53") {
|
||||
showDeviceInfoTwo.value = true;
|
||||
}
|
||||
|
||||
deviceInfo.value = data;
|
||||
}
|
||||
const closeDeviceInfo = () => {
|
||||
|
|
@ -145,46 +147,23 @@ const closeDeviceInfo = () => {
|
|||
showMap.value = true;
|
||||
};
|
||||
const mapFlag = ref(true);
|
||||
onMounted(async () => {
|
||||
// 初始化地图相关代码...
|
||||
// if (mapFlag.value) {
|
||||
// const map = new BMap.Map("baiduMap");
|
||||
// const point = new BMap.Point(116.827009, 37.890385);
|
||||
// map.setMinZoom(11);
|
||||
// map.setMaxZoom(19);
|
||||
// map.centerAndZoom(point, 11);
|
||||
// map.enableScrollWheelZoom(true);
|
||||
// }
|
||||
|
||||
// const query = {
|
||||
// area: "",
|
||||
// deviceType: 22,
|
||||
// pageNum: 1,
|
||||
// pageSize: 9999
|
||||
// };
|
||||
// 调用接口获取设备列表数据
|
||||
// try {
|
||||
// const res = await getDeviceList(query);
|
||||
// console.log("设备列表数据:", res);
|
||||
// // 在这里可以处理返回的数据，例如更新页面状态或渲染内容
|
||||
// } catch (error) {
|
||||
// console.error("请求设备列表失败:", error);
|
||||
// }
|
||||
onMounted(() => {
|
||||
emitter.on("show-device-info", handleShowDeviceInfo);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.center-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.map-container.bg-header {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 36%;
|
||||
top: 500px;
|
||||
left: 42.5%;
|
||||
// transform: translate(-50%, -50%);
|
||||
z-index: 2000;
|
||||
// box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
<template>
|
||||
<div id="baiduMap" style="width: 100%; height: 100%;">
|
||||
<div style="position:absolute;z-index:10;">
|
||||
<button @click="toggleType('22')">切换视频监控</button>
|
||||
<button @click="toggleType('44')">切换气象检测器</button>
|
||||
<button @click="toggleType('53')">切换广播</button>
|
||||
<button @click="toggleType('21')">切换情报板</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="baiduMap" style="width: 100%; height: 100%">
|
||||
<!-- <div style="position: absolute; z-index: 10; top: 10px; left: 10px">
|
||||
<button @click="toggleType('22')">切换视频监控</button>
|
||||
<button @click="toggleType('44')">切换气象检测器</button>
|
||||
<button @click="toggleType('53')">切换广播</button>
|
||||
<button @click="toggleType('21')">切换情报板</button>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from "vue";
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted } from "vue";
|
||||
import { getDeviceList } from "@/api/modules/index";
|
||||
const emit = defineEmits(['show-device-info']);
|
||||
import { emitter } from '@/utils/eventBus';
|
||||
const emit = defineEmits(["show-device-info"]);
|
||||
const markerMap = ref({
|
||||
'22': [],
|
||||
'44': [],
|
||||
'53': [],
|
||||
'21': []
|
||||
"22": [],
|
||||
"44": [],
|
||||
"53": [],
|
||||
"21": [],
|
||||
});
|
||||
const showType = ref({
|
||||
'22': true,
|
||||
'44': true,
|
||||
'53': true,
|
||||
'21': true
|
||||
"22": true,
|
||||
"44": true,
|
||||
"53": true,
|
||||
"21": true,
|
||||
});
|
||||
let map = null;
|
||||
|
||||
function toggleType(type) {
|
||||
showType.value[type] = !showType.value[type];
|
||||
markerMap.value[type].forEach(marker => {
|
||||
markerMap.value[type].forEach((marker) => {
|
||||
if (showType.value[type]) {
|
||||
map.addOverlay(marker);
|
||||
} else {
|
||||
|
|
@ -42,73 +42,56 @@ function toggleType(type) {
|
|||
// ...existing code...
|
||||
const selectedMarker = ref(null); // 当前选中的marker
|
||||
|
||||
const iconModules = import.meta.glob('@/assets/img/map/*.png', { eager: true, import: 'default' });
|
||||
const iconModules = import.meta.glob("@/assets/img/map/*.png", {
|
||||
eager: true,
|
||||
import: "default",
|
||||
});
|
||||
|
||||
function getIcon(type, active = false) {
|
||||
const iconName = {
|
||||
'22': active ? 'video-active.png' : 'video.png',
|
||||
'44': active ? 'weather-active.png' : 'weather.png',
|
||||
'53': active ? 'broadcast-active.png' : 'broadcast.png',
|
||||
'15': active ? 'info-active.png' : 'info.png'
|
||||
}[type] || 'default.png';
|
||||
const iconName =
|
||||
{
|
||||
"22": active ? "video-active.png" : "video.png",
|
||||
"44": active ? "weather-active.png" : "weather.png",
|
||||
"53": active ? "broadcast-active.png" : "broadcast.png",
|
||||
"15": active ? "info-active.png" : "info.png",
|
||||
}[type] || "default.png";
|
||||
|
||||
// 获取图片路径
|
||||
const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
|
||||
console.log("iconPath:", iconPath);
|
||||
return new BMap.Icon(iconPath, new BMap.Size(68,68));
|
||||
return new BMap.Icon(iconPath, new BMap.Size(68, 68));
|
||||
}
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
map = new BMap.Map("baiduMap");
|
||||
const point = new BMap.Point(116.827009, 37.890385);
|
||||
map = new BMap.Map("baiduMap");
|
||||
// const point = new BMap.Point(116.827009, 37.890385);
|
||||
// const point = new BMap.Point(116.92761921711724 , 38.001363273882994);
|
||||
const point = new BMap.Point(116.54300072996494 ,38.02274278314041);
|
||||
map.setMinZoom(11);
|
||||
map.setMaxZoom(17);
|
||||
map.centerAndZoom(point, 17);
|
||||
map.centerAndZoom(point, 14);
|
||||
map.enableScrollWheelZoom(true);
|
||||
// mapStyle={ style : "midnight" }
|
||||
// map.setMapStyle(mapStyle);
|
||||
map.centerAndZoom(point, 15); // 初始化地图
|
||||
|
||||
// // 设置深色风格
|
||||
// var styleJson = [
|
||||
// {
|
||||
// "featureType": "all",
|
||||
// "elementType": "all",
|
||||
// "stylers": {
|
||||
// "lightness": -40, // 设置亮度
|
||||
// "saturation": -80 // 设置饱和度
|
||||
// }
|
||||
// }
|
||||
// ];
|
||||
// map.setMapStyle({
|
||||
// styleJson: styleJson
|
||||
// });
|
||||
|
||||
// map.setMapStyleV2(
|
||||
// {styleJson:styleJson}
|
||||
// )
|
||||
// setTimeout(() => {
|
||||
// map.setMapStyleV2(
|
||||
// {styleJson:styleJson}
|
||||
// )},10)
|
||||
map.addEventListener("click", (e) => {
|
||||
console.log("点击的坐标：", e.point.lng, e.point.lat);
|
||||
});
|
||||
|
||||
const query = {
|
||||
area: "",
|
||||
deviceType: "",
|
||||
pageNum: 1,
|
||||
pageSize: 9999
|
||||
pageSize: 9999,
|
||||
};
|
||||
try {
|
||||
const res = await getDeviceList(query);
|
||||
// 假设res.data.list为设备数组
|
||||
console.log("设备列表:", res);
|
||||
res.rows.forEach(device => {
|
||||
res.rows.forEach((device) => {
|
||||
const type = String(device.deviceTypeId); // 22/53/15/44
|
||||
// if (!['22','53','15','44'].includes(type)) return;
|
||||
if (!device.lat || !device.lon) return;
|
||||
console.log("device:", type, device);
|
||||
const markerPoint = new BMap.Point(device.lon, device.lat);
|
||||
const marker = new BMap.Marker(markerPoint, { icon: getIcon(type)});
|
||||
const marker = new BMap.Marker(markerPoint, { icon: getIcon(type) });
|
||||
marker.deviceType = type; // 关键：给marker加上设备类型
|
||||
marker.deviceData = device; // 可选：存储设备完整信息
|
||||
console.log("marker:1111", marker);
|
||||
|
|
@ -120,19 +103,17 @@ onMounted(async () => {
|
|||
console.log("marker:", marker);
|
||||
map.addOverlay(marker);
|
||||
// 可选：marker点击事件
|
||||
marker.addEventListener('click', () => {
|
||||
marker.addEventListener("click", () => {
|
||||
selectedMarker.value = marker;
|
||||
console.log('tttttttt',marker.deviceType, selectedMarker.value)
|
||||
if(marker.deviceType === '22') {
|
||||
console.log("视频监控设备:", marker.deviceData);
|
||||
emit('show-device-info', marker.deviceData);
|
||||
} else if (marker.deviceType === '44') {
|
||||
console.log("气象检测器设备:", marker.deviceData);
|
||||
} else if (marker.deviceType === '53') {
|
||||
console.log("广播设备:", marker.deviceData);
|
||||
} else if (marker.deviceType === '15') {
|
||||
emit('show-device-info', marker.deviceData);
|
||||
console.log("情报板设备:", marker.deviceData);
|
||||
|
||||
if (marker.deviceType === "22") {
|
||||
emitter.emit("show-device-info", marker.deviceData);
|
||||
} else if (marker.deviceType === "44") {
|
||||
emitter.emit("show-device-info", marker.deviceData);
|
||||
} else if (marker.deviceType === "53") {
|
||||
emitter.emit("show-device-info", marker.deviceData);
|
||||
} else if (marker.deviceType === "15") {
|
||||
emitter.emit("show-device-info", marker.deviceData);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -140,4 +121,14 @@ onMounted(async () => {
|
|||
console.error("请求设备列表失败:", error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#baiduMap {
|
||||
// z-index: 1;
|
||||
}
|
||||
.content_wrap {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -57,12 +57,12 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
|
|||
strictPort: false,
|
||||
proxy: {
|
||||
[viteEnv.VITE_APP_CONTROL_BASE_API]: {
|
||||
target: 'http://172.16.1.113:8080/xjIotApi',
|
||||
target: 'http://192.168.1.117:8090/xjIotApi',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''),
|
||||
},
|
||||
[viteEnv.VITE_APP_BASE_API]: {
|
||||
target: 'http://172.16.1.113:8080/iotApi',
|
||||
target: 'http://192.168.1.117:8090/iotApi',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''),
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue