<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: 'CustomerIcon',
  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)

      // 自定义icon图标(需要引用iconfont 查看public/index.html#link标签)
      var customerIcon = L.divIcon({className: 'iconfont icon-shengmingzhouqi'});
      // Point
      L.marker([24.48,118.108], {icon: customerIcon}).addTo(map)
          .bindPopup('Customer Icon of iconfont')
          .openPopup() // 默认打开popup

      // 文件目录 / 表示public下的目录
      var greenIcon = L.icon({
          iconUrl: '/assets/images/leaf-green.png',
          shadowUrl: '/assets/images/leaf-shadow.png',

          iconSize:     [38, 95], // size of the icon
          shadowSize:   [50, 64], // size of the shadow
          iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62],  // the same for the shadow
          popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
      })
      console.log(greenIcon)
      L.marker([24.48,118.138], {icon: greenIcon}).bindPopup('Customer Icon of image').addTo(map) // 默认不打开popup
      

      // 自定义Icon类型
      var LeafIcon = L.Icon.extend({
          options: {
              shadowUrl: '/assets/images/leaf-shadow.png',
              iconSize:     [38, 95],
              shadowSize:   [50, 64],
              iconAnchor:   [22, 94],
              shadowAnchor: [4, 62],
              popupAnchor:  [-3, -76]
          }
      });


      // var LeafIconfont = L.DivIcon.extend({
      //   className: 'iconfont ' + iconfontName
      // })
      // //
      // const customerIconfontType = new LeafIconfont ({iconfontName: 'icon-shengmingzhouqi'})
      // console.error(customerIconfontType,'customerIconfontType')
      // L.marker([24.28,118.158], {icon: customerIconfontType}).bindPopup('Customer Icon of Customer IconType').addTo(map) // 默认不打开popup 自定义类型

      const customerIconType =  new LeafIcon({iconUrl: '/assets/images/leaf-red.png'})
      L.marker([24.48,118.158], {icon: customerIconType}).bindPopup('Customer Icon of Customer IconType').addTo(map) // 默认不打开popup 自定义类型
    }
  }
}
</script>

<style scoped>
.map {
  height: 100vh;
  width: 100%;
}
/** 修改iconfont样式 */
/** >>> 使用因动态添加所以需要样式穿透 且 >>> 前面需要在源码中有的 不能是动态生成的*/
.map >>> .iconfont.icon-shengmingzhouqi{
  color: red
}
.red{
  color: red;
}
</style>