<template>
  <div>
    <div v-loading="mapLoading" id="map" ref="mapDiv" class="baseMap" />
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { mapGetters } from 'vuex'
const esri = require('esri-leaflet')
export default {
  name: 'LeafletMapRead',
  props: {
    longitude: {
      type: Number,
      default: 116.5937
    },
    latitude: {
      type: Number,
      default: 28.249
    }
  },
  data() {
    return {
      baseLayer: [],
      mapLoading: false,
      map: null
    }
  },
  computed: {
    ...mapGetters([
      'baseUrl',
      'partsUrl',
      'mapUrl',
      'gridUrl',
      'partsAllUrl'
    ])
  },
  mounted() {
    this.initMap()
    this.addMarker()
  },
  methods: {
    initMap() {
      this.mapLoading = true
      const map = L.map('map', {
        minZoom: 13,
        maxZoom: 24,
        center: this.baseConfig.center,
        zoom: this.baseConfig.zoom,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map

      // 加载天地图底图和标注
      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map))
      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map))

      esri.dynamicMapLayer({
        url: `${this.baseUrl}${this.mapUrl}`,
        opacity: 1,
        f: 'image'
      }).addTo(map)

      this.mapLoading = false
    },

    addMarker() {
      const icon = L.icon({
        iconUrl: require('@/assets/icons/icon-position.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      })
      const latlng = L.latLng([this.latitude, this.longitude])
      const feat = L.marker(latlng, { icon: icon })
      feat.addTo(this.map)
      this.map.setView({ lat: this.latitude, lng: this.longitude }, 18)
    }
  }
}

</script>

<style scoped>
  .baseMap {
    height:60vh;
    width: 100%;
    margin-top: 25px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    margin-top: -10px;
  }
  .leaflet-container {
    background: #fff0;
  }
</style>