Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步现场数据

Browse Source
This commit is contained in:
GGJ
2024-05-16 14:56:04 +08:00
parent 6c3b776db2
commit 5b9d4aac0f
9 changed files with 208 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/views/pqs/qualityInspeection/panorama/components/map.vue
View File

@@ -63,9 +63,10 @@ function initMap(styleurl: any) {
localIdeographFontFamily: 'Microsoft YoHei'
})
map.value.on('load', () => {
addLayer()
nextTick(() => {
// 添加图层
addLayer()
Query()
})
@@ -223,7 +224,7 @@ const addLayer = () => {
}
})
map.value.addLayer({
id: 'spotName-ZY',
id: 'spotName',
type: 'symbol',
minzoom: 10,
source: {
@@ -238,7 +239,7 @@ const addLayer = () => {
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-ignore-placement': true,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
@@ -252,6 +253,7 @@ const addLayer = () => {
})
}
)
map.value.loadImage(
new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
@@ -290,13 +292,21 @@ const addLayer = () => {
// 'text-halo-width': 1.33333
// }
})
}
)
map.value.loadImage(
new URL('@/assets/point.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
if (error) throw error
//添加图片到map，第一个参数为图片设置id
map.value.addImage('poi3', image)
map.value.addLayer({
id: 'spotName-TY',
id: 'spotImg-GJ',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
@@ -304,20 +314,13 @@ const addLayer = () => {
},
layout: {
// 为图层设置引用的图片ID
// 'icon-image': 'poi2',
// 'icon-size': 0.7,
'text-field': '{name}',
'icon-image': 'poi3',
'icon-size': 0.6,
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
'icon-allow-overlap': true
},
paint: {
'text-color': '#ccc',
// 'text-halo-color': '#FFFFFF',
'text-halo-width': 1.33333
Paint: {
'icon-opacity': 10
}
})
}
@@ -325,7 +328,7 @@ const addLayer = () => {
// 添加地图弹框
map.value.on('click', (e: any) => {
const features = map.value.queryRenderedFeatures(e.point, {
layers: ['spotImg-ZY', 'spotImg-TY']
layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ']
})
if (features.length > 0) {
@@ -383,7 +386,9 @@ const addLayer = () => {
})
}
//添加多个监测点
const addMarkers = async (row?: any) => {
const addMarkers = async (row?: any, key?: any) => {
console.log('🚀 ~ addMarkers ~ key:', key)
if (map.value == null) return
let params = {
deptIndex: deptIndex.value,
monitorFlag: 2,
@@ -426,14 +431,25 @@ const addMarkers = async (row?: any) => {
list: val
}
}
if (key == 0) {
switch (val.type) {
case 0:
tempFeatureZ.push(tempFeature)
switch (val.comFlag) {
case 0:
tempFeatureT.push(tempFeature)
break
case 1:
tempFeatureZ.push(tempFeature)
break
break
case 1:
tempFeatureT.push(tempFeature)
break
}
} else {
switch (val.comFlag) {
case 0:
tempFeatureT.push(tempFeature)
break
case 1:
tempFeatureZ.push(tempFeature)
break
}
}
})
})
@@ -442,17 +458,33 @@ const addMarkers = async (row?: any) => {
type: 'FeatureCollection',
features: tempFeatureZ
})
map.value.getSource('spotName-ZY').setData({
map.value.setLayerZoomRange('spotImg-GJ', key != undefined ? 0 : 8)
map.value.setLayerZoomRange('spotImg-TY', key != undefined ? 0 : 8)
map.value.setLayerZoomRange('spotImg-ZY', key != undefined ? 0 : 8)
if (key == 0) {
map.value.getSource('spotImg-GJ').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
map.value.getSource('spotImg-TY').setData({
type: 'FeatureCollection',
features: []
})
} else {
map.value.getSource('spotImg-GJ').setData({
type: 'FeatureCollection',
features: []
})
map.value.getSource('spotImg-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
}
map.value.getSource('spotName').setData({
type: 'FeatureCollection',
features: tempFeatureZ
})
map.value.getSource('spotImg-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
map.value.getSource('spotName-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
features: [...tempFeatureT, ...tempFeatureZ]
})
}
@@ -521,7 +553,7 @@ const height = mainHeight(20)
:deep(.query-box-wrap) {
position: absolute;
top: 10px;
left: calc(50% - 295px);
left: calc(50% - 345px);
.query-box {
border-radius: 8px 0 0 8px;
}
@@ -530,7 +562,7 @@ const height = mainHeight(20)
position: absolute;
top: 10px;
border-radius: 0 8px 8px 0;
left: calc(50% + 35px);
left: calc(50% - 15px);
z-index: 0 !important;
}