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

电网一张图代码提交

Browse Source
This commit is contained in:
sjl
2025-09-01 14:13:01 +08:00
parent b9e29802bd
commit 65f645eaaf
2 changed files with 148 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,44 +126,60 @@ const LngLat = [
}
]
import { getAssessOverview } from '@/api/device-boot/panorama'
narimap.publicKey =
'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCRYFEiMdZVgY8+jIjx4GR1QbN7qVgCE0istwPZN8xRqdSV+hePUPIW1k9eCVh9gxIIWHAw2TfNZLb8l0Tmk9OH3XnZ009TNBjzZ2zWLrbjFQzgutKKI2JRLK+CaJbOZ0LiD78QnTo5Zk+ZuQBKgtyFJdp4T5gQS+Mnbj/c4EnK0QIDAQAB'
narimap.Require(
[
'PSRMap',
'ManageGrid',
'Components.Query',
'Components.DeviceCard',
'Popup',
'Components.MapSelector',
'Components.RegionSelector',
'Marker'
],
// ['PSRMap', 'Components.Query', 'Marker'],
() => {
if (narimap.Config.examples.notlogin) {
initMap(narimap.Config.styles.sjRaster)
} else {
//电网GIS地图服务登录
narimap.SGAuth.login()
.then((result: any) => {
if (result.success) {
console.log('登录成功')
} else {
console.log('登录失败', result)
}
narimap.Require(['PSRMap', 'Thematic','ManageGrid', 'Components.Query','Components.MapSelector', 'Components.RegionSelector'], () => {
if (narimap.Config.examples.notlogin) {
initMap(narimap.Config.styles.sjRaster)
} else {
//电网GIS地图服务登录
narimap.SGAuth.login()
.then((result: any) => {
if (result.success) {
console.log('登录成功')
} else {
console.log('登录失败', result)
}
//默认打开电网GIS影像图
initMap(narimap.Config.styles.sjRaster)
})
.catch((err: any) => {
console.log('错误', err)
})
//默认打开电网GIS影像图
initMap(narimap.Config.styles.sjRaster)
})
.catch((err: any) => {
console.log('错误', err)
})
}
}
})
)
function initMap(styleurl: any) {
map.value = new narimap.Map({
container: 'map',
style: styleurl,
zoom: 6,
center: [116.478935, 39.997761],
controls: false,
controls: ['attribute', 'navigation', 'geolocate', 'scale'],
country: true,
// 地图默认字体
localIdeographFontFamily: 'Microsoft YoHei'
localIdeographFontFamily: 'Microsoft YoHei',
fullExtent: narimap.Config.examples.fullExtent
})
map.value.on('load', () => {
createMapSelectorComponent()
DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
addLayer()
//testAddLayer()
nextTick(() => {
// 添加图层
Query()
@@ -227,6 +243,7 @@ const Query = () => {
cascade: true
}
)
powerManageGridMap.value.on('load', function () {
powerLoad()
})
@@ -282,7 +299,8 @@ const initDeviceCard = () => {
}
}
deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
deviceCard.value = new narimap.Components.DeviceCard(options)
deviceCard.value.on('click', (res: any) => {
if (res.button.id == 'nariPopupViewDetail') {
emit('show', true)
@@ -535,26 +553,27 @@ const addLayer = () => {
// 为图层设置引用的图片ID
'icon-image': 'poi4',
'icon-size': 0.35,
// 'text-field': '{name}',
// 'icon-pitch-alignment': 'map', //贴地
'icon-ignore-placement': false,
'icon-allow-overlap': false
}
})
}
)
// 添加地图弹框
map.value.on('click', (e: any) => {
const features = map.value.queryRenderedFeatures(e.point, {
layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ', 'spotImg-DW']
})
if (features.length > 0) {
popup.value && popup.value.remove()
setTimeout(() => {
deviceCard.value.popup && deviceCard.value.popup.remove()
}, 10)
let data = JSON.parse(features[0].properties.list)
popup.value = new narimap.Popup({ offset: popupOffsets.value, className: 'my-popup' })
.setLngLat([data.lng, data.lat])
.setHTML(
@@ -585,6 +604,7 @@ const addLayer = () => {
</div>`
)
.addTo(map.value)
let html = document.getElementById('ids')
if (html)
html.onclick = function (v: any) {
@@ -596,7 +616,7 @@ const addLayer = () => {
// 监听地图缩放完成事件
map.value.on('zoomend', (e: any) => {
// console.log(123, map.value.getCenter())
console.log(123, map.value.getZoom())
if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
rPopList.value.map((item: any) => item.remove())
@@ -606,6 +626,102 @@ const addLayer = () => {
}
})
}
// 测试添加点
const testAddLayer = () => {
// 注册图片
map.value.loadImage(
new URL('@/assets/test5.png', import.meta.url).href, // 图片地址
(error: any, image: any) => {
if (error) throw error
//添加图片到 map.value ，第一个参数为图片设置 id
map.value.addImage('poi5', image)
//添加 layer
map.value.addLayer({
id: 'test',
type: 'symbol',
minzoom: 6.5, //图片层级
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi5',
'icon-pitch-alignment': 'map', //贴地
'icon-ignore-placement': true,
'icon-allow-overlap': true,
'icon-anchor': 'center', // 中心点
'icon-size': ['interpolate', ['linear'], ['zoom'], 6, 0.1, 50, 1] // 图符大小
}
})
}
)
// 添加图片需要先注册图片才能加载
setTimeout(() => {
map.value.getSource('test').setData({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [115.3544544, 40.217797]
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [115.4544544, 40.317797]
}
}
]
})
}, 1000)
// 地图连线
map.value.addLayer({
id: 'power-line',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'MultiLineString', //MultiLineString3层数组可以绘制多条线 LineString2层数组
coordinates: [
[
[117, 39],
[116, 40]
],
[
[116, 39],
[115, 40]
]
]
}
}
]
}
},
paint: {
'line-color': '#ff0000',
'line-width': 3,
'line-opacity': 0.6
}
})
setTimeout(() => {
//先判断是否有图层 'power-line'是图层注册id
if (map.value.getLayer('power-line')) map.value.removeLayer('power-line')
}, 5000)
}
//添加多个监测点
const addMarkers = async (row?: any, key?: any, num?: any) => {
if (map.value == null) return
@@ -772,7 +888,7 @@ const GridDiagramArea = () => {
}
// 添加统计弹框
const radiusPop = (k?: number) => {
if (k != undefined) PopKey.value = k
if (k != undefined) PopKey.value = 0
if (rPopList.value.length > 0) {
rPopList.value.map((item: any) => item.remove())
rPopList.value = []
@@ -984,10 +1100,9 @@ const flyTo = (row: any, zoom?: number) => {
// 添加地图选择
const createMapSelectorComponent = () => {
const mapSelector = new narimap.Components.MapSelector();
const mapSelector = new narimap.Components.MapSelector()
mapSelector.init(
map.value,
map.value
// ['sjBase', 'sjDark'],
// [
// {