<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)
      // // L.esri.featureLayer({
      // //   url: 'http://dev.eginsoft.cn:6080/arcgis/rest/services/clone/PG_FIRE/MapServer/1'
      // // }).addTo(map);
      // const url = 'http://dev.eginsoft.cn:6080/arcgis/rest/services/clone/PG_FIRE/MapServer/1'
      // this.loadFeatureLayer(url, map)
      var map = L.map(this.$refs.map).setView([37.75, -122.23], 10);

      L.esri.imageMapLayer({
        url: 'https://landsat.arcgis.com/arcgis/rest/services/Landsat/PS/ImageServer',
        // attribution: 'United States Geological Survey (USGS), National Aeronautics and Space Administration (NASA)'
      }).addTo(map);
    },
    loadFeatureLayer(url,map) {
      L.esri.imageMapLayer(url).addTo(map)
    }
  }
}
</script>

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