import { Map, CircleMarker, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
import dataCommon from '../common/data.js'
import { LabelTextCollision } from './label.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()
    // });
    const map = new Map('map', {
      renderer: new LabelTextCollision({
        collisionFlg: true
      })
    })

    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. 创建图层glayer5、添加自定义弹窗bindPopup
    const glayer5 = new GeoJSON(dataCommon.geo4d12, {
      pointToLayer: (geoJsonPoint, latlng) => {
        console.log(geoJsonPoint.properties['NAME'])
        return new CircleMarker(latlng, {
          text: geoJsonPoint.properties['NAME']
        }); //.bindTooltip(geoJsonPoint.properties['NAME'], { permanent: true });
      }
    });
    glayer5.addTo(this.map)
  }
}

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