ArcGis for javascript 绘制自定义图标、绑定点击事件！！！

效果图

在线预览

前言

项目中需要使用 ArcGis 来实现地图功能，至于为什么不适用百度、高德，是因为据说 ArcGis 定位会准一点。初次接触 Arcgis for javascript，踩坑之路很舒服，写下来记录下，也希望能够帮到需要的人。

js

基础的入门代码大家可以直接粘贴 ArcGis for javascript 绘制线！！！ 中的例子，这里不做赘述。

// 创建图形点
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))
      }
    })
})

核心要点

PictureMarkerSymbol 是 Symbol 对象的一个类型，可以指定一个 url 用于在该点上绘制自定义图标。
hitTest 方法返回一个 Promise，返回与指定屏幕坐标相交的每个图层中最顶层的要素（PS：官方原话）。
源码地址

参考

• ArcGis知乎 - arcgis js 4.7版本 怎么给graphics 添加点击事件 主要就是监听点 线 面
• PictureMarkerSymbol 用法
• hitTest用法