From 65f645eaafc3e9d4ba2990936a15995c3d90e400 Mon Sep 17 00:00:00 2001 From: sjl <1716605279@qq.com> Date: Mon, 1 Sep 2025 14:13:01 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E7=BD=91=E4=B8=80=E5=BC=A0=E5=9B=BE?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../panorama/components/map.vue | 179 ++++++++++++++---- .../assessment/components/uese/index.vue | 2 +- 2 files changed, 148 insertions(+), 33 deletions(-) diff --git a/src/views/pqs/qualityInspeection/panorama/components/map.vue b/src/views/pqs/qualityInspeection/panorama/components/map.vue index a60a890e..5a8f0b7e 100644 --- a/src/views/pqs/qualityInspeection/panorama/components/map.vue +++ b/src/views/pqs/qualityInspeection/panorama/components/map.vue @@ -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 = () => { ` ) .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'], // [ // { diff --git a/src/views/pqs/runManage/assessment/components/uese/index.vue b/src/views/pqs/runManage/assessment/components/uese/index.vue index e642d4e9..ce726d24 100644 --- a/src/views/pqs/runManage/assessment/components/uese/index.vue +++ b/src/views/pqs/runManage/assessment/components/uese/index.vue @@ -223,7 +223,7 @@ const tableStore: any = new TableStore({ } ], beforeSearchFun: () => { - // tableStore.table.params.deptId = tableStore.table.params.deptIndex + tableStore.table.params.deptId = tableStore.table.params.deptIndex },