<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,{
        // crs:L.CRS.EPSG4326
      }).setView([24.48, 118.108], 13);
      L.esri.basemapLayer("Streets").addTo(map)

    // var basemaps = {
    //   Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    //       layers: 'TOPO-WMS'
    //   }),

    //   Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    //       layers: 'OSM-Overlay-WMS'
    //   }),

    //   'Topography, then places': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    //       layers: 'TOPO-WMS,OSM-Overlay-WMS'
    //   }),

    //   'Places, then topography': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    //       layers: 'OSM-Overlay-WMS,TOPO-WMS'
    //   })
    // };

    // L.control.layers(basemaps).addTo(map);

    // basemaps.Topography.addTo(map);

    // 数据叠加
    let url = 'http://dev.eginsoft.cn:6080/arcgis/services/clone/clone_fire_MSSQL/MapServer/WMSServer'
    var nexrad = L.tileLayer.wms(url, {
        layers: [0,1,2,3,4,5,6,7,8,9], // 0,1,2,3,4,5,6,7
        format: 'image/png',
        transparent: true,
        attribution: "Weather data © 2012 IEM Nexrad"
    })
    map.addLayer(nexrad)
    
    console.log(nexrad,'nexrad')




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