From 9d389dee9dfb78bf4a57ff41ba11d61c65134442 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: Fri, 19 Dec 2025 14:13:42 +0800
Subject: [PATCH] 地图修改
---
src/views/basicDataManage/areaManage/component/areaDialog.vue | 2
src/views/basicDataManage/areaManage/index.vue | 2
src/views/bigScreen/components/mapNew.vue | 331 +++++++++++++++++++++++++++++++++++++++++++++++
index.html | 16 +-
package.json | 2
src/views/bigScreen/components/screen.vue | 6
src/types/areaManage.d.ts | 2
src/views/bigScreen/components/map.vue | 6
8 files changed, 349 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index 37baf26..5d5aa1a 100644
--- a/index.html
+++ b/index.html
@@ -17,15 +17,15 @@
<body>
<div id="app"></div>
<script type="text/javascript">
- var _hmt = _hmt || [];
- (function () {
- var hm = document.createElement('script');
- hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(hm, s);
- })();
+ // var _hmt = _hmt || [];
+ // (function () {
+ // var hm = document.createElement('script');
+ // hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
+ // var s = document.getElementsByTagName('script')[0];
+ // s.parentNode.insertBefore(hm, s);
+ // })();
</script>
<script type="module" src="/src/main.ts"></script>
- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>
+<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>-->
</body>
</html>
diff --git a/package.json b/package.json
index d7cdde8..86e635c 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"sortablejs": "^1.15.0",
"splitpanes": "^3.1.1",
"vue": "^3.2.36",
- "vue-baidu-map-3x": "^1.0.35",
+
"vue-clipboard3": "^2.0.0",
"vue-grid-layout": "^3.0.0-beta1",
"vue-i18n": "^9.1.10",
diff --git a/src/types/areaManage.d.ts b/src/types/areaManage.d.ts
index f4067b1..c4e8e8d 100644
--- a/src/types/areaManage.d.ts
+++ b/src/types/areaManage.d.ts
@@ -44,4 +44,4 @@
lat: string;
};
lngFormRules:{},
-}
\ No newline at end of file
+}
diff --git a/src/views/basicDataManage/areaManage/component/areaDialog.vue b/src/views/basicDataManage/areaManage/component/areaDialog.vue
index 0b5c743..0e6b1b8 100644
--- a/src/views/basicDataManage/areaManage/component/areaDialog.vue
+++ b/src/views/basicDataManage/areaManage/component/areaDialog.vue
@@ -198,4 +198,4 @@
box-shadow: none;
margin-left: -3px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/basicDataManage/areaManage/index.vue b/src/views/basicDataManage/areaManage/index.vue
index 3a003a1..ea49b1d 100644
--- a/src/views/basicDataManage/areaManage/index.vue
+++ b/src/views/basicDataManage/areaManage/index.vue
@@ -167,4 +167,4 @@
</script>
<style scoped lang="scss">
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/bigScreen/components/map.vue b/src/views/bigScreen/components/map.vue
index 5f7cc2d..9a5a947 100644
--- a/src/views/bigScreen/components/map.vue
+++ b/src/views/bigScreen/components/map.vue
@@ -58,7 +58,7 @@
import screen from './components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';
-import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'
+// import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'
// 定义接口来定义对象的类型
interface TableDataState {
@@ -87,7 +87,7 @@
}
export default defineComponent({
name: 'map',
- components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
+ // components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
setup() {
const state = reactive<TableDataState>({
polygonPath1: [],
@@ -216,4 +216,4 @@
text-align: center;
padding: 10px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/bigScreen/components/mapNew.vue b/src/views/bigScreen/components/mapNew.vue
new file mode 100644
index 0000000..6d60f56
--- /dev/null
+++ b/src/views/bigScreen/components/mapNew.vue
@@ -0,0 +1,331 @@
+<template>
+<!-- <div className="lnglat-info" style="padding: 10px; font-size: 16px;">-->
+<!-- 点击地图获取的经纬度：-->
+<!-- <span style="color: #1890ff; font-weight: bold;">-->
+<!-- {{ clickLngLat.lng ? `${clickLngLat.lng.toFixed(6)}, ${clickLngLat.lat.toFixed(6)}` : '未点击' }}-->
+<!-- </span>-->
+<!-- </div>-->
+
+ <div id="amap-container" className="amap-container"></div>
+</template>
+
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+// 1. 定义地图实例、点击经纬度、覆盖物存储数组（用于卸载销毁）
+const mapInstance = ref(null)
+let markerInstance = ref(null)
+const clickLngLat = ref({lng: null, lat: null})
+const clickHandler = ref(null)
+const mapOverlays = ref([])
+const IMAGE_URL = '/directions.png'
+const IMAGE_SIZE = [200, 200]
+
+
+const areaData = [
+ {
+ number: "1",
+ name: "1#电石库",
+
+ // 区块的经纬度范围（多边形顶点，需自行校准）
+ path: [
+ [87.672802, 43.938253],
+ [87.673339, 43.938416],
+ [87.673737, 43.937692],
+ [87.673177, 43.937565]
+
+ ],
+ color: "#ffff00",
+ boxTextPos: [87.673139, 43.938233],
+ textPos: [87.673021, 43.937968],
+ // 箭头的路径（起点→终点）
+ arrowPath: [
+ [87.673784, 43.937654],
+ [87.675316, 43.938126]
+ ],
+ arrowPathTop: [
+ [87.673847, 43.937731],
+ [87.673784, 43.937654],
+ [87.673784, 43.937654],
+ [87.673896, 43.937634],
+ ]
+ },
+ {
+ number: "2",
+ name: "渣浆清液池",
+ path: [
+ [87.672249, 43.937010],
+ [87.673610, 43.937440],
+ [87.674062, 43.936716],
+ [87.672639, 43.936326],
+ ],
+ color: "#061959", // 蓝色
+ boxTextPos: [87.672914, 43.937041],
+ textPos: [87.672770, 43.936821],
+ arrowPath: [
+ [87.673741, 43.937557],
+ [87.674395, 43.936358]
+ ],
+ arrowPathTop: [
+ [87.673689, 43.937484],
+ [87.673741, 43.937557],
+ [87.673741, 43.937557],
+ [87.673834, 43.937520],
+ ],
+ },
+ {
+ number: "3",
+ name: "中间罐区",
+ path: [
+ [87.673840, 43.937568],
+ [87.675365, 43.938071],
+ [87.675960, 43.936955],
+ [87.674426, 43.936479]
+ ],
+ color: "#048599",
+ boxTextPos: [87.674859, 43.937563],
+ textPos: [87.674609, 43.937334]
+ },
+ {
+ number: "4",
+ name: "3#冷冻",
+ path: [
+ [87.676018, 43.937887],
+ [87.676807, 43.938102],
+ [87.677192, 43.937500],
+ [87.676358, 43.937237]
+ ],
+ color: "green",
+ boxTextPos: [87.676434, 43.937979],
+ textPos: [87.676379, 43.937728]
+ },
+ {
+ number: "5",
+ name: "新增浓缩池",
+ path: [
+ [87.676222, 43.937022],
+ [87.677306, 43.937391],
+ [87.677502, 43.936910],
+ [87.676401, 43.936585]
+ ],
+ color: "3eec34",
+ boxTextPos: [87.676916, 43.937187],
+ textPos: [87.676646, 43.936978]
+ },
+ {
+ number: "6",
+ name: "3#精馏",
+ path: [
+ [87.675792, 43.938354],
+ [87.676530, 43.938581],
+ [87.676715, 43.938200],
+ [87.676004, 43.937952]
+ ],
+ color: "ff52e7",
+ boxTextPos: [87.676110, 43.938477],
+ textPos: [87.675993, 43.938254]
+ },
+ {
+ number: "7",
+ name: "3#压缩",
+ path: [
+ [87.674907, 43.938814],
+ [87.676179, 43.939139],
+ [87.676420, 43.938709],
+ [87.675199, 43.9382997]
+ ],
+ color: "0055eb",
+ boxTextPos: [87.675650, 43.938949],
+ textPos: [87.675500, 43.938733]
+ },
+ {
+ number: "8",
+ name: "2#精馏",
+ path: [
+ [87.674439, 43.938395],
+ [87.674910, 43.938539],
+ [87.675100, 43.938179],
+ [87.674625, 43.938054]
+ ],
+ color: "11feee",
+ boxTextPos: [87.674695, 43.938508],
+ textPos: [87.674566, 43.938284]
+ },
+ {
+ number: "9",
+ name: "1#精馏",
+ path: [
+ [87.673888, 43.938249],
+ [87.674334, 43.938358],
+ [87.674523, 43.938037],
+ [87.674037, 43.937911],
+ ],
+ color: "b330d2",
+ boxTextPos: [87.674116, 43.938315],
+ textPos: [87.674040, 43.938138]
+ },
+]
+
+
+// 3. 初始化高德地图 + 绘制覆盖物
+const initAMap = async () => {
+ try {
+ window._AMapSecurityConfig = {
+ securityJsCode: '75ffdb279adfda7feb06d74b3a0352d6',
+ }
+ const AMap = await AMapLoader.load({
+ key: '65cb3e4cbf9f62fd3500cc0f61146cf4',
+ version: '2.0',
+ plugins: ['AMap.MapType']
+ })
+
+ // 初始化地图
+ mapInstance.value = new AMap.Map('amap-container', {
+ viewMode: "3D",
+ zoom: 17.3,
+ center: [87.675600, 43.9376800],
+ resizeEnable: true,
+ })
+ mapInstance.value.addControl(new AMap.MapType({defaultType: 1}))
+ const customIcon = new AMap.Icon({
+ size: new AMap.Size(...IMAGE_SIZE),
+ image: IMAGE_URL, // 图片地址
+ imageSize: new AMap.Size(...IMAGE_SIZE)
+ })
+ markerInstance.value = new AMap.Marker({
+ position: [87.672260, 43.938300], // 图片放置的经纬度
+ icon: customIcon, // 使用自定义图片图标
+ anchor: 'bottom-center' // 图标锚点（图片底部中心对准经纬度点，定位更准确）
+ })
+ mapInstance.value.add(markerInstance.value)
+
+ areaData.forEach(area => {
+ const polygon = new AMap.Polygon({
+ path: area.path,
+ fillColor: area.color,
+ fillOpacity: 0.5,
+ strokeColor: area.color,
+ strokeWeight: 2
+ })
+ mapInstance.value.add(polygon)
+ mapOverlays.value.push(polygon)
+
+ const boxText = new AMap.Text({
+ position: area.boxTextPos,
+ text: `
+ <div style="text-align: center; line-height: 1.2;width: 9px;">
+ <span style="font-size: 16px; font-weight: bold; color: #000000;">${area.number}</span>
+ </div>
+ `,
+
+ style: {
+ padding:'0',
+ background: '#ffffff',
+ border: '1px solid #ff0000',
+ color: '#000000'
+ }
+ })
+ mapInstance.value.add(boxText)
+ mapOverlays.value.push(boxText)
+
+ const text = new AMap.Text({
+ position: area.textPos,
+ text: `${area.name}\n${area.distance || ''}`,
+ style: {
+ background: 'transparent',
+ border: '1px solid white',
+ fontSize: '12px',
+ color: '#ffffff',
+ fontWeight: 'bold',
+ }
+ })
+ mapInstance.value.add(text)
+ mapOverlays.value.push(text)
+ if (area.arrowPath) {
+ // 箭头折线
+ const arrowLine = new AMap.Polyline({
+ path: area.arrowPath,
+ strokeColor: '#ff0000',
+ strokeWeight: 3,
+ lineCap: 'round',
+ strokeStyle: 'solid',
+ strokeOpacity: 1,
+ })
+ mapInstance.value.add(arrowLine)
+ mapOverlays.value.push(arrowLine)
+ const arrowLineTop = new AMap.Polyline({
+ path: area.arrowPathTop,
+ strokeColor: '#ff0000',
+ strokeWeight: 4,
+ lineCap: 'round',
+ strokeStyle: 'solid',
+ strokeOpacity: 1,
+ })
+ mapInstance.value.add(arrowLineTop)
+ mapOverlays.value.push(arrowLineTop)
+
+ const arrowText = new AMap.Marker({
+ position:[87.673389, 43.937851],
+ content: '<div style="width:100px;background: transparent; border: none;font-weight: 600; color: #ff0000; font-size: 13px;">155m 方位1</div>',
+ })
+ mapInstance.value.add(arrowText)
+ mapOverlays.value.push(arrowText)
+
+ const arrowTextTwo = new AMap.Marker({
+ position:[87.674435, 43.936500],
+ content: '<div style="width:100px;background: transparent; border: none;font-weight: 600; color: #ff0000; font-size: 13px;">145m 方位2</div>',
+ })
+ mapInstance.value.add(arrowTextTwo)
+ mapOverlays.value.push(arrowTextTwo)
+
+
+ }
+ })
+
+ // clickHandler.value = (e) => {
+ // const {lng, lat} = e.lnglat
+ // clickLngLat.value = {lng, lat}
+ // console.log('点击位置经纬度：', `经度：${lng.toFixed(6)}，纬度：${lat.toFixed(6)}`)
+ // }
+ // mapInstance.value.on('click', clickHandler.value)
+
+ } catch (error) {
+ console.error('高德地图加载失败：', error)
+ }
+}
+
+
+// 4. 组件生命周期
+onMounted(() => {
+ initAMap()
+})
+
+onUnmounted(() => {
+ // 销毁地图实例 + 移除点击事件 + 销毁所有覆盖物
+ if (mapInstance.value) {
+ // 移除点击事件
+ if (clickHandler.value) {
+ mapInstance.value.off('click', clickHandler.value)
+ }
+ // 销毁所有覆盖物
+ mapOverlays.value.forEach(overlay => {
+ mapInstance.value.remove(overlay)
+ })
+ // 销毁地图
+ mapInstance.value.destroy()
+ mapInstance.value = null
+ }
+})
+</script>
+
+<style scoped>
+.amap-container {
+ width: 100%;
+ height: 600px;
+}
+
+::v-deep(.amap-ctrl-list-layer) {
+ display: none !important;
+}
+</style>
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index ac0ea94..c3321bc 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -284,8 +284,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
-import Map from './map.vue'
-import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
+import Map from './mapNew.vue'
+// import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
@@ -356,7 +356,7 @@
export default defineComponent({
name: 'bigScreen',
- components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
+ components: {Map },
props:{
isFull: Boolean
},
--
Gitblit v1.9.2