绘制离线地图
This commit is contained in:
194
src/views/pqs/panorama/components/map.vue
Normal file
194
src/views/pqs/panorama/components/map.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<DatePicker ref="datePickerRef" theCurrentTime style="display: none" />
|
||||
<baidu-map class="map" :style="height" @ready="initMap" @zoomend='syncCenterAndZoom'
|
||||
:center="{ lng: 116.403765, lat: 39.914850 }" :zoom="10" :scroll-wheel-zoom='true'>
|
||||
<!-- 线-->
|
||||
<div v-if='zoom > 13'>
|
||||
<bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
|
||||
|
||||
</div>
|
||||
<!-- 变电站-->
|
||||
<template v-if='zoom > 13'>
|
||||
<bm-marker :position='path' v-for='path in siteList' :key='path.subId' :icon='path.icon'
|
||||
@click='markerClick(path)'></bm-marker>
|
||||
</template>
|
||||
<!-- 点 -->
|
||||
<BmlMarkerClusterer maxZoom='12'>
|
||||
<bm-marker :position='path' v-for='path in areaLineInfo' :key='path.lineId' :icon='path.icon'
|
||||
@click='markerClick(path)'></bm-marker>
|
||||
</BmlMarkerClusterer>
|
||||
<!-- 行政区划 -->
|
||||
<bm-boundary v-for="item in boundaryList" :name="item.name" :strokeWeight="2" strokeColor="#0e8780"
|
||||
fillColor="#0e8780" fillOpacity="0.05"></bm-boundary>
|
||||
|
||||
<!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"
|
||||
@lineupdate="updatePolygonPath" /> -->
|
||||
|
||||
</baidu-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const datePickerRef = ref()
|
||||
const height = mainHeight(20)
|
||||
// 页面中直接引入就可以
|
||||
const dictData = useDictData()
|
||||
const deptIndex = ref(dictData.state.area[0].id)
|
||||
import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
|
||||
const boundaryList = ref([
|
||||
{ name: '张家口市' },
|
||||
{ name: '唐山市' },
|
||||
{ name: '秦皇岛市' },
|
||||
{ name: '承德市' },
|
||||
{ name: '廊坊市' },
|
||||
])
|
||||
|
||||
const zoom = ref(13)
|
||||
const areaLineInfo = ref<any>([])
|
||||
const siteList = ref<any>([])
|
||||
const polyline = ref<any>([])
|
||||
const lineId = ref('')
|
||||
const center = ref({
|
||||
lng: 0,
|
||||
lat: 0
|
||||
})
|
||||
const initMap = async ({ BMap, map }: any) => {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
const addMarkers = async (row?: any, key?: any, num?: any) => {
|
||||
|
||||
let params = {
|
||||
deptIndex: deptIndex.value,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
searchEndTime: datePickerRef.value.timeValue[1],
|
||||
serverName: 'event-boot',
|
||||
statisticalType: {},
|
||||
...row
|
||||
}
|
||||
|
||||
let { data } = await getAreaLineInfo(params)
|
||||
polyline.value=[]
|
||||
areaLineInfo.value=[]
|
||||
let r = 0.0035
|
||||
let list = data.filter((item: any) => item.lng != 0)
|
||||
list.forEach((item: any) => {
|
||||
// 变电站图标
|
||||
item.icon = {
|
||||
url: new URL('@/assets/jcd.png', import.meta.url).href,
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
if (item.children.length > 10 && item.children.length < 100) {
|
||||
r = 0.0055
|
||||
} else if (item.children.length >= 100) {
|
||||
r = 0.01055
|
||||
}
|
||||
item.children.forEach((val: any, i: number) => {
|
||||
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||||
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||||
// 监测点图标
|
||||
val.icon = {
|
||||
url: '',
|
||||
size: {
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
}
|
||||
switch (val.runFlag) {
|
||||
case 0:
|
||||
// 投运
|
||||
if (val.comFlag == 0) {
|
||||
// 异常
|
||||
if (val.noDealCount > 0) {
|
||||
// 异常有暂降
|
||||
val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
|
||||
} else if (val.noDealCount == 0) {
|
||||
// 异常无暂降
|
||||
val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||||
}
|
||||
} else if (val.comFlag == 1) {
|
||||
// 正常
|
||||
if (val.noDealCount > 0) {
|
||||
// 正常有暂降
|
||||
val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
|
||||
} else if (val.noDealCount == 0) {
|
||||
// 正常无暂降
|
||||
val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||||
}
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
|
||||
break
|
||||
case 2:
|
||||
val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
polyline.value.push([
|
||||
{
|
||||
lng: item.lng,
|
||||
lat: item.lat
|
||||
},
|
||||
{
|
||||
lng: val.lng,
|
||||
lat: val.lat
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
areaLineInfo.value.push(...item.children)
|
||||
})
|
||||
siteList.value = list
|
||||
center.value.lng = areaLineInfo.value[0].lng
|
||||
center.value.lat = areaLineInfo.value[0].lat
|
||||
|
||||
|
||||
}
|
||||
const syncCenterAndZoom = (e: any) => {
|
||||
zoom.value = e.target.getZoom()
|
||||
}
|
||||
const locatePositions = (e: any) => {
|
||||
|
||||
deptIndex.value = e.data.id
|
||||
// 加载点
|
||||
addMarkers()
|
||||
|
||||
// powerManageGridMap.value.drillDown({
|
||||
// // 判断超高压
|
||||
// orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
|
||||
// onlyDisplay: true
|
||||
// })
|
||||
}
|
||||
const markerClick = (e: any) => {
|
||||
// infoWindowPoint.value = e
|
||||
// infoWindowPoint.value.show = true
|
||||
}
|
||||
const mouseover = () => {
|
||||
console.log(123);
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
})
|
||||
defineExpose({ addMarkers, locatePositions })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user