<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() {
      var map = L.map(this.$refs.map).setView([24.48, 118.108], 13);
      // L.esri.basemapLayer("Streets").addTo(map)
      // 
      // TileLayers和GridLayers
      // Path，例如直线，折线，圆形或GeoJSON图层。
      // Marker 阴影
      // Marker 图标
      // Popups
      map.createPane('labels');
      // pointer-events: auto; 可点击
      // pointer-events: none; 不可点击
      // pointer-events: stroke; /* SVG-only */  SVG 文字 可以点击
      // pointer-events: fill; /* SVG-only */ 整个SVG可以点击
      map.getPane('labels').style.pointerEvents = 'none';


      var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
              attribution: '©OpenStreetMap, ©CartoDB',
              pane: 'labels' // 加了个这无先后顺序(按labels的index顺序)  
      }).addTo(map);

      var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
      }).addTo(map);

      
      // var geojson = L.geoJson(GeoJsonData, geoJsonOptions).addTo(map);

      console.log('positron', positron, positronLabels)



      // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      //     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      // }).addTo(map);
      // // icon
      // L.marker([51.5, -0.09]).addTo(map)
      //     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      //     .openPopup();
    }
  }
}
</script>

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