电网一张图代码提交

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'], () => {
+                    //默认打开电网GIS影像图
-    if (narimap.Config.examples.notlogin) {
+                    initMap(narimap.Config.styles.sjRaster)
-        initMap(narimap.Config.styles.sjRaster)
+                })
-    } else {
+                .catch((err: any) => {
-        //电网GIS地图服务登录
+                    console.log('错误', err)
-        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)
-            })
     }
-})
+)
 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'],
         // [
         //     {

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
        
     },