import mapboxgl from "mapbox-gl";
import Mx from "mxdraw";
import * as THREE from "three";
import proj4 from 'proj4'
const ldBox = {
  accessToken:"pk.eyJ1IjoianNsZDA4MTMiLCJhIjoiY2xxb2ozZnExMHJldTJpbXdjcDRycmYweSJ9.jcKq-28NRy8WxHk8i-J0cA",
  center:[ 119.74804185702634,
    31.57295594422347],
  Map:null,
  init(){
    mapboxgl.accessToken = this.accessToken;

    this.Map = new mapboxgl.Map({
      // Mapbox GL JS 进行地图渲染的 HTML 元素，或该元素的字符串 id 。该指定元素不能有子元素。
     container: 'viewDiv',
     // 地图位置
     center:this.center,
     // 地图样式
     style: {
       version: 8,
       sources: {
         vector: {
           type: 'raster',
           tiles: [
             // 高德地图 卫星影像
            //  'http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6'
             // 高德地图 矢量地图
             // 'http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7'
             // 天地图 卫星影像
              'http://t0.tianditu.gov.cn/img_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
             // 天地图 矢量地图
             //  'http://t0.tianditu.gov.cn/vec_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
             // bingmap 卫星影像
             //'http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=A,G,L&og=819&n=z',
             // bingmap 矢量地图
             // 'http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=G,L&shading=hill&og=819&n=z'
             // mapbox 卫星影像
             // 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?sku=101wZp4uNMRnl&access_token=pk.eyJ1IjoianNsZDA4MTMiLCJhIjoiY2xxb2ozZnExMHJldTJpbXdjcDRycmYweSJ9.jcKq-28NRy8WxHk8i-J0cA'
           ],
           tileSize: 256,
         },
       },
       layers: [
         {
           id: 'vector',
           type: 'raster',
           source: 'vector',
           layout: {
             visibility: 'visible',
           },
           minzoom: 0,
           maxzoom: 22,
         },
       ],
     }, // mapbox底图
     zoom: 10
    })
    this.Map.on('style.load', ()=> {
      // 添加自定义图层
      console.log('地图加载完成')

  })
  },
  addLayer(data){
        let self = this;
        let laryerId = data.id.toString();
        if(self.Map.getLayer(laryerId)){
          return
        }
      // 通过以上信息从而确定cad图上的具体位置
        let cadOrigin = JSON.parse(data.point);
        proj4.defs("EPSG:2364", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1.000000 +x_0=40500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs  no_defs")
        const center =  proj4("EPSG:2364", "EPSG:4326", cadOrigin)
        self.Map.setCenter(center)
        self.Map.setZoom(16)


        // 图纸或者模型的高度
        const modelAltitude = 0;

        // 将 LngLat 投影转换为 墨卡托投影坐标
        const point = mapboxgl.MercatorCoordinate.fromLngLat(
            center,
            modelAltitude
        );

        // 返回在此纬度上以墨卡托坐标单位表示的1米距离。
        // 对于现实世界中使用米单位的坐标，这自然提供了转换为墨卡托投影坐标的比例尺
        const lDistForM = point.meterInMercatorCoordinateUnits();

        // 当前决定该cad图纸在现实中的范围是1公里
        // const lCADArea = 1000 * lDistForM * 1;

        // 提供一些必要的mapbox信息，并且赋予了一些mxdraw提供的核心方法
        let mxMap = {
            // mapbox生成的canvas元素
            canvas: null,
            // 自定义图层提供的gl上下文
            gl: void 0,
            // cad图纸的位置1
            cadLocation1: new THREE.Vector3(),
            // cad图纸的位置2
            cadLocation2: new THREE.Vector3(),
              // cadOrigin  CAD图纸中的中心中，CAD图纸单位
             cadOrigin:  new THREE.Vector3(),
             //图纸中的中心在地址上的位置，墨卡托坐标坐标
             mapOrigin:new THREE.Vector3(),
            // 海拔高度
            elevation: 0,
            // 自定义图层信息
            customLayer: {},
            // cad图纸控件对象
            mxObj: null,
            // 坐标系转换的矩阵1
            matCadToMap: new THREE.Matrix4(),
             // 坐标系转换的矩阵1
            matMapToCad: new THREE.Matrix4(),
            // 自定义图层的矩阵
            matrix: void 0,
            // 渲染函数
            render(gl, matrix){

            },
            /** 坐标系相互转换的方法 */
            cadToMercatorCoord(pt) {
                pt.applyMatrix4(this.matCadToMap);
                return new mapboxgl.MercatorCoordinate(pt.x,pt.y,pt.z);
            },

            mercatorCoordToCad(pt){
                let ptRet = new THREE.Vector3(pt.x,pt.y,pt.z);
                ptRet.applyMatrix4(this.matMapToCad);
                return ptRet;
            },

            cadLongToMercatorCoord(len){
                let pt1 = new THREE.Vector3(0,0,0);
                let pt2 = new THREE.Vector3(len,0,0);
                pt1.applyMatrix4(this.matCadToMap);
                pt2.applyMatrix4(this.matCadToMap);
                return pt1.distanceTo(pt2);
            }

        }

        // mxMap.cadLocation1 = new THREE.Vector3(point.x - lCADArea / 2, point.y - lCADArea, point.z);
        // mxMap.cadLocation2 = new THREE.Vector3(point.x + lCADArea, point.y + lCADArea / 2, point.z);

           // cad图上一个绘图单位，对应map 墨卡托坐标坐标中的长度.
        let     meterInCADUnits = 1.0
        mxMap.mapLenInCADUnits = meterInCADUnits * lDistForM;

        mxMap.cadOrigin = new THREE.Vector3(cadOrigin[0], cadOrigin[1], 0);
        mxMap.mapOrigin = new THREE.Vector3(point.x, point.y, point.z);
        // 新增一个mapbox自定义图层
        const customLayer = {
            id: laryerId, // 任意不重复的ID
            type: "custom",
            renderingMode: "3d",
            async onAdd(map, gl) {
                // 同步加载mxdraw核心库
                await Mx.loadCoreCode()
                // 拿到mapbox的canvas元素
                mxMap.canvas = map.getCanvas();
                // 以及webgl上下文
                mxMap.gl = gl
                // 创建图纸控件对象
                Mx.MxFun.createMxObject({
                    // mapBox 提供 mapbox的一些必要参数
                    mapBox: mxMap,
                    // 要打开的图纸
                    cadFile: data.url,
                    callback: (mxObj) => {
                        mxMap.mxObj = mxObj;
                        mxObj.addEvent("loadComplete", () => {

                            // 更新mapbox
                            self.Map.triggerRepaint()
                        });
                    }
                });

            },
            render(gl, matrix) {
                // 赋值矩阵信息
                mxMap.matrix = matrix
                // 在创建图纸后会提供一个渲染函数,用于更新图纸
                mxMap.render(gl, matrix);

                // 刷新mapbox
                self.Map.triggerRepaint()
            }
        };
        // 赋值这个自定义图层的信息
        mxMap.customLayer = customLayer

        self.Map.addLayer(customLayer)
  },


}
export default ldBox
