import { getToken } from "@/utils/auth";
//配置文件地址
// import config from "../../../../public/config/config.js";
import { Map, View } from "ol"; //地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import { fromLonLat, transform } from "ol/proj"; //将坐标从经度/纬度转换为不同的投影。
import XYZ from "ol/source/XYZ";
import WMTS from "ol/source/WMTS.js";
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
import { get as getProjection, Projection } from "ol/proj.js";
import { register } from "ol/proj/proj4";
import MousePosition from "ol/control/MousePosition.js";
import { getTopLeft, getWidth } from "ol/extent.js";
import { format } from "ol/coordinate";
import store from "@/store";
import { nextTick } from "vue";
const olMap = {
  map: null,
  Layer: null,
  projectionObj: {
    code: null,
    extent: null,
  },
  initMap() {
    //google地图
    // var googleMapLayer = new TileLayer({
    //   source: new XYZ({
    //     url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    //   }),
    // });
    // proj4.defs(
    //   "ESRI:103880",
    //   "+proj=laea +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs"
    // );
    // register(proj4);
    let mousePositionControl = new MousePosition({
      coordinateFormat: (coordinate) => {
        store.state.olLon = coordinate[0].toFixed(6)
        store.state.olLat = coordinate[1].toFixed(6);
        if (this.map) {
          store.state.olZoom = parseInt(this.map.getView().getZoom())
        }
      },
      projection: this.projectionObj.code,
      target: 'mouse',
    });
    const projection = new Projection({
      // code: this.projectionObj.code,
      code: this.projectionObj.code,
      extent: this.projectionObj.extent,
      //   extent: this.projectionObj.extent,
    });
    this.map = new Map({
      target: "mapView",
      layers: [], //AMapLayer, baiduMapLayer
      view: new View({
        projection: projection,
        center: [0, 0],
        zoom: 4,
      }),
      controls: [mousePositionControl]
    });
  },
  addTreeData(treeNode, obj) {
    // this.delLayerAll();
    this.projectionObj = obj;
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode); //有代理
    } else {
      this.addUrlAddress(treeNode); //无代理
    }
  },
  //代理地址
  addProxyAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1: //数字正射影像图
        this.setDataType(res);
        break;
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3: //数字高程模型（晕渲图）
        this.setDataType(res);
        break;
      case 4: //单波段栅格数据
        this.setDataType(res);
        break;
      case 5: //多光谱栅格数据
        this.setDataType(res);
        break;
      case 6: //高光谱栅格数据
        this.setDataType(res);
        break;
      case 7: //矢量图层
        this.setVectorData(res);
        break;
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
  },
  //普通地址
  addUrlAddress(res) {
    switch (res.category) {
      case 0: //其他
        break;
      case 1: //GisServer
        this.addProxyAddress(res);
        break;
      case 2: //GeoServer
        this.addGeoServerAddress(res);
        break;
      case 3: //数简
        this.addProxyAddress(res);
        break;
    }
  },
  setDataType(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 1: //TMS
        // this.setAddTmsLayer(res);
        break;
      case 2: //WMTS
        this.addWmts(res);
        break;
      case 3: //WMS
        // this.setAddWmsLayer(res);
        break;
    }
  },
  setTerrainData(res) {
    switch (res.type) {
      case 0: //URL
        // this.setAddTearrinLayer(res);
        break;
      case 1: //TMS
        // this.setAddTearrinLayer(res);
        break;
    }
  },
  setVectorData(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 3: //WMS
        // this.setAddWmsLayer(res);
        break;
      case 4: //WFS
        break;
    }
  },
  //获取服务地址
  getLayrUrl(res) {
    var url;
    if (res.proxy) {
      const token = getToken();
      url = config.proxy + res.proxy.replaceAll("{token}", token);
    } else {
      url = res.url;
    }
    return url;
  },
  deleteLayer() {
    if (this.map && this.Layer) {

      this.map.removeLayer(this.Layer);
      this.Layer = null;
    }
  },
  addWmts(res) {
    this.deleteLayer();
    var url = this.getLayrUrl(res);
    const projection = new Projection({
      code: this.projectionObj.code,
      // extent: this.projectionObj.extent,
      // code: "ESRI:103879",
      extent: this.projectionObj.extent,
    });

    if (this.map) {
      this.map.values_.view.projection_ = projection
    }

    var projectionExtent = projection.getExtent();

    var size = getWidth(projectionExtent) / 256;
    var resolutions = new Array(18);
    var matrixIds = new Array(18);
    for (var z = 1; z < 19; ++z) {
      // generate resolutions and matrixIds arrays for this WMTS
      resolutions[z] = size / Math.pow(2, z);
      matrixIds[z] = z;
    }
    this.Layer = new TileLayer({
      opacity: 0.7,
      source: new WMTS({
        url: url,
        layer: "img", //注意每个图层这里不同
        matrixSet: "GoogleMapsCompatible",
        format: "image/png",
        style: "default",
        projection: projection,
        tileGrid: new WMTSTileGrid({
          origin: getTopLeft(projectionExtent), //原点（左上角）
          resolutions: resolutions, //分辨率数组
          matrixIds: matrixIds, //矩阵标识列表，与地图级数保持一致
        }),
        wrapX: true,
      }),
    });
    if (this.map) {
      this.map.addLayer(this.Layer);
      // 
      // 

      // this.map.getView().fit(this.projectionObj.extent, this.map.getSize());
      if (res.bak) {
        var obj = JSON.parse(res.bak);
        this.map.getView().setCenter(obj.center)
        this.map.getView().setZoom(obj.zoom);
      } else {
        this.map.getView().fit(this.projectionObj.extent);
        // var val = this.projectionObj.extent;
        // this.map.getView().setCenter([(val[0] + val[1]) / 2, (val[2] + val[3]) / 2.4])
        // this.map.getView().setZoom(3);
      }
      


    }
  },


};
export default olMap;