<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 { mapConfig, serverConfig } from './ArcGISConfig'
const esri = require('esri-leaflet')
export default {
  name: 'LeafletMapRead',
  props: {
    longitude: {
      type: Number,
      default: 116.5937
    },
    latitude: {
      type: Number,
      default: 28.249
    }
  },
  data() {
    return {
      mapLoading: false,
      map: null
    }
  },
  mounted() {
    this.initMap()
    this.addMarker()
  },
  methods: {
    initMap() {
      this.mapLoading = true
      const map = L.map('map', {
        minZoom: 13,
        // maxZoom: 18,
        center: [27.755, 116.08],
        zoom: 16,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map

      esri.dynamicMapLayer({
        url: serverConfig.mapUrlBase,
        opacity: 1,
        f: 'image'
      }).addTo(map)

      // esri.tiledMapLayer({
      //   url: serverConfig.mapUrlBase,
      //   maxZoom: 15,
      //   f: 'image'
      // }).addTo(map)

      // for (let i = 0; i < 24; i++) {
      //   esri.featureLayer({
      //     url: serverConfig.mapUrlBase + '/' + i
      //     // minZoom: 4, // 最小缩放等级
      //     // maxZoom: 21// 最大缩放等级
      //   }).addTo(map)
      // }

      esri.featureLayer({
        url: serverConfig.mapUrlBj + '/0'
      }).addTo(map)
      esri.featureLayer({
        url: serverConfig.mapUrlBase + '/16'
      }).addTo(map)
      this.mapLoading = false
    },

    addMarker() {
      const icon = L.icon({
        iconUrl: require('../../assets/icons/icon-position.png'),
        iconSize: [35, 35],
        iconAnchor: [17.5, 35]
      })
      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 }, 16)
    }
  }
}

</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>