<template>
  <div class="data-map" ref="datamap" id="mapbox"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import { globalApi } from "../../../api/urlPatterns.js";
import { getLayer, getGeomData } from "../../../api/Datadetails";
mapboxgl.accessToken =
  "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
export default {
  props: {
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    // this.$nextTick(function () {
    //   this.initMap();
    // });
  },
  methods: {
    onLoad() {
      // console.log(this.row);
      if(!this.row.tableRef){
        return;
      }
      getLayer({
        spaceType: this.row.spaceType,
        tableName: this.row.tableRef,
      }).then((res) => {
        // console.log("地图", res);
        if (res.data.code == 200) {
          getGeomData(this.row.tableRef).then((el) => {
            // console.log(el);
            if (el.data.code == 200) {
              let st = el.data.msg.slice(6, -1);
              st = st.split(" ");
              // console.log([Number(st[0]), Number(st[1])]);
              this.initMap(res.data.data.data[2].url, st);
            }
          });
        }
      });
    },
    // 加载地图
    initMap(url, jwd) {
      let _this = this;
      this.map = new mapboxgl.Map({
        container: this.$refs.datamap,
        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
        center: [117.977325, 35.265961],
        zoom: 14,
        language: "zh-cmn",
        projection: "globe",
      });
      this.map.on("load", () => {
        _this.addGeoJsonLayer(url, jwd);
      });
    },
    // 'http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png'
    // http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/ksp:shp_1681969689@EPSG:4326@png
    addGeoJsonLayer(url, jwd) {
      // console.log(Object(url));
      this.map.addSource("wmsSource", {
        type: "raster",
        // tiles: [
        //   "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
        // ],
        tiles: [
          globalApi.GEOSERVER_URL +
            "/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:" +
            this.row.tableRef +
            "&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
        ],
        tileSize: 256,
      });

      this.map.addLayer({
        id: "street-border",
        type: "raster",
        source: "wmsSource",
        layout: {
          visibility: "visible",
        },
      });
      this.map.flyTo({
        center: [Number(jwd[0]), Number(jwd[1])],
        zoom: 10,
        speed: 5,
      });
    },
  },
};
</script>

<style scoped>
.data-map {
  width: 785px;
  height: 768px;
}
.data-map .map {
  width: 785px;
  height: 768px;
}
::v-deep.data-map .mapboxgl-ctrl-bottom-left {
  display: none !important;
}
::v-deep.data-map .mapboxgl-ctrl-bottom-right {
  display: none !important;
}
</style>