<template>
  <div>
    <button @click="removeGraphicLayer">移出graphic图层</button>
    <div id="map">
    </div>
  </div>
</template>

<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
import L from "leaflet";
import {bbox} from "@turf/bbox";


export default {
  name: 'DkMap',
  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
          }
        ],
        zoom: 12,
        minZoom: 1,
        maxZoom: 16,
        // 纬度在前
        center: [34.247161, 108.944213],
        crs: i2d.CRS.EPSG4490
      },
      colors: ["#FFEDA0", "#FED976", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"],
      map: null,
      graphicLayer: null
    }
  },
  methods: {
    getArrayRandomOne(arr) {
      const n = Math.floor(Math.random() * arr.length)
      return arr[n]
    },
    removeGraphicLayer() {
      if (this.graphicLayer) {
        // 移出图层
        this.map.removeLayer(this.graphicLayer)
        // 销魂图层
        this.graphicLayer.destroy()
      }
    },
    addMarker() {
      let graphic = new i2d.Graphic.Marker({
        latlng: [32.3102954498753, 119.19403010080875],
        style: {
          rotationAngle: 49,
          image: "./sdt.png",
          width: 32,
          height: 44,
          horizontalOrigin: i2d.HorizontalOrigin.CENTER,
          verticalOrigin: i2d.VerticalOrigin.BOTTOM
        }
      })
      this.graphicLayer.addGraphic(graphic)

      graphic = new i2d.Graphic.Marker({
        latlng: [32.318242830742236, 119.21534353237826],
        style: {
          rotationAngle: 190,
          image: "./sdt.png",
          width: 32,
          height: 44,
          horizontalOrigin: i2d.HorizontalOrigin.CENTER,
          verticalOrigin: i2d.VerticalOrigin.BOTTOM
        }
      })
      this.graphicLayer.addGraphic(graphic)

      graphic = new i2d.Graphic.Marker({
        latlng: [32.310656694051374, 119.22235167838745],
        style: {
          rotationAngle: 280,
          image: "./sdt.png",
          width: 32,
          height: 44,
          horizontalOrigin: i2d.HorizontalOrigin.CENTER,
          verticalOrigin: i2d.VerticalOrigin.BOTTOM
        }
      })
      this.graphicLayer.addGraphic(graphic)
    },
  },
  mounted() {
    // 从数据库读取的地块信息
    const dkCoord = {"type": "Feature", "geometry": {"bbox": [119.19403010080875, 32.3102954498753, 119.22235167838748, 32.31824283074223], "type": "Polygon", "coordinates": [[[119.19403010080875, 32.3102954498753], [119.21534353237826, 32.318242830742236], [119.22235167838745, 32.310656694051374], [119.20791069412338, 32.31047249760787], [119.19403010080875, 32.3102954498753]]]}}
    this.map = new i2d.Map('map', this.mapOptions)
    const _self = this;
    const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
      name: "dk",
      data: dkCoord,
      // 渲染颜色
      symbol: {
        type: "polygon",
        styleOptions: {
          fill: true,
          // image: "img/fill/redLine.png",
          // imageOpacity: 1,
          fillOpacity: 0.5,
          outline: true,
          outlineWidth: 2,
          outlineOpacity: 1,
          outlineColor: "white"
        },
        callback: function () {
          return {
            fillColor: _self.getArrayRandomOne(_self.colors)
          }
        }
      }
    })
    this.map.addLayer(geoJsonLayer)

    //地块自带外包矩形
    if (dkCoord.bbox) {
      //定位到矩形
      this.map.fitBounds(L.latLngBounds([
        [dkCoord.bbox[1], dkCoord.bbox[0]],
        [dkCoord.bbox[3], dkCoord.bbox[2]]
      ]));
    } else {
      //地块不含外包矩形 自己计算
      const result = bbox(dkCoord);
      this.map.fitBounds(L.latLngBounds([
        [result[1], result[0]],
        [result[3], result[2]]
      ]));
    }

    // 创建矢量数据图层
    this.graphicLayer = new i2d.Layer.GraphicLayer()
    this.map.addLayer(this.graphicLayer)
    this.addMarker()
  }
}
</script>

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