<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-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>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
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'
|
|
// 定义接口来定义对象的类型
|
interface TableDataState {
|
polygonPath1: Array<location>
|
polygonPath2: Array<location>
|
polygonPath3: Array<location>
|
polygonPath4: Array<location>
|
polygonPath5: 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
|
lat: number | null
|
}
|
export default defineComponent({
|
name: 'map',
|
components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel, BmPolyline },
|
setup() {
|
const state = reactive<TableDataState>({
|
polygonPath1: [],
|
polygonPath2: [],
|
polygonPath3: [],
|
polygonPath4: [],
|
polygonPath5: [],
|
polylinePath1: [],
|
polylinePath11: [],
|
polylinePath12: [],
|
polylinePath2: [],
|
polylinePath21: [],
|
polylinePath22: []
|
});
|
|
// 页面加载时
|
onMounted(() => {
|
const baseSize = 38;
|
/* 设置 rem 函数 */
|
function setRem() {
|
const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
|
console.log('切换尺寸>>',document.documentElement.style.fontSize)
|
}
|
setRem();/* 初始化 rem */
|
|
window.onresize = () => {
|
setRem();/* 改变窗口大小时重新设置 rem */
|
console.log('执行切换')
|
}
|
});
|
const map = reactive({})
|
const initMap=()=>{
|
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,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
.bigMap{
|
width: 100%;
|
height: 100%;
|
:deep(path) {
|
position: relative;
|
z-index: 9999999 !important;
|
}
|
:deep(.BMapLabel){
|
z-index: 9999999 !important;
|
}
|
}
|
.bg-pic{
|
position: relative;
|
z-index: 1;
|
}
|
.polys{
|
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>
|
