// 0. 引入使用到的leaflet类
import { Map, TileLayer, LayerGroup, Control, Icon } from '../lib/leaflet/leaflet-src.esm.js';
import dataCommon from './data.js'

class MyMap {
  constructor() {
    this.initBase();
    this.initIcons();
  }

  initBase() {
    // 1. 创建一个map对象
    //    参数为html元素的id： <div id="map"></div>
    this.map = new Map('map');

    // 2. 创建一个地图图层TileLayer
    //    参数为一个url模板，一般包含xyz
    //    有时候模板中包含subdomains，表示地图有多个子url（对应模板参数{s}）
    this.amapLayer = new TileLayer(
      'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
      {
        subdomains: '1234'
      }
    );

    // 2.1 再创建一个地图图层tdtVectorLayer
    const tdtVectorLayer = new TileLayer(
      'http://t0.tianditu.gov.cn/vec_w/wmts?layer=vec&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28',
      {}
    );
    const tdtLabelLayer = new TileLayer(
      'http://t0.tianditu.gov.cn/cva_w/wmts?layer=cva&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=11b55a09c9e0df4a1e91741b455b7f28',
      {}
    );
    this.tdtLayer = new LayerGroup([tdtVectorLayer, tdtLabelLayer]);

    // 3. 图层加入到地图map中（显示一个图层）
    this.tdtLayer.addTo(this.map);
    // 4. 设置地图中心点坐标（北京），缩放级别10
    this.map.setView([39.909186, 116.397411], 10);

    // 5. 添加一个控制层
    this.layerControl = new Control.Layers(
      {
        高德: this.amapLayer,
        天地图: this.tdtLayer
      },
      {},
      { collapsed: false }
    );
    // 6.  将控制层加入到地图map中
    this.layerControl.addTo(this.map);
  }

  _newIcon(svg) {
    return new Icon({
      iconUrl: 'data:image/svg+xml,' + encodeURIComponent(svg),
      iconSize: [24, 24],
      iconAnchor: [12, 12]
    })
  }

  initIcons() {
    this.iconRed = this._newIcon(dataCommon.svgRed);
    this.iconBlue = this._newIcon(dataCommon.svgBlue);
    this.iconHospital = this._newIcon(dataCommon.svgHospital);
    this.iconSchool = this._newIcon(dataCommon.svgSchool);
  }
}

export {MyMap};