
// 0. 引入使用到的leaflet类
import { Marker, GeoJSON } from '../lib/leaflet/leaflet-src.esm.js';
import { MyMap } from '../common/myMap.js';
import dataCommon from '../common/data.js'

class Map5 extends MyMap {

  run() {
    
    // 5.1 创建图层-5环
    const glayer5 = new GeoJSON(dataCommon.geoRing5, {
      pointToLayer: (geoJsonPoint, latlng) => {
        return new Marker(latlng, {
          icon: this.iconRed
        });
      }
    });
    glayer5.addTo(this.map);

    // 5.2 创建图层-4环
    const glayer4 = new GeoJSON(dataCommon.geoRing4, {
      pointToLayer: (geoJsonPoint, latlng) => {
        return new Marker(latlng, {
          icon: this.iconBlue
        });
      }
    });
    glayer4.addTo(this.map);
    
    // 5.3 绑定控制层checkbox的change事件，控制图层显示和隐藏
    const check5 = document.getElementById('check5');
    check5.onchange = evt => {
      if (evt.target.checked) {
        glayer5.addTo(this.map);
      } else {
        glayer5.removeFrom(this.map);
      }
    };
    const check4 = document.getElementById('check4');
    check4.onchange = evt => {
      if (evt.target.checked) {
        glayer4.addTo(this.map);
      } else {
        glayer4.removeFrom(this.map);
      }
    };

  }
}

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