import { Map, Canvas, Marker, Icon, CircleMarker, Polyline, Polygon } from '../lib/leaflet/leaflet-src.esm.js';

class MapX {

  run() {
    // 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);

    // 6. 增加myPane、设置zIndex
    map.createPane('myPane');
    map.getPane('myPane').style.zIndex = 601;
    
    // 7. 增加g1、g2两个Polygon，通过指定 pane 属性，设置图层zIndex
    // （默认是通过增加的顺序决定掩盖层的，后加入的在上层）
    const g1 = new Polygon(
      [
        [39.999186, 116.507411],
        [39.999186, 116.407411],
        [40.099186, 116.407411],
        [40.099186, 116.507411]
      ],
      {
        stroke: false,
        fillColor: 'blue',
        fillOpacity: 1,
        // pane: 'myPane'
      }
    );
    g1.addTo(map);

    const g2 = new Polygon(
      [
        [39.959186, 116.557411],
        [39.959186, 116.457411],
        [40.059186, 116.457411],
        [40.059186, 116.557411]
      ],
      {
        stroke: false,
        fillColor: 'red',
        fillOpacity: 1
      }
    );
    g2.addTo(map);

    // g2.bringToFront();
  }
}

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