Arcgis入门篇（地图标点图形）

        在学习了创建地图后，应该对之前的代码有了大致的了解。话不多说直接上代码块。

创建一个标记点的视图层：

    const graphicsLayer = new this.GraphicsLayer()
    this.MAP.add(graphicsLayer)
    this.graphicsLayer = graphicsLayer

 删除已有的标记点的视图层（是否需要删除原来的点）：

this.graphicsLayer && this.graphicsLayer.removeAll()

直接标点：
 

  /**
   * 绘制图形层上的单个点
   * 添加 Graphics
   * @param {Object} maker { url:string, height:number, width:number, offect: array ,location:array }
   */  
addGraphicPoint(maker = {}) {
    this.graphicsLayer && this.graphicsLayer.removeAll()
    const graphicsLayer = new this.GraphicsLayer()
    this.MAP.add(graphicsLayer)
    this.graphicsLayer = graphicsLayer
    // 设置图形的样式
    const pictureMarkerSymbol = new this.PictureMarkerSymbol({
      url: maker.url || "esriImg/bd-xz.png",
      height: maker.height || 15,
      width: maker.width || 14,
      xoffset: maker.offect ? maker.offect[0] : 0,
      yoffset: maker.offect ? maker.offect[1] : 0
    })
    // // 设置图形的位置
    // 将图形的样式和位置放在Graphic里面
    const point = new this.Point({
      x: maker.location.longitude,
      y: maker.location.latitude
    })
    const graphic = new this.Graphic({
      symbol: pictureMarkerSymbol,
      geometry: point
    })
    this.graphicsLayer.add(graphic)
  }

点击地图标点：

      // 地图
      this.$nextTick(async() => {
        this.map = new ArcgisUtil(this.$refs.aicgisMap)
        try {
          this.Map = await this.map.init()
          this.Map.map.on('click', extent => {
            this.map.addGraphicPoint({
              url: require('@/assets/imgs/position.png'),
              height: 36,
              width: 36,
              offect: [0, 12],
              location: {
                latitude: extent.mapPoint.latitude,
                longitude: extent.mapPoint.longitude
              }
            })
          })
        } finally {
          // this.initData()
        }
      })