<template>
 <div>
   <div class="map" ref="map"></div>

 </div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import L from 'leaflet/dist/leaflet'
import * as Esri from 'esri-leaflet'
L.esri = Esri

// icon 显示问题
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import EginTools from './EginTools'
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;

export default {
  name: 'LayerGroups',
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化Map
    initMap() {
      var map = L.map(this.$refs.map).setView([24,118], 9);
      L.esri.basemapLayer("Streets").addTo(map)
      // 每个图形都是一样layer
      var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
          denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
          aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
          golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
      // 图层组
      // littleton.setId(littleton)
      var cities = L.layerGroup([littleton, denver, aurora, golden]);
      // 循环图层
      cities.eachLayer((layer)=>{
        // layer.bindPopup('Hello')
        console.log(layer);
      })
      // 是否有某个图层
      if(cities.hasLayer(littleton)) {
        console.log("has", littleton)
      }
      cities.addTo(map)
      if(cities.hasLayer(denver)){
        console.error("删除denver", denver.toGeoJSON())
        cities.removeLayer(denver)
      }

      cities.on('click', (evt)=>{
        console.log(evt)
        alert('Clicked on a member of the group!');
      })

      console.info("cities toGeoJSON", cities.toGeoJSON())
      // 点转换
      let tmpGeoJson = cities.toGeoJSON()
      // let tmpGeoJson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[117.24599450826645,36.65120999361623],[117.24690914154054,36.65124657580678],[117.24694132804869,36.65100341150826],[117.24670529365538,36.650695689215624],[117.24620908498764,36.65059024562966]]}}]}
      // let tmpGeoJson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[117.15253829956055,36.67089730689858],[117.14584350585938,36.658917692387114],[117.16318130493163,36.64721167063527],[117.17554092407227,36.65313376288551],[117.18034744262694,36.66773046368491],[117.17348098754883,36.677643625245274],[117.15322494506836,36.692786266889456],[117.13193893432617,36.68397636535661],[117.15047836303711,36.68012171607383],[117.15253829956055,36.67089730689858]]]}}]}
     
      // let tmpGeoJson = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[117.24609374999999,36.65079252503471]}},{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[117.24599450826645,36.65120999361623],[117.24690914154054,36.65124657580678],[117.24694132804869,36.65100341150826],[117.24670529365538,36.650695689215624],[117.24620908498764,36.65059024562966]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[117.15253829956055,36.67089730689858],[117.14584350585938,36.658917692387114],[117.16318130493163,36.64721167063527],[117.17554092407227,36.65313376288551],[117.18034744262694,36.66773046368491],[117.17348098754883,36.677643625245274],[117.15322494506836,36.692786266889456],[117.13193893432617,36.68397636535661],[117.15047836303711,36.68012171607383],[117.15253829956055,36.67089730689858]]]}}]}
      let tools = new EginTools()
      console.error(tmpGeoJson, L)
      let arcgisGeometry = tools.geoJsonToArcgis(tmpGeoJson)
      console.error(arcgisGeometry,'arcgisGeometry')

      
      console.log(JSON.stringify(arcgisGeometry), 'JSON_ArcgisGeometry')
      // L.Tools.
      // 获取图层的ID
      console.info("littleton id is", cities.getLayerId(littleton))

      // const layer1Url = 'http://dev.eginsoft.cn:6080/arcgis/rest/services/shuibao2/FeatureServer/0'
      // const layer2Url = 'http://dev.eginsoft.cn:6080/arcgis/rest/services/shuibao2/FeatureServer/7'
      // var layer1 = L.esri.featureLayer({url: layer1Url}).addTo(map),
      // layer2   = L.esri.featureLayer({url: layer2Url}).addTo(map);

      // var baseMaps = {
      //     "layer1Url": layer1,
      //     "layer2Url": layer2
      // };
      var layer =  L.esri.request('http://192.168.110.201:6080/arcgis/rest/services/Clone/SMBZD/MapServer/0')

      var baseMaps = {
          "layer1Url": layer
      };
      // var secondMap = {
      //   "Grayscale2": grayscale,
      //   "Streets2": streets
      // }
      var overlayMaps = {
          // "Cities": cities,
          "littleton":littleton,
          "aurora":aurora,
          "golden": golden
      };
     
      L.control.layers(baseMaps,overlayMaps ).addTo(map);
      // var map = L.map('map', {
      //     center: [39.73, -104.99],
      //     zoom: 10,
      //     layers: [grayscale, cities]
      // });


      // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      //     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      // }).addTo(map);
      // // icon
      // L.marker([51.5, -0.09]).addTo(map)
      //     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      //     .openPopup();
    }
  }
}
</script>

<style scoped>
.map {
  height: 100vh;
  width: 100%;
}
</style>