ArcGis for javascript dibuja iconos personalizados y vincula eventos de clic. ! !

Imagen de efecto

Inserte la descripción de la imagen aquí
vista previa en línea

Prefacio

El proyecto necesita utilizar ArcGis para realizar la función de mapa. En cuanto a por qué Baidu y Gaode no son aplicables, se dice que ArcGis será más preciso en el posicionamiento. Cuando me comunico con ArcGIS para javascript por primera vez, es muy cómodo pisar la calle de boxes. Anótelo y regístrelo. Espero que pueda ayudar a quienes lo necesitan.

js

¡Puede pegar directamente ArcGis para javascript para trazar la línea con el código de entrada básico ! ! ! Para el ejemplo de, no entraré en detalles aquí.

// 创建图形点
const pointGraphic = new Graphic({
    
    
  geometry: {
    
    
    type: 'point',
    // 点的位置
    longitude: 117.129359,
    latitude: 31.839979
  },
  symbol: {
    
    
    // 类型有 图片标记 和 点
    type: 'picture-marker',
    // 图片地址，可以网络路径或本地路径（PS：base64亦可）
    url: require('@/assets/img/view-start.png'),
    // 图片的大小
    width: '32px',
    height: '48px'
  },
  attributes: {
    
    
    Foo: 'Hello world!'
  }
})

// 将图形添加到视图的图形层
this.view.graphics.addMany([pointGraphic])

// 给 “地图视图” 绑定点击事件
this.view.on('click', e => {
    
    
  // hitTest 方法在点击位置上如果存在 Graphic（线或点），即可获取 Graphic 对象的整个数据
  this.view.hitTest(e)
    .then(res => {
    
    
      if (res.results.length) {
    
    
        // 获取每个图形上的ID
        this.$message.info(JSON.stringify(res.results[0].graphic.attributes))
      }
    })
})

Puntos centrales

PictureMarkerSymbolEs Symbolun tipo de objeto, puede especificar una URL trazada puntos para los iconos personalizados.
hitTestEl método devuelve uno Promise, que devuelve el elemento superior en cada capa que se cruza con las coordenadas de pantalla especificadas (PS: palabras oficiales).
Dirección de la fuente