<template>
    <!-- 显示地图的div -->
    <div id="mapDiv" ref="mapDiv" class="mapDiv">
      loading...
    </div>
</template>
<script>
import AMap from 'AMap'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

// import tdtmap from '@/utils/tdt-map'
export default {
  name: 'Mark',
  components: { Treeselect },
  data() {
    return {

      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 定标信息表格数据
      markList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 部门树选项
      deptOptions: undefined,
      // 疫木状态字典
      treeStatusOptions: [],
      // 定标标志字典
      markFlagOptions: [],
      // 除治标志字典
      sealedFlagOptions: [],
      // 定标类型字典
      markTypeOptions: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        markSn: null,
        deptId: null,
        treeStatus: null,
        compart: null,
        diam: null,
        markPic1: null,
        markPic2: null,
        markPic3: null,
        markPic4: null,
        markOperate: null,
        markTime: null,
        markUploadTime: null,
        markFlag: null,
        markRemark: null,
        operate: null
      },
      // 表单参数
      form: {},
      // 地图对象
      map: '',
      mass: '',

      infowindowL: null // 信息窗体

    }
  },
  created() {
    this.getList()
    this.getTreeselect()
    this.getDicts('tree_status').then(response => {
      this.treeStatusOptions = response.data
    })
    this.getDicts('work_flag').then(response => {
      this.markFlagOptions = response.data
      this.sealedFlagOptions = response.data
    })

    this.getDicts('mark_type').then(response => {
      this.markTypeOptions = response.data
    })
  },

  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      const map = new AMap.Map('mapDiv', {
        center: [120.56587, 36.20366],
        resizeEnable: true,
        zoom: 12
        // lang: 'en'
      })
      this.map = map

      // 地图添加各种控件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar())
        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType())

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        // map.addControl(new AMap.Geolocation())

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale())
      })

      // 海量点的样式
      var style = [{
        // 必填参数,图标的地址
        url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
        // 必填参数，图标显示位置偏移量，以图标的左上角为基准点（0,0）点，例如：anchor:new AMap.Pixel(5,5)
        anchor: new AMap.Pixel(6, 6),
        // 必填参数，图标的尺寸；例如：size:new AMap.Size(11,11)
        size: new AMap.Size(11, 11)
      },
        // 红色 未除治
        {
          url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IPiAEO2hAAAEJdf9ZKs794.png',
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(11, 11)
        },
        // 绿色  已经除治
        {
          url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IriAQ7-IAAAEJWeQRis039.png',
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(11, 11)
        },
        // 灰色以前的数据
        {
          url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IyGAS1xQAAAEJeELcZs238.png',
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(11, 11)
        }]

      this.mass = new AMap.MassMarks(null, {
        // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
        opacity: 0.6,
        // 图层叠加的顺序值，0表示最底层。默认zIndex：5
        zIndex: 111,
        // 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
        cursor: 'pointer',
        style: style,
        // 表示是否在拖拽缩放过程中实时重绘，默认true，建议超过10000的时候设置false
        alwaysRender: false
      })

      // 鼠标悬浮 弹出窗口
      var marker = new AMap.Marker({ content: ' ', map: map })

      this.mass.on('mouseover', function(e) {
        marker.setPosition(e.data.lnglat)
        marker.setLabel({ content: e.data.name })
      })

      // 海量点绑定到地图上
      this.mass.setMap(map)
    }
  }
}
</script>

<style scoped>
.mapDiv{
  width: 100%;
  height: 80vh;
}
</style>

