<template>
  <div>
    <table>
      <tbody>
      <tr>
        <td v-for="feature in features" :key="feature.properties.adcode">
          <button v-if="feature.properties.adcode!=='100000_JD'" @click="districtNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
        </td>
      </tr>
      <tr></tr>
      <tr>
        <td v-for="feature in secondFeatures" :key="feature.properties.adcode">
          <button style="background-color: aquamarine" v-if="feature.properties.adcode!=='100000_JD'" @click="secondDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
        </td>
      </tr>
      <tr></tr>
      <tr>
        <td v-for="feature in thirdFeatures" :key="feature.properties.adcode">
          <button style="background-color: red" v-if="feature.properties.adcode!=='100000_JD'" @click="thirdDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div id="map">
    </div>
  </div>
</template>

<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
import axios from "axios";

export default {
  name: 'XzqMap',
  data() {
    return {
      mapOptions: {
        copyright: false,
        basemaps: [
          {
            type: 'group',
            name: '天地图电子',
            layers: [
              {
                type: 'tdt',
                layer: 'vec_d',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490,
              },
              {
                type: 'tdt',
                layer: 'vec_z',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490,
              }
            ],
            icon: './dz.png',
            show: true
          },
          {
            type: 'group',
            name: '天地图地形',
            layers: [
              {
                type: 'tdt',
                layer: 'ter_d',
                key: i2d.Token.tiandituArr,
                errorTileUrl: 'img/tile/errortile.png',
                crs: i2d.CRS.EPSG4490
              },
              {
                type: 'tdt',
                layer: 'ter_z',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490
              }
            ],
            icon: './dx.png'
          },
          {
            type: 'group',
            name: '天地图影像',
            layers: [
              {
                type: 'tdt', layer: 'img_d', key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490
              },
              {
                type: 'tdt', layer: 'img_z', key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490
              }
            ],
            icon: './yx.png',
            //必须给最后一个底图配置zindex要不然最后底图切换专题图层不展示
            // 要比专题图层小
            zIndex: 1
          }
        ],
        zoom: 12,
        minZoom: 4,
        maxZoom: 20,
        // 纬度在前
        center: [34.247161, 108.944213],
        crs: i2d.CRS.EPSG4490,
        control: {
          scale: true,
          locationBar: {
            crs: 'CGCS2000_GK_Zone_3',
            template: '<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>层级:{level}</div>'
          },
          zoom: {position: 'bottomleft'},
          toolBar: {
            position: 'bottomleft',
            item: ['home', 'fullscreen', 'clear']
          },
          mapSwitch: {
            position: 'bottomright'
          }
        }
      },
      features: [],
      secondFeatures: [],
      thirdFeatures: [],
      map: null,
      geoJsonLayer: null
    }
  },
  mounted() {
    this.map = new i2d.Map('map', this.mapOptions)
    this.geoJsonLayer = new i2d.Layer.GeoJsonLayer({
      crs: 'EPSG:4326',
      name: "行政区"
    })
    this.map.addLayer(this.geoJsonLayer)
    axios.get("http://192.168.2.236/areas/100000.json").then((response) => {
      if (response.status === 200) {
        this.features = response.data.features;
      } else {
        alert("服务异常")
      }
    })
  },
  methods: {
    districtNavigate(districtCode, feature) {
      if (districtCode) {
        this.secondFeatures = []
        this.thirdFeatures = []
        this.geoJsonLayer.clear()
        this.geoJsonLayer.load({
          data: feature,
          flyTo: true
        })
        axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
          if (response.status === 200) {
            this.secondFeatures = response.data.features;
          } else {
            alert("服务异常")
          }
        })
      }
    },
    secondDistrictNavigate(districtCode, feature) {
      if (districtCode) {
        if (feature.properties.level !== "district") {
          axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
            if (response.status === 200) {
              this.thirdFeatures = response.data.features;
            } else {
              alert("服务异常")
            }
          });
        }
        this.geoJsonLayer.clear()
        this.geoJsonLayer.load({
          data: feature,
          flyTo: true
        })
      }
    },
    thirdDistrictNavigate(districtCode, feature) {
      if (districtCode) {
        this.geoJsonLayer.clear()
        this.geoJsonLayer.load({
          data: feature,
          flyTo: true
        })
      }
    }
  }
}
</script>

<style scoped>
#map {
  position: absolute;
  margin: 0;
  height: 80%;
  width: 80%;
}
</style>