import { Map, Marker, Icon, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
import dataCommon from '../common/data.js'

class MapX {
  init() {
    // 3. 创建高德Map，参数默认即可
    const amap = new AMap.Map('amap', {
      fadeOnZoom: false,
      navigationMode: 'classic',
      optimizePanAnimation: false,
      animateEnable: false,
      dragEnable: false,
      zoomEnable: false,
      resizeEnable: true,
      doubleClickZoom: false,
      keyboardEnable: false,
      scrollWheel: false,
      expandZoomRange: true,
      zooms: [1, 20],
      // 地图样式，可根据自己后台配置
      mapStyle: 'amap://styles/1e65d329854a3cf61b568b7a4e2267fd',
      features: ['road', 'point', 'bg'],
      viewMode: '2D'
    });

    // 4.创建Leaflet Map，绑定消息：放大缩小、移动
    const map = new Map('map')
    // 4.1 使用Canvas构造map
    // const map = new Map('map', {
    //   renderer: new Canvas()
    // });

    map.on('zoom', evt => {
      amap.setZoom(evt.target.getZoom());
    });

    map.on('move', evt => {
      const pt = evt.target.getCenter();
      amap.setZoomAndCenter(evt.target.getZoom(), [pt.lng, pt.lat]);
    });

    // 5. 设置中心点、缩放级别
    map.setView([39.909186, 116.397411], 10);

    this.map = map
  }

  run() {
    this.init()

    // 6. 增加myPane、设置zIndex
    const glayer5 = new GeoJSON(dataCommon.geo4d12, {
      pointToLayer: (geoJsonPoint, latlng) => {
        return new Marker(latlng, {
          icon: new Icon({
            iconUrl: 'data:image/svg+xml,' + encodeURIComponent(dataCommon.svgRed),
            iconSize: [32, 32],
            iconAnchor: [16, 32]
          })
        });
      }
    });
    glayer5.addTo(this.map).bindPopup(layer => {
      return `<div style="height: 150px; width: 300px; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr">
        <img style="height: 100%; width: 100%;" src=${
          layer.feature.properties['URL']
        }>
        <div style="display: grid; grid-gap: 10px; grid-template-rows: auto 1fr">
          <span>名称: ${layer.feature.properties['NAME']}</span>
          <span>描述: ${layer.feature.properties['DESC']}</span>
        </div>
      </div>`;
    });
  }
}

let map = new MapX()
map.run()