<template>
 <div>
   <div class="map" ref="map"></div>

 </div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import L from 'leaflet/dist/leaflet'
import * as Esri from 'esri-leaflet'
L.esri = Esri
// icon 显示问题
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;

export default {
  name: 'Map',
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化Map
    initMap() {
      let zoomSnap = 0.5
      let zoomDelta = 1
      var map = L.map(this.$refs.map, {
        // crs: L.CRS.EPSG3857, // leaflet 默认是这个 
        // crs: L.CRS.EPSG4326, // 4326坐标(GPS坐标)
        zoomSnap: zoomSnap, // zoom增加与减少值   zoomSnap可以设置为零。这意味着Leaflet 不会 捕捉缩放级别。 传单将缩放级别捕捉到最接近的有效级别。例如，如果有zoomSnap: 0.25并且尝试这样做map.setZoom(0.8)，则缩放将恢复为0.75。使用map.fitBounds(bounds)或结束触摸屏上的缩小缩放手势时也会发生同样的情况。
        zoomDelta: zoomDelta // zoom增加与减少值缩放速度  当使用缩放按钮（默认情况下L.Control.Zoom）或键盘上的+/ -键时，此选项控制放大/缩小多少缩放级别。对于鼠标滚轮缩放，该wheelPxPerZoomLevel 选项控制鼠标滚轮放大或缩小的速度。
      }).setView([24.48, 118.108], 10);
    
      L.esri.basemapLayer("Streets").addTo(map)
      let center = [24.48,118.108]
      let zoom = 13
      let bounds = map.getBounds()
      // setTimeout(()=>{
      //     map.setView(center, zoom)
      // }, 3000)

      // 有动动画缩放效果
      // setTimeout(()=>{
      //   map.flyTo(center, zoom)
      // }, 3000)

      // setTimeout(()=>{
      //   map.zoomIn() // default 1  zoom 加1
      //   map.zoomOut() // zoomOut(delta),  zoom 减1
      // },5000) 

      setTimeout(()=>{
        map.setZoomAround(center, zoom)
      }, 3000)
     
      setTimeout(()=>{
        // 自适应
        map.fitBounds(bounds)  // 自动计算
      }, 4000)
     
      map.on('zoomstart', ()=>{
        console.log('zoom-start', map.getZoom())
      })
      map.on('zoomstart', ()=>{
        console.log('zoom-end', map.getZoom())
      })
    }
  }
}
</script>

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