<template>
  <div id="map">
  </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
      }
    }
  },
  mounted() {
    // 从数据库读取的地块信息
    const dkCoord = {"type": "Polygon", "coordinates": [[[100.98204924173348, 40.47840655548055], [101.22951318633983, 40.43081733536394], [101.14765972773921, 40.10340350096175], [100.85070299421159, 40.181449821952924], [100.98204924173348, 40.47840655548055]]]}
    const geojson = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": dkCoord
        }
      ]
    }
    // eslint-disable-next-line no-unused-vars
    const map = new i2d.Map('map', this.mapOptions)
    const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
      name: "安徽各市",
      data: geojson,
      // 渲染颜色
      symbol: {
        type: "polygon",
        styleOptions: {
          fillOpacity: 0.6,
          fillColor: "#ff0044",
          outline: true
        }
      }
    })
    map.addLayer(geoJsonLayer)

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

  }
}
</script>

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