arcgis for javsscript4.19根据不同类型加载不同颜色的点位

小野猫子

已于 2023-02-13 10:16:14 修改

阅读量939

点赞数

分类专栏： arcgis for javascript 文章标签：前端 vue.js

于 2021-10-19 14:54:25 首次发布

本文链接：https://blog.csdn.net/Anything2207294253/article/details/120844634

版权

arcgis for javascript 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

本文介绍了如何在Vue应用中使用ArcGIS地图，并将其存储在Vuex中以实现组件间的复用。在地图加载完成后，通过监听地图加载事件来添加点位。同时，详细阐述了点击点位时如何高亮选中并执行相关操作，包括点位的定位放大功能。整个过程涉及到地图的管理和交互逻辑，为大屏应用提供了参考。

摘要由CSDN通过智能技术生成

我使用vue，将GIS地图存入vuex中，因为需要做大屏，地图好几处需要，所以存入vuex中，在组件中使用GIS的方法之前要监听地图是否加载完成，后执行操作地图方法，否则会报错

效果图如下图：

1、在组件中使用GIS,在地图上添加点位

import { loadModules } from 'esri-loader'



loadModules([
   'esri/Graphic',
   'esri/layers/GraphicsLayer'
 ], {
     url: 'https://js.arcgis.com/4.19/',
     css: 'https://js.arcgis.com/4.19/esri/themes/light/main.css'
    }).then(([Graphic, GraphicsLayer])=>{

     let graphicsLayerGather = [] // 需要在地图上描绘的点位集合
      // val从后端取来的数组格式的数据
     val.forEach(point => {
        let symbol = {
            type:'picture-marker',
            width: '45px',
            height: '35px',
            url:'图标地址'
        }
        let Ghc = new Graphic({
            attributes: JSON.stringify(point),
            geometry: {
               type: 'point',
               longitude: point.x,//经度
               latitude: point.y //纬度
             },
            symbol: symbol,
            id: 'dyname-point',
            popupTemplate: {
               outFields: ['*'],
               content: this.getClickInfo //点击图标点获取到的点位数据
            }
        })
        graphicsLayerGather.push(Ghc)
     })  
     let graphicsLayer = new GraphicsLayer({
         graphics: graphicsLayerGather,
         id: 'graphicsLayer',
         elevationInfo: {
           mode: 'relative-to-scene',
           featureExpressionInfo: {
              expression: '50'
           },
           unit: 'meters'
         }
     })
     this.mapView.map.add(graphicsLayer) //将图标添加至地图上
      // 当全部点位加载完成之后，执行其他操作
     graphicsLayer.when(() => {})
 })

设置arcgis for javscript4.19自身弹窗是否可见

 mapView.popup.visible = false

2、点击点位图标进行高亮选中状态，进行方法操作：

思路：

1、首先加载所有点位至地图上；

2、然后根据ID拿到graphics 项，使用唯一标识找到相对应的图标对象进行替换；

getClickInfo(){
    let pointInf = value.graphic.attributes
    let center = [Number(pointInf.x), Number(pointInf.y)]
    let zoom = 16
    // 获取 graphics 项  graphicsLayer 是上面加载点位的ID
    let currentPoint = this.mapView.map.findLayerById('graphicsLayer').graphics.items
    // 过滤出指定 pointId 的项 此处需要修改为你的字段的名称
    let pointIndex = currentPoint.findIndex(item => {
         return JSON.parse(item.attributes).pointId === pointInf.pointId
    })
    //判断是否找到，进行设置symbol的点位图标大小
    if (pointIndex !== -1) {
         currentPoint[pointIndex].symbol = {
             type: 'picture-marker',
             width: '85px',
             height: '45px',
             url:'图标地址'
         }
    // 点位进行定位方法操作功能
    this.goToPoint(center, zoom)
    } 
}

3、点位进行定位放大操作功能

goToPoint（center, zoom）{
    mapView.goTo(
      {
        center: center,
        zoom: zoom
      },
      {
        speedFactor: 0.8,
        easing: 'linear'
      },
      {
        duration: 1000,
        easing: 'in-out-expo'
      }
     ).catch((error) => {
       if (error.name !== 'AbortError') {
            console.error(error)
        }
    })
}