<template>
  <div id="map" :style="mapLayout"></div>
</template>

<script>
import { loadModules } from 'esri-loader'
import { mapState } from 'vuex'

export default {
  name: 'PointMap',
  data () {
    return {
      view: null
    }
  },
  computed: {
    ...mapState({
      mapLayout: state => {
        return {
          width: '100%',
          height: state.layoutHeight - 48 + 'px'
        }
      }
    })
  },
  mounted () {
    loadModules(['esri/Map', 'esri/views/MapView', 'esri/Graphic'], { css: true })
      .then(([ArcGISMap, MapView, Graphic]) => {
        // 配置地图的底图
        const map = new ArcGISMap({
          basemap: 'osm'
        })
        // 地图视图对象
        this.view = new MapView({
          // 容器
          container: document.getElementById('map'),
          // 中心点
          center: [117.129359, 31.839979],
          map: map,
          // 缩放
          zoom: 14
        })

        // 创建图形点
        const pointGraphic = new Graphic({
          geometry: {
            type: 'point',
            // 点的位置
            longitude: 117.129359,
            latitude: 31.839979
          },
          symbol: {
            // 类型有 图片标记 和 点
            // https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureMarkerSymbol.html
            type: 'picture-marker',
            // 图片地址
            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))
              }
            })
        })
      })
  },
  beforeDestroy () {
    this.view = null
  }
}
</script>

<style scoped>
</style>