potree-sdk/src/custom/viewer/map/Map.js

import * as THREE from "../../../../libs/three.js/build/three.module.js";
import math from '../../utils/math.js'
import browser from '../../utils/browser.js'

let texLoader = new THREE.TextureLoader() 
    texLoader.crossOrigin = "anonymous" 


let createErrorMaterial = function() {
   var t = new THREE.MeshBasicMaterial({
       transparent: !0,
       depthWrite: !1,
       depthTest: !0,
       opacity: 1,
       side: THREE.DoubleSide
   });
   return t.color = new THREE.Color(3355443),
   t
}
let tempVector = new THREE.Vector3,  //sharedata
    face1 = new THREE.Face3(0,1,2),
    face2 = new THREE.Face3(2,3,0),
    errorMaterial = createErrorMaterial(),
    uv00 = new THREE.Vector2(0,0),
    uv01 = new THREE.Vector2(0,1),
    uv10 = new THREE.Vector2(1,0),
    uv11 = new THREE.Vector2(1,1),
    face1UV = [uv00, uv10, uv11],
    face2UV = [uv11, uv01, uv00]
 


const HALF_WORLD_SIZE = 21e6 //略大于半个周长（mapSizeM/2）
const MAX_VERTICAL_DIST = 2 
const MAX_VERTICAL_DIST_TO_BEST = 1  
 
function defineLocalProj(locationLonLat){ 
     proj4.defs("LOCAL_MAP", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
}
 

const getSid = (function(){
    let sid = 0
    return function(){
        return sid++
    }
})()

//高德坐标拾取工具 : https://lbs.amap.com/tools/picker
 

export class MapLayer extends THREE.EventDispatcher{ // 包括了 MapLayerBase SceneLayer
    constructor(viewer_, viewport){
        super()
        this.sceneGroup = new THREE.Object3D;
        this.sceneGroup.name = "MapLayer" 
        this.waitQueue = [] //等待加载的
        
        this.loadingInProgress = 0
        this.maps = [] 
        this.frustum = new THREE.Frustum 
        this.frustumMatrix = new THREE.Matrix4 
        this.tileColor =  new THREE.Color(16777215)
        this.viewport = viewport
        this.changeViewer(viewer_) 
        //添加地图
        var map = new TiledMapOpenStreetMap(this, this.tileColor )
        this.addMap(map) 
        

        //map.setEnable(false)
        this.sceneGroup.addEventListener('isVisible',()=>{
            this.viewer.mapChanged = true
        })
       
    }
    
    
    
    addMapEntity(data, datasetId){ 
        if(!data || !data[0]){ 
            Potree.Log('平面图无数据',{font:'red'})
            return
        }
        data[0].datasetId = datasetId
        var floorplan = new TiledMapFromEntity(this, this.tileColor, data[0]   )//[0]?

        if(floorplan){
            floorplan.name += "_"+ datasetId  

            this.addMap(floorplan)
            floorplan.updateProjection()
            floorplan.updateObjectGroup()
             
            let visible = false

            if(datasetId in Potree.settings.floorplanEnables){
                visible = Potree.settings.floorplanEnables[datasetId]
            }else{
                visible = Potree.settings.floorplanEnable
            }

            if(visible){
                this.needUpdate = true
            }else{
                floorplan.setEnable(false)
            }
            
            this.dispatchEvent({type:'floorplanLoaded', floorplan})
        }
        return floorplan
    }
    
    
    getFloorplan(datasetId){
        return this.maps.find(e=>e.name == 'floorplan'+"_"+ datasetId  )
    }
    
    
    addMap(t){ 
        this.maps.push(t)
        //this.view.invalidateScene()
        this.needUpdate = true
        this.viewer.mapChanged = true
    }
     
    removeMap(t){
        var e = this.maps.indexOf(t);
        if(e >= 0){
            t.removeFromSceneGroup(this.sceneGroup) 
            this.maps.splice(e, 1) 
        }
         
        /* this.view.invalidateScene() */ 
        this.needUpdate = true 
        this.viewer.mapChanged = true
                
    }
    
     
    
    
    changeViewer(viewer_){//add 
        this.viewer = viewer_ 
    }
    
    initProjection(){
        this.maps.forEach(map=>{
            map.updateProjection()
            map.updateObjectGroup() 
        })
    }
    
    visibilityChanged(){
        if (!this.visible)
            for (var t = 0, e = this.maps; t < e.length; t++){
                e[t].removeFromSceneGroup(this.sceneGroup)
            }
    }
  
     
     
    update(){
        
        this.needUpdate = false
        if(this.disabled || !this.maps.find(e=>!e.disabled) || !this.maps.find(e=>e.objectGroup.visible)   )return  //add
        this.viewer.mapChanged = true
          
        var e, n, i, r, o;
        
        this.updateTimer = void 0,
        e = this.viewport.camera,
        n = e.projectionMatrix.clone() 
        
        let expandRatio = 1.3 
        n.elements[0] /= expandRatio 
        n.elements[5] /= expandRatio   // 为了缓存吗，使边界处也提前加载，扩大显示区域
        
         
        this.frustumMatrix.multiplyMatrices(n, e.matrixWorldInverse),
        this.frustum.setFromProjectionMatrix(this.frustumMatrix),
        this.frustum.planes[4].setComponents(0, 0, 0, 0),
        this.frustum.planes[5].setComponents(0, 0, 0, 0),
        i = !0 
        
        //console.log('-------------update-----------')
        for (r = 0; r < this.maps.length; r++){
            var map = this.maps[r] 
            i = map.update(this.frustum, this.sceneGroup) && i;
        }
            
        return [2, i]
        
                 
    }
     
    
    updateProjection(){
        for (var t = 0, e = this.maps; t < e.length; t++){
            var n = e[t];
            n.clearProjection(),
            n.updateObjectGroup()
        }
    }
    
    
    
}
 
    
    
    
    
    
    
    
    
   
 

export class TiledMapBase extends THREE.EventDispatcher{
    constructor( name, mapLayer, tileColor, projection){
        super();
        this.name = name 
        this.mapLayer = mapLayer,
        this.tileColor = tileColor,
        this.bias = 0 
        this.zIndex = -1  
        this.objectGroup = new THREE.Object3D;
        this.objectGroup.name = name
        this.objectGroupAdded = !1,
        this.baseTile = new MapTile(this, this.objectGroup, this.tileColor, null, '0'),
        this.isTileVisibleBox = new THREE.Box3,
        this.isTileVisibleVec = new THREE.Vector3 
        this.projection = projection
        this._zoomLevel = 0;//1-20
         
        this.objectGroup.addEventListener('isVisible',()=>{
            this.mapLayer.viewer.mapChanged = true
        })
        
        this.computeCount = 0
        this.maxLoading = 3 
        this.loadFailCount = 0
        this.loadingInProgress = 0
        
    }
     
    get zoomLevel(){
        return this._zoomLevel
    }
    set zoomLevel(zoomLevel){
        if(this._zoomLevel != zoomLevel){
            this._zoomLevel = zoomLevel
            
            this.dispatchEvent({type:'zoomLevelChange',zoomLevel})
             
            //if(this.name == 'map')console.log(zoomLevel,viewer.mapViewer.camera.zoom)
        }
    }
    
    
    updateObjectGroup(){
        this.position && this.objectGroup.position.copy(this.position),
        this.quaternion && this.objectGroup.quaternion.copy(this.quaternion),
        this.objectGroup.updateMatrixWorld(!0)
    }
    
    updateProjection(){ 
        if(!this.transformMapToLocal){
            this.transformMapToLocal = proj4(this.projection, "LOCAL_MAP")  
        }  
    } 
    
    clearProjection(){
        this.transformMapToLocal = void 0 
        this.projection !== 'LOCAL_MAP' && this.baseTile.remove()
    }
    
    setEnable(enable){//add
        if(!this.disabled == enable)return
        if(enable){
            //console.log('setEnable',true)
        }
        this.disabled = !enable
     
        Potree.Utils.updateVisible(this.objectGroup, 'setEnable', enable)
        
        if(!enable){
            this.baseTile.remove()
        }else{
            this.mapLayer.needUpdate = true
        }        
        
    }
    
    
   
    update(e, n){
        this.computeCount = 0 
        var unavailable = (this.disabled || !this.objectGroup.visible)//地图即使不显示也要获得zoomlevel
        if(this.name != 'map' && unavailable)return 
        
        this.updateProjection()
        
        if(!this.transformMapToLocal)return
        
        if (!this.isTileVisible(new THREE.Vector3(0,0,0), this.mapSizeM, e))  
            return this.removeFromSceneGroup(n), !0;
        
        let viewport = this.mapLayer.viewport
        
        
        var i = new THREE.Vector3(-.5 * this.mapSizeM,0,0);
        i.applyMatrix4(this.objectGroup.matrixWorld),
        i.project(viewport.camera);
        var o = new THREE.Vector3(.5 * this.mapSizeM,0,0);
        o.applyMatrix4(this.objectGroup.matrixWorld),
        o.project(viewport.camera);
        var a = viewport.resolution.x 
          , s = viewport.resolution.y 
        if (a <= 0 || s <= 0 || isNaN(i.x) || isNaN(o.x))  return !1;
        i.sub(o),
        i.x *= a / 2,
        i.y *= s / 2;
        
        
         
        let scale  
        if(this.name == 'map'){ 
            //add 高纬度的因倾斜而造成tile较小，所以放大些，否则会造成显示的tile过多而卡
            let lonlat = viewer.transform.lonlatToLocal.inverse(viewport.camera.position.clone()) 
            let cos = Math.cos(THREE.Math.degToRad(lonlat.y)); //越小就在纬度上越高，tile表现越小
            //为什么lonlat.y会超出90？
            /* if(lonlat.y>90){
                console.log('lonlat.y>90',lonlat.y)
            }  */
            
            cos = THREE.Math.clamp(cos, 0,1)
            let lonShift =  Math.abs(viewer.mapViewer.camera.position.x / this.mapSizeM * 16  )  //越大就在经度离中心越远，tile表现越大  。  
            lonShift = THREE.Math.clamp(lonShift, 0, Math.PI)
            lonShift = (1 - Math.sin( 1/2 * lonShift +  Math.PI/2 )) * Math.PI // 0-Math.PI   sin增速向上
            
            scale = 0.5 * cos * (1+lonShift)  +  0.5 * Math.pow(cos, lonShift)   
        }else{
            scale = 1
        }
        
        var c = this.tileSizePx / i.length() / scale      //多除以一个scale缩放因子,scale越大level越小
          , level = Math.ceil(-Math.log(c) / Math.log(2) - this.bias);
         
        level = Math.max(level, 0) 
        level = Math.min(level, void 0 === this.maxDepth ? 1 / 0 : this.maxDepth)  
        
        
        this.zoomLevel = level//add
        
        
        /* if(isNaN(this.zoomLevel )){ 
            console.log(level, cos , scale , lonlat )
        } */
        
        if(!unavailable){
            this.addToSceneGroup(n) 
            return this.baseTile.update(this, e, level, this.mapSizeM, 0, 0, "")
        }
    }
     
     
     
     
    isTileVisible(e, n, i){ 
        if (n > HALF_WORLD_SIZE) return !0; 
        var r = .5 * n;
         
        //简单版：
        this.transformMapToLocal.forward(e) //e转化为local
        this.isTileVisibleBox.makeEmpty() 
        this.isTileVisibleVec.set(e.x - r, e.y - r, e.z).applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)
        this.isTileVisibleVec.set(e.x - r, e.y + r, e.z).applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)
        this.isTileVisibleVec.set(e.x + r, e.y - r, e.z).applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)
        this.isTileVisibleVec.set(e.x + r, e.y + r, e.z).applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec) 
          
      
        
        //仿造createMesh写的准确版，但会因为大的tile非矩形，而视口是矩形，若视口刚好在tile的曲线边缘外却识别为可见，就会创建冗余tile。 但上面那个简单版在zoomlevel低的时候地球边缘容易有识别不到的tile，造成黑色三角形。
        //容易出现奇怪的mesh
         /* this.isTileVisibleBox.makeEmpty()
        this.isTileVisibleVec.set(e.x - r, e.y - r, e.z) 
        this.transformMapToLocal.forward(this.isTileVisibleVec)
        this.isTileVisibleVec.applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)
        
        this.isTileVisibleVec.set(e.x - r, e.y + r, e.z) 
        this.transformMapToLocal.forward(this.isTileVisibleVec)
        this.isTileVisibleVec.applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)
        
        this.isTileVisibleVec.set(e.x + r, e.y - r, e.z) 
        this.transformMapToLocal.forward(this.isTileVisibleVec)
        this.isTileVisibleVec.applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)
        
        this.isTileVisibleVec.set(e.x + r, e.y + r, e.z) 
        this.transformMapToLocal.forward(this.isTileVisibleVec)
        this.isTileVisibleVec.applyMatrix4(this.objectGroup.matrixWorld)
        this.isTileVisibleBox.expandByPoint(this.isTileVisibleVec)  */
            
       
        return i.intersectsBox(this.isTileVisibleBox)  
         
        
        
         
        
        
    }
     
    addToSceneGroup(t){
        this.objectGroupAdded || (t.add(this.objectGroup),
        this.objectGroupAdded = !0)
    }
     
    removeFromSceneGroup(t){
        this.baseTile.remove(),
        this.objectGroupAdded && (t.remove(this.objectGroup),
        this.objectGroupAdded = !1)
    }
    
    
}





 
const loadDone = (tile, success)=>{
    tile.map.mapLayer.loadingInProgress--
    tile.map.loadingInProgress--
    //console.log('loaddone', tile.name, 'loadingInProgress',tile.map.mapLayer.loadingInProgress, Date.now())
    tile.loading = false
     
    let next = tile.map.mapLayer.waitQueue[0]
    if(next){
        addLoadTile(next)
    }else{
        if(tile.map.mapLayer.loadingInProgress == 0){//注意这时候不一定就加载完了，300ms后可能还会有新的tile加载
            //console.log('loadDone All ?', Date.now())
            tile.map.mapLayer.dispatchEvent('loadDone') 
        }
    }
    tile.mesh && (tile.mesh.material.needsUpdate = true)
    
}
 
function addLoadTile(tile){
    /* if(tile.texURL && tile.texURL.includes('testdata') ){ 
        console.error('addLoadTile',   tile.texURL.split('map_tiles/')[1] )
    } */
     
    if(tile.map.loadingInProgress < tile.map.maxLoading){
        if(!tile.mesh)return;  //有时候会遇到这种情况， 为什么没有被cancelLoad呢？

        tile.map.mapLayer.loadingInProgress++ 
        tile.map.loadingInProgress ++ 
        tile.map.mapLayer.dispatchEvent('startLoad') 
        //console.log('addLoad', 'loadingInProgress',tile.map.mapLayer.loadingInProgress, Date.now())
        //tile.texURL && tile.texURL.includes('testdata') && console.log('startloadTile ',   tile.texURL.split('map_tiles/')[1] )
         
        tile.loading = true
        let index = tile.map.mapLayer.waitQueue.indexOf(tile);
        index > -1 && tile.map.mapLayer.waitQueue.splice(index,1)
        
        
        let tex = tile.mesh.material.map = texLoader.load(tile.texURL, (tex)=>{      //如果一直加载不了会影响其他的加载，如google地图没有vpn会使全景图一直加载不了
            if(tile.mesh){//如果还要显示的话
                tile.textureLoaded = true
                tile.mesh.material.opacity = 1  
                tile.map.mapLayer.viewer.mapChanged = true
                tile.map.mapLayer.needUpdate = true //表示还要继续update(以removeChildren)
                
                if(tile.map instanceof TiledMapOpenStreetMap){
                    tile.map.maxLoading = browser.isMobile() ? 5 : 10; 
                } 
            }else{
                //tile.texURL && tile.texURL.includes('testdata') && console.log('loadDone and dispose',   tile.texURL.split('map_tiles/')[1] )
                tex.dispose()   
            } 
            loadDone(tile, true)
        } , void 0, (()=>{//error
            tile.textureLoaded = !0
            if(tile.mesh){ 
                tile.mesh.material.dispose() 
                tile.mesh.material = errorMaterial 
                tile.map.mapLayer.viewer.mapChanged = true 
            } 
            loadDone(tile, false)
            tile.map.loadFailCount ++ ;
            
            if(tile.map instanceof TiledMapOpenStreetMap && Potree.settings.mapCompany == 'google' && tile.map.loadFailCount > 3){//极有可能没有vpn为了防止影响到其他资源加载，减少加载的个数
                tile.map.maxLoading = 2;
            }
            
        }))  
        tex.anisotropy = 0 
        tex.generateMipmaps = !1 
        tex.minFilter = THREE.LinearFilter 
        tex.magFilter = THREE.LinearFilter 
          
    }else{
        tile.map.mapLayer.waitQueue.includes(tile) || tile.map.mapLayer.waitQueue.push(tile) 
    }
    
}
function cancelLoad(tile,log){//如果等待加载，但还没开始加载，取消加载 
    if(!tile.loading){ 
        let index = tile.map.mapLayer.waitQueue.indexOf(tile);
        index > -1 && tile.map.mapLayer.waitQueue.splice(index,1)   
        //index > -1 && tile.texURL && tile.texURL.includes('testdata') && console.log('cancelLoad',   tile.texURL.split('map_tiles/')[1]/* ,  (log && waitQueue.indexOf(tile)>-1) ? log:'' ,  tile.loading */ )
  
    } 
}


export class MapTile{
    constructor(map,  e, n, parent, name){
        this.map = map;
        this.name = name; 
        this.parent = parent;
        this.objectGroup = e,
        this.tileColor = n,
        this.meshAdded = !1,
        this.textureLoaded = !1,
        this.children = []
        this.id = getSid();
    }
    update(e, n, i, r, o, a, s){
        return !!this.doesNotContainTilesToBeDisplayed(e) || (0 === i ? this.updateTile(e, r, o, a) : this.updateSubTiles(e, n, i, r, o, a, s))
    }
    
    doesNotContainTilesToBeDisplayed(t){
        return t.tilePresenceMap && t.tilePresenceMap.empty
    }
    
    updateTile(t, e, n, i){ //真正显示mesh的是这一层，最高level  
            
        //if(this.map.name.includes('floorplan'))console.log('updateTile',this.name)
    
    
        if(!this.mesh){
            this.createTileObject(t, e, n, i)
        }
        if(!this.meshAdded){
            this.objectGroup.add(this.mesh) 
            this.meshAdded = !0
        }
        if(this.textureLoaded){//贴图加载完就不需要子集了
            this.removeChildren() 
        }else{
            this.cancelChildren() //add 停止加载子集
        }
         
        return this.textureLoaded
    }
    
    updateSubTiles(entity, n, level, o, a, s, c){
        //if(entity.name.includes('floorplan'))console.log('updateSubTiles',this.name) //名字越长代表level越高
        
        
        for (var childrenLoaded = !0, u = [-.25 * o, .25 * o, -.25 * o, .25 * o], d = [.25 * o, .25 * o, -.25 * o, -.25 * o], p = 0; p < 4; ++p){
            var h = c + p.toString(10);
            //一级(512)：0 1 2 3分别为左上、右上、左下、右下。二级(1024)就是把一级的每一块分裂，如00 01 02 03分别是0的左上、右上、左下、右下……
             
            if (!entity.tilePresenceMap || entity.tilePresenceMap[h]){
                //去掉判断，直接显示
                var f = a + u[p]
                  , m = s + d[p];
                tempVector.set(f, m, 0);
                this.map.computeCount ++
                //console.log(this.map.computeCount, this.name, 'level:',level)
                
                if (entity.isTileVisible(tempVector, .5 * o, n)){ 
                    this.children[p] || (this.children[p] = new MapTile(this.map, this.objectGroup,this.tileColor, this, this.name+p ))
                    //childrenLoaded = childrenLoaded && this.children[p].update(entity, n, level - 1, .5 * o, f, m, h)   //这句会使若有一个tile还在加载，就阻断了。原版是这么写的。但是为了加快加载速度，改成下面两行。感觉直接全部updateTile也没太卡，不知道很大的场景会不会卡，单帧updateTile次数超过100次的话（应该不会吧，地图大小会限制住个数） -- 2023.12
                    let childLoaded = this.children[p].update(entity, n, level - 1, .5 * o, f, m, h)  
                    childrenLoaded = childrenLoaded && childLoaded
                } else {
                    if (this.children[p]){
                        this.children[p].remove()
                        delete this.children[p]
                    }

                }
                
            }
        }
        return childrenLoaded && this.removeObject3D(), childrenLoaded //子项加载完，母项mesh可以去除。（最后母项的母项以及前面的都会被删除，只留最后的叶子结点）

    }
    /* 
    
        一层层往后加载。加入第一次加载到第4层（因为level精细度是第4层），给第4层可见tile加上mesh。
        然后下一次加载到第5层，那么第4层的mesh就要被清空（当它所属的第5层子集都加载完后）
    
    
    
     */
    
    createTileObject(t, e, n, a){
        var s = this;
        this.mesh = this.createMesh(t.transformMapToLocal, e, n, a),
        this.textureLoaded = !1;
        var c = t.mapSizeM / e
          , l = Math.log(c) / Math.log(2)
          , u = n / e + .5 * (c - 1)
          , d = -a / e + .5 * (c - 1)
          , p = t.getTileUrl(Math.round(l), Math.round(u), Math.round(d));
        Potree.Utils.setObjectLayers(this.mesh, 'map' )
        this.mesh.renderOrder = -(1e6 - l - 100 * (t.zIndex || 0));
        this.mesh.name = this.name //add
        this.texURL = p
        
        /* let area = math.getArea(this.mesh.geometry.vertices.slice(0,3));
        if(area >0){
            this.mesh.visible = false
            console.log('area>0',this.mesh.name)
        } */
        addLoadTile(this)
        
    }
    
    createMesh(t, e, n, o){
        var a = new THREE.Geometry;
        return tempVector.set(n - e / 2, o - e / 2, 0),
        a.vertices.push(new THREE.Vector3().copy(t.forward(tempVector))),
        tempVector.set(n + e / 2, o - e / 2, 0),
        a.vertices.push(new THREE.Vector3().copy(t.forward(tempVector))),
        tempVector.set(n + e / 2, o + e / 2, 0),
        a.vertices.push(new THREE.Vector3().copy(t.forward(tempVector))),
        tempVector.set(n - e / 2, o + e / 2, 0),
        a.vertices.push(new THREE.Vector3().copy(t.forward(tempVector))),
        a.faces.push(face1),
        a.faces.push(face2),
        a.faceVertexUvs[0].push(face1UV),
        a.faceVertexUvs[0].push(face2UV),
        new THREE.Mesh(a,this.createMaterial())
    }
    
    createMaterial(){
        var t = new THREE.MeshBasicMaterial({
            transparent: !0,
            depthWrite: !1,
            depthTest: !0,
            opacity: 0,
            side: THREE.DoubleSide,
           
        });
        if(Potree.settings.isTest) {
            var colorHue = Math.random()
            t.color = new THREE.Color().setHSL(colorHue, 0.6, 0.92) 
        }else{
            t.color = this.tileColor ? this.tileColor : new THREE.Color(16777215) 
        }
        
        return t
    }
    
    traverse(f){//add
        return THREE.Mesh.prototype.traverse.call(this,f)
    }
    
    remove(){
        this.removeObject3D(),
        this.removeChildren()
    }
    
    removeObject3D(){
        let hasMesh = !!this.mesh
        if (this.mesh){
            this.objectGroup.remove(this.mesh)
            if (this.textureLoaded){
                var t = this.mesh.material.map;
                t && t.dispose() 
            }else{
                cancelLoad(this)
            } 
            
            this.mesh.material.dispose() //o.disposeMeshMaterial(this.mesh),
            this.mesh.geometry.dispose() 
            this.mesh = void 0
        }
        this.meshAdded = !1,
        this.textureLoaded = !1
        //this.texURL && this.texURL.includes('testdata') && console.log('removeObject3D', this.id, 'hasMesh',hasMesh, this.texURL.split('map_tiles/')[1] )
    }
    
    removeChildren(){
        for (var t = 0, e = this.children; t < e.length; t++){
            var n = e[t];
            n && (n.removeObject3D(),
            n.removeChildren())
        }
        this.children.length = 0
    }
    
    cancelChildren(){//子集全部停止加载
        for (var t = 0, e = this.children; t < e.length; t++){
            var n = e[t];
            n && (cancelLoad(n, '提前'), n.cancelChildren())   
        }
        
    }
}



proj4.defs("EPSG:3857", "+title=WGS 84 / Pseudo-Mercator +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs")
//这里地图世界的中心是不是lon:0,lat:0     

export class TiledMapOpenStreetMap extends TiledMapBase{
    constructor(mapLayer, tileColor){
         
        //Potree.settings.mapCompany = 'google' 
        
        super('map', mapLayer, tileColor/* ,  projection */ ) //EPSG projection
        //this.baseUrl = "https://wprd03.is.autonavi.com/appmaptile?style=7&x=${x}&y=${y}&z=${z}",
        //this.baseUrl = "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}" //最高只到18 level
        this.switchStyle()
        this.tileSizePx = 256
        this.mapSizeM = 40075017   //总占据多少米（地球赤道周长）    和三维空间的不一样 - -， 空间上的是直径，地图上的是半个圆周
        this.bias = 0.5 
         
        if(Potree.settings.mapCompany == 'google'){
            this.attribution = "© PopSmart,  © 谷歌地图"
            this.projection = "EPSG:900913"      //"EPSG:4326"//4550
        }else{
            this.attribution = "© PopSmart,  © 高德地图"
            this.projection = "EPSG:3857"
        }
            
    }
    
    getTileUrl(t, e, n){ 
        return this.baseUrl.replace(/\${z}/, t.toString(10)).replace(/\${x}/, e.toString(10)).replace(/\${y}/, n.toString(10))
    } 


    switchStyle(style = 'standard'){
        //if(Potree.settings.mapCompany == 'google')return 
        if(style == this.style)return
        
        
        
        
        if(Potree.settings.mapCompany == 'google'){
            if(style == 'satellite'){//卫星
                this.baseUrl = "https://mt2.google.com/vt/lyrs=y@159000000&hl=zh-CN&gl=cn&x=${x}&y=${y}&z=${z}&s=mt1"  /* "http://mt2.google.cn/vt/lyrs=m@177000000&hl=zh-CN&gl=cn&src=app&x=${x}&y=${y}&z=${z}"  */   //最高只到19
                this.maxDepth = 22     
            }else{
                this.baseUrl = "https://mt2.google.com/vt/lyrs=m@159000000&hl=zh-CN&gl=cn&x=${x}&y=${y}&z=${z}&s=mt1"  /* "http://mt2.google.cn/vt/lyrs=m@177000000&hl=zh-CN&gl=cn&src=app&x=${x}&y=${y}&z=${z}"  */   //最高只到19
                this.maxDepth = 22     
            }     
            /* 1）lyrs= 表示的是图层类型，即瓦片类型，具体含义如下： 
            m：路线图 
            t：地形图 
            p：带标签的地形图 
            s：卫星图 
            y：带标签的卫星图 
            h：标签层（路名、地名等）
            2）& gl=CN 
            谷歌地图针对中国有两套坐标，一套做了偏移，一套没有。经测试在url加入gl=cn地图会有偏移。 
            Tips：如果谷歌地图和RTK测量的WGS84坐标有偏差，可以尝试在url里去掉& gl=cn。
            5）&hl= 
            设置地图注记文字语言类型，缺省默认为中文。 
            hl=nl 中英双语 
            hl=zh-CN 中文
            */
            
        }else{
            //baseUrl = "https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&style=6&yrs=m&x=${x}&y=${y}&z=${z}"    //卫星 maxDepth = 18   
            //搜索高德地图瓦片url 
            if(Potree.settings.isJiangMen){
                if(style == 'satellite'){//卫星
                    this.maxDepth = 18
                    this.baseUrl = "http://a.map.jms.gd/tile/weixing/${z}/${x}/${y}.png"
                }else{
                    this.maxDepth = 19
                    this.baseUrl = "http://a.map.jms.gd/tile/gd_xiangtu/${z}/${x}/${y}.png"     
                }
            }else{
                if(style == 'satellite'){//卫星
                    this.maxDepth = 18
                    this.baseUrl = "https://webst01.is.autonavi.com/appmaptile?lang=zh_cn&style=6&yrs=m&x=${x}&y=${y}&z=${z}"
                }else{
                    this.maxDepth = 19
                    this.baseUrl = "https://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&style=7&yrs=m&x=${x}&y=${y}&z=${z}"    // 
                }
            }
        }
        
        this.style = style
        this.setEnable(false)
        this.setEnable(true)
        viewer.dispatchEvent('content_changed')
    }
    
}




export class TiledMapFromEntity extends TiledMapBase{
    constructor(mapLayer, tileColor, data){ 
        super('floorplan', mapLayer, tileColor,  "LOCAL"   /* "EPSG:3857"  *//* "WGS84" */)  //直接就是本地坐标，没有projec 
        
         
        let entity = this.tiledMapEntity = this.fillFromData(data)  
        let time = entity.updateTime || entity.createTime  
          
        this.tileSizePx = entity.tileSizePx,
        this.mapSizeM = entity.mapSizeM,
        this.maxDepth = entity.maxDepth;
        this.postStamp = time ? time.replace(/[^0-9]/ig,'') : (new Date).getTime()   
        //this.projection = n.crsLocal,
        this.zIndex = 0, 
        this.tilePresenceMap = this.decodeBitStream(this.tiledMapEntity.quadtree) //包含tile分裂信息，如果写错了会造成tile显示不全
        this.maxLoading = 5
        this.bias = 0.5   //越大加载层级越低，越模糊 
        
        if(window.devicePixelRatio>=2 && window.innerHeight * window.innerWidth < 768*1024){ //手机还是加载高清点（反正也不需要截图等待），但平板太大了，要铺满屏幕可能慢，所以稍微模糊点？（反正可以继续放大去看）
            this.bias = 0 //level更高些
        }
    }
  
    fillFromData(e){ 
        let data = {}
        
        data.id = e.id
        data.globalLocation = Potree.Utils.VectorFactory.fromArray3(e.location)  
        data.orientation = Potree.Utils.QuaternionFactory.fromArray(e.orientation) 
         
         
        let pointcloud = viewer.scene.pointclouds.find(p=>p.dataset_id == e.datasetId) 
        if(pointcloud.datasetData.mapping){
            data.filePath = `${Potree.settings.urls.prefix1}/${pointcloud.datasetData.mapping}${e.file_path}` 
        }else{
            data.filePath = `${Potree.settings.urls.prefix1}${e.file_path}`
        }
        
        
          
        data.fileName = '$DEPTH/$X/$Y.png'  
        data.type = e.type,
        data.mapSizeM = e.map_size_m,
        data.tileSizePx = e.tile_size_px,
        data.maxDepth = e.max_depth,
        data.quadtree = e.quadtree,
        data.floorId = e.floor_id,
        data.bundleId = e.bundle_id  
        //this.computeLocalCoordinates()
        return data
        
    }
    
    
    
    computeLocalCoordinates(){
        if(proj4.defs("LOCAL_MAP")){
            
            let lonlat = this.tiledMapEntity.globalLocation
            /* if(window.AMapWith84){//需要转换
                lonlat = AMapWith84.wgs84ToAMap(lonlat) 
            } */
            lonlat = viewer.transform.lonlatToLocal.forward(lonlat)
             
            this.tiledMapEntity.location = new THREE.Vector3().copy(lonlat)
        } 
    }
     
    updateProjection() {
        super.updateProjection()
        if(!this.position){
            this.computeLocalCoordinates()
        } 
        /* this.projection = this.TransformService.crsLocal,
        t.prototype.updateProjection.call(this) */
    } 
    
    
    get position(){
        return this.tiledMapEntity.location
       /* enumerable: !0,
       configurable: !0 */
    }
    get quaternion(){
        return this.tiledMapEntity.orientation
        /* enumerable: !0,
        configurable: !0 */
    }
   
    getTileUrl(t, e, n) {
        var i = (this.tiledMapEntity.filePath + "/" + this.tiledMapEntity.fileName).replace(/\$DEPTH/g, t.toString(10)).replace(/\$X/g, e.toString(10)).replace(/\$Y/g, n.toString(10));
        return i += "?t=" + this.postStamp  
        //this.RestService.addAuthorizationQueryParameter(i) //????
    }
  
    
    
    
    decodeBitStream(t) {
        if (!t)
            return {
                empty: !0
            };
        for (var e = {}, n = [e], i = 0; i < t.length; i++) {
            var r = n.shift()
              , o = parseInt(t.substr(i, 1), 16);
            if (1 & o) {
                var a = {};
                r[0] = a,
                n.push(a)
            }
            2 & o && (a = {},
            r[1] = a,
            n.push(a)),
            4 & o && (a = {},
            r[2] = a,
            n.push(a)),
            8 & o && (a = {},
            r[3] = a,
            n.push(a))
        }
        var s = {
            empty: !0
        };
        return this.computeHashes(s, e, ""),
        s
    }
   
    computeHashes(t, e, n) {
        for (var i = 0; i < 4; i++)
            e[i] && (t[n + i.toString(10)] = !0,
            t.empty = !1,
            this.computeHashes(t, e[i], n + i.toString(10)))
    }
    
 

}

 /* 
 note:
 
 
 
 目前缩小了能看出形态是一个地球。相机在高空朝下观测，地球平放着。
 所以越靠近赤道和地球朝上的那面所在的中央经度（也就是local 0,0,0所对应的初始经度），tile越接近正方形。
 
 所以在两极地区要怎么显示？
 注册地理坐标时需要滚动地球吗？（修改初始经度、重定义NAVVIS:TMERC， 就需要更新所有三维世界中的物体位置）
 
 
 切换中心点：
    var locationLonLat = viewer.transform.lonlatToLocal.inverse(viewer.mapViewer.camera.position.clone())
    proj4.defs("LOCAL_MAP", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat.x.toPrecision(15) + " +lat_0=" + locationLonLat.y.toPrecision(15));  
    viewer.mapViewer.mapLayer.maps[0].transformMapToLocal = null
 

 
 地理注册部分地图上的1和2标记有两层意思。当地图全屏展示时，标记的是当前右侧经纬度的位置；当地图为小窗时，标记的是对应场景里三维位置。（所以感觉最好换一个ui？）且在2023.2.1之前才改好，之前都是后者。
 
 
 
 为什么边缘总是有奇怪的mesh，是因为有顶点到背面了吗
 
 
 
 https://lbs.amap.com/tools/picker  高德坐标拾取器(手机登录），但和这里展示的不一样, 要用AMapWith84.aMapToWgs84({x: ,y: })转成84。  （qq or 手机登录）  所以potree本地和有AMapWith84函数的laser地图展现不一样
 https://www.google.com/maps/@77.7730021,-34.4952712,4z     google取点
 
 
 
 
 打印所有mapTile的名字，字符串最长的代表有显示的mesh。  
 viewer.mapViewer.mapLayer.maps[0].baseTile.traverse(function(e){console.log(e.name)})
 
 
 能查看有几个显示的mesh
 viewer.mapViewer.mapLayer.maps[0].objectGroup.children
 
 
 图片地址中 tiles/4/3/9.png 第一个数字越高代表level越高，放得越大 . （tile.name.length也能反映出
 viewer.mapViewer.mapLayer.maps[1].objectGroup.children.map(e=>e.name.length-1)
 
 
 目前看的几个场景floorplan原图是1米=33.03个像素  图宽度= 512*2^(max_depth-1) ,   map_size_m 代表整个地图是多少米
 

 经纬度精度小数点后5位为米级别，6位为分米，7位是厘米
 */