From e371388ba0201cec8068ebcd49295ac9e82e8e68 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 29 七月 2024 15:49:18 +0800
Subject: [PATCH] 新项目
---
src/views/bigScreen/components/map.vue | 119 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 66 insertions(+), 53 deletions(-)
diff --git a/src/views/bigScreen/components/map.vue b/src/views/bigScreen/components/map.vue
index 99de3f9..8ad0ed2 100644
--- a/src/views/bigScreen/components/map.vue
+++ b/src/views/bigScreen/components/map.vue
@@ -1,26 +1,27 @@
<template>
<baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 87.681678, lat: 43.943787}" :zoom="18" map-type="BMAP_SATELLITE_MAP" @ready="initMap">
- <!-- <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>-->
- <!-- <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>-->
- <!-- <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">-->
- <!-- <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground>-->
- <!-- </bm-overlay>-->
- <!-- <bm-overlay pane="mapPane" class="polys" @draw="initMap">-->
- <!-- <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>-->
- <!-- <bm-label content="1" :position="{lng: 85.127634, lat: 45.604176}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/>-->
- <!-- <bm-polygon :path="polygonPath4" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>-->
- <!-- <bm-polygon :path="polygonPath5" stroke-color="#01007f" fillColor="#01007f" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>-->
- <!-- <bm-label content="2" :position="{lng: 85.126928, lat: 45.603873}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/>-->
- <!-- <bm-polygon :path="polygonPath6" stroke-color="#ff00fa" fillColor="#ff00fa" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>-->
- <!-- <bm-label content="3" :position="{lng: 85.123940, lat: 45.604109}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/>-->
- <!-- <bm-polygon :path="polygonPath7" stroke-color="#02ff02" fillColor="#02ff02" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>-->
- <!-- <bm-label content="4" :position="{lng: 85.125489, lat: 45.603525}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/>-->
- <!-- <bm-polygon :path="polygonPath8" stroke-color="#028002" fillColor="#028002" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>-->
- <!-- <bm-label content="5" :position="{lng: 85.126150, lat: 45.603173}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/>-->
- <!-- <bm-polygon :path="polygonPath9" stroke-color="#008081" fillColor="#008081" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>-->
- <!-- <bm-label content="6" :position="{lng: 85.126805, lat: 45.602739}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="6" :zIndex="3"/>-->
- <!-- </bm-overlay>-->
- <!-- <bm-ground class="picBg" :bounds="{ne: {lng: 85.127749, lat: 45.600383}, sw:{lng: 85.106981, lat: 45.592463}}" imageURL="/bigMapPic.jpg" opacity="0.5"></bm-ground>-->
+ <bm-overlay pane="mapPane" class="polys" @draw="initMap">
+ <bm-polygon :path="polygonPath1" stroke-color="#ff52e7" fillColor="#ff52e7" :fillOpacity="0.5" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="1" :position="{lng: 87.68091, lat: 43.944295}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/>
+ <bm-polygon :path="polygonPath2" stroke-color="#35ff00" fillColor="#35ff00" :fillOpacity="0.5" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="2" :position="{lng: 87.679663, lat: 43.942726}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/>
+ <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="0.5" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="3" :position="{lng: 87.681455, lat: 43.943231}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/>
+ <bm-polygon :path="polygonPath4" stroke-color="#11feee" fillColor="#11feee" :fillOpacity="0.5" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="4" :position="{lng: 87.683099, lat: 43.943742}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/>
+ <bm-polygon :path="polygonPath5" stroke-color="#0055eb" fillColor="#0055eb" :fillOpacity="0.5" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="5" :position="{lng: 87.683509, lat: 43.942955}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/>
+ <bm-polyline :path="polylinePath1" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
+ <bm-polyline :path="polylinePath11" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
+ <bm-polyline :path="polylinePath12" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="155m 方位1" :position="{lng: 87.6798, lat:43.943708}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',fontWeight: 'bold',border: 'none'}" title="155m 方位1" />
+
+ <bm-polyline :path="polylinePath2" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
+ <bm-polyline :path="polylinePath21" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
+ <bm-polyline :path="polylinePath22" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="145m 方位2" :position="{lng:87.681065, lat:43.942399}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',fontWeight: 'bolder',border: 'none'}" title="145m 方位2" />
+ </bm-overlay>
+ <bm-ground class="picBg" :bounds="{ne: {lng: 87.679854, lat: 43.945406}, sw:{lng: 87.67801, lat: 43.94331}}" imageURL="/directions.png" opacity="1"></bm-ground>
<bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!-- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>-->
</baidu-map>
@@ -31,19 +32,21 @@
import screen from './components/screen.vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus';
-import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel} from 'vue-baidu-map-3x'
+import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline} from 'vue-baidu-map-3x'
// 定义接口来定义对象的类型
interface TableDataState {
- // polygonPath1: Array<location>
- // polygonPath2: Array<location>
+ polygonPath1: Array<location>
+ polygonPath2: Array<location>
polygonPath3: Array<location>
- // polygonPath4: Array<location>
+ polygonPath4: Array<location>
polygonPath5: Array<location>
- polygonPath6: Array<location>
- polygonPath7: Array<location>
- polygonPath8: Array<location>
- polygonPath9: Array<location>
+ polylinePath1: Array<location>
+ polylinePath11: Array<location>
+ polylinePath12: Array<location>
+ polylinePath2: Array<location>
+ polylinePath21: Array<location>
+ polylinePath22: Array<location>
}
interface location{
lng: number | null
@@ -51,18 +54,20 @@
}
export default defineComponent({
name: 'map',
- components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel },
+ components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
setup() {
const state = reactive<TableDataState>({
- // polygonPath1: [],
- // polygonPath2: [],
+ polygonPath1: [],
+ polygonPath2: [],
polygonPath3: [],
- // polygonPath4: [],
+ polygonPath4: [],
polygonPath5: [],
- polygonPath6: [],
- polygonPath7: [],
- polygonPath8: [],
- polygonPath9: []
+ polylinePath1: [],
+ polylinePath11: [],
+ polylinePath12: [],
+ polylinePath2: [],
+ polylinePath21: [],
+ polylinePath22: []
});
// 页面加载时
@@ -83,22 +88,18 @@
});
const map = reactive({})
const initMap=()=>{
- // state.polygonPath1 = [{ lng: 85.126523, lat: 45.604790 }, { lng: 85.126364, lat: 45.604687 }, { lng: 85.126775, lat: 45.604416 }, { lng: 85.126933, lat: 45.604528 }],
- // state.polygonPath2 = [{ lng: 85.127235, lat: 45.604406 }, { lng: 85.126908, lat: 45.604141 }, { lng: 85.127041, lat: 45.604046 }, { lng: 85.127396, lat: 45.604313 }],
- state.polygonPath3 = [{ lng: 85.127634, lat: 45.604176 }, { lng: 85.127331, lat: 45.603931 }, { lng: 85.127885, lat: 45.603602 }, { lng: 85.128178, lat: 45.603853 }],
- // state.polygonPath4 = [{ lng: 85.125247, lat: 45.604832 }, { lng: 85.124665, lat: 45.604483 }, { lng: 85.125910, lat: 45.603576 }, { lng: 85.126564, lat: 45.604053 }],
- state.polygonPath5 = [{ lng: 85.126928, lat: 45.603873 }, { lng: 85.126253, lat: 45.603399 }, { lng: 85.126923, lat: 45.602951 }, { lng: 85.127580, lat: 45.603464 }],
- state.polygonPath6 = [{ lng: 85.123940, lat: 45.604109 }, { lng: 85.123651, lat: 45.603782 }, { lng: 85.124211, lat: 45.603426 }, { lng: 85.124538, lat: 45.603693 }],
- state.polygonPath7 = [{ lng: 85.125489, lat: 45.603525 }, { lng: 85.124729, lat: 45.603024 }, { lng: 85.125304, lat: 45.602703 }, { lng: 85.125988, lat: 45.603217 }],
- state.polygonPath8 = [{ lng: 85.126150, lat: 45.603173 }, { lng: 85.125339, lat: 45.602580 }, { lng: 85.125847, lat: 45.602235 }, { lng: 85.126700, lat: 45.602838 }],
- state.polygonPath9 = [{ lng: 85.126805, lat: 45.602739 }, { lng: 85.125929, lat: 45.602127 }, { lng: 85.126505, lat: 45.601715 }, { lng: 85.127309, lat: 45.602365 }]
- console.log(map,'map')
- // const poly = document.getElementsByClassName('polys')
- // console.log(poly)
- // poly.attributes.style.zIndex = 9999999
- // console.log(poly,'poly')
+ state.polygonPath1 = [{ lng: 87.680177, lat: 43.944441 }, { lng: 87.681239, lat: 43.94478 }, { lng: 87.68172, lat: 43.944013 }, { lng: 87.680649, lat: 43.943647 }]
+ state.polygonPath2 = [{ lng: 87.678872, lat: 43.94283 }, { lng: 87.680266, lat: 43.943274 }, { lng: 87.680698, lat: 43.94254 }, { lng: 87.67929, lat: 43.942076 }]
+ state.polygonPath3 = [{ lng: 87.680406, lat: 43.943341 }, { lng: 87.681953, lat: 43.943873}, { lng: 87.682582, lat: 43.942857 }, { lng: 87.680992, lat: 43.942359 }]
+ state.polygonPath4 = [{ lng: 87.682381, lat: 43.944043 }, { lng: 87.683216, lat: 43.944326 }, { lng: 87.683851, lat: 43.943348 }, { lng: 87.683004, lat: 43.943053 }]
+ state.polygonPath5 = [{ lng: 87.682825, lat: 43.942898 }, { lng: 87.683931, lat: 43.943295 }, { lng: 87.684201, lat: 43.942784 }, { lng: 87.683081, lat: 43.942438}]
+ state.polylinePath1 = [{ lng: 87.681944, lat: 43.943929}, {lng: 87.680313, lat: 43.943402}]
+ state.polylinePath11 = [{lng: 87.680313, lat: 43.943402},{ lng: 87.680420, lat: 43.943512}]
+ state.polylinePath12 = [{lng: 87.680313, lat: 43.943402},{ lng: 87.680503, lat: 43.943402}]
+ state.polylinePath2 = [{ lng: 87.681000, lat: 43.942226}, {lng: 87.680323, lat: 43.943302}]
+ state.polylinePath21 = [{lng: 87.680323, lat: 43.943302},{ lng: 87.680303, lat: 43.943202}]
+ state.polylinePath22 = [{lng: 87.680323, lat: 43.943302},{ lng: 87.680453, lat: 43.943242}]
}
-
return {
initMap,
map,
@@ -115,7 +116,7 @@
position: relative;
z-index: 9999999 !important;
}
- :deep(BMapLabel){
+ :deep(.BMapLabel){
z-index: 9999999 !important;
}
}
@@ -127,4 +128,16 @@
position: relative;
z-index: 2;
}
+.sample {
+ position: absolute;
+ width: 120px;
+ height: 40px;
+ line-height: 40px;
+ background: rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ box-shadow: 0 0 5px #000;
+ color: #fff;
+ text-align: center;
+ padding: 10px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2