potree-sdk/src/custom/objects/tool/Measure.js

import * as THREE from "../../../../libs/three.js/build/three.module.js";
import {TextSprite} from "../TextSprite.js"; 
import {Utils} from "../../../utils.js";
import  Label  from "../Label.js";
import {LineDraw} from "../../utils/DrawUtil.js";
import math from "../../utils/math.js"; 
import DepthBasicMaterial from "../../materials/DepthBasicMaterial.js";
import Sprite from '../Sprite.js'
import {config} from '../../settings.js'

import {ctrlPolygon} from './ctrlPolygon.js'

 
let texLoader = new THREE.TextureLoader()  
let defaultColor = new THREE.Color(config.measure.default.color);
let highlightColor = new THREE.Color(config.measure.highlight.color);

let color = new THREE.Color(config.measure.color)
let textColor = new THREE.Color(config.measure.textColor) 
var markerMats;  
var lineMats;  
var planeMats 
 
const lineDepthInfo = {
    clipDistance : 4,//消失距离
    occlusionDistance: 1,//变为backColor距离 
}
const LabelDepthInfo = {
    clipDistance : 6,//消失距离
    occlusionDistance: 2,//变为backColor距离 
}  
/* const LabelDepthInfo = {
    clipDistance : 0.1,//消失距离
    occlusionDistance: 0.1,//变为backColor距离 
} */

const markerSizeInfo = {
    minSize : 25 ,  maxSize : 65,   nearBound : 0.2, farBound : 4,
}
const labelSizeInfo = {width2d:200}
const mainLabelProp = { 
    backgroundColor: {r: defaultColor.r*255, g: defaultColor.g*255, b: defaultColor.b*255, a:config.measure.default.opacity},
    textColor: {r: textColor.r*255, g: textColor.g*255, b: textColor.b*255, a: 1.0},
    fontsize:16, 
    useDepth : true ,
    renderOrder : 5, pickOrder:5, 
}
const subLabelProp = { 
    backgroundColor: {r: 255, g: 255, b: 255, a:1},
    textColor: {r: 0, g: 0, b:0, a: 1.0},
    fontsize:14, 
    renderOrder : 4, pickOrder:4,
}


const angle = THREE.Math.degToRad(5);//显示水平垂直辅助线的最小角度
const guideShowMinAngle = {min: angle, max: Math.PI/2 - angle}

   

    
 

export class Measure extends ctrlPolygon{
	constructor (prop) {
        prop.dimension = '2d'
        
		super('measure',prop);
		this.constructor.counter = (this.constructor.counter === undefined) ? 0 : this.constructor.counter + 1;
        
        
        this.name = this.measureType + this.constructor.counter  //'Measure_' + this.constructor.counter;
           
	 
		
		this.markerLabels = [];
		this.edgeLabels = [];
		this.angleLabels = [];
		this.coordinateLabels = [];
        this.area = {value:0,string:''}
         
        
        if( this.showArea  ){
            this.areaLabel = this.createAreaLabel(); 
            this.add(this.areaLabel) 
        }
        
		 
        //add:
        if(this.atPlane || this.faceDirection){ //是一个平面上的话
            this.createGuideLine(); 
        }
        if(this.measureType == 'Distance' /* || this.measureType.includes('MulDistance') */){
            this.createHorVerGuideLine()
        }
        
        
        this.selectStates = {}
        
        this.setUnitSystem(prop.unit || viewer.unitConvert.UnitService.defaultSystem)
        Potree.Utils.setObjectLayers(this, 'measure' )
        
        //addMarkers:
       
        this.initData(prop)
        
         
        this.points_datasets || (this.points_datasets = []) //存每个点是哪个数据集


        
        
        this.addEventListener('marker_dropped',(e)=>{ 
            this.updateDatasetBelong(e.index)
        }) 

  
        this.addEventListener('isVisible', ()=>{
            viewer.mapViewer && viewer.mapViewer.dispatchEvent({type:'content_changed'})
        })
         
	}
 
 
 
    initData(prop){
        let makeIt = super.initData(prop)
        if(makeIt){
            this.edges.forEach(edge=>{edge.dispatchEvent('addHoverEvent') })
        }else{
            this.failBuilded = true
        }
    }
 
     
    updateDatasetBelong(changeIndex){//更新所属数据集
     
        if(Potree.settings.editType == "merge"){//无地图
            /* this.dataset_points = this.points.map((e,i)=>{ 
                return Potree.Utils.datasetPosTransform({toDataset:true, datasetId:this.points_datasets[i], position:e.clone()})
            }) */
            this.dataset_points[changeIndex] = Potree.Utils.datasetPosTransform({toDataset:true, datasetId:this.points_datasets[changeIndex], position:this.points[changeIndex].clone()})
            
            
            return
        }
    
    
    
    
        let old = this.datasetId
        
        let maxCount = {id:null,count:0}
        let datasets = {}
        
        this.points_datasets.forEach(e=>{
            if(e == void 0)return
            if(datasets[e]){
                datasets[e] ++ 
            }else{
                datasets[e] = 1
            } 
        })
        for(let i in datasets) {
            if(datasets[i]>maxCount.count){
                maxCount = {id:i, count:datasets[i]}
            }
        }
        this.datasetId = maxCount.count > 0 ?  maxCount.id : null
         
        //if(this.datasetId != old){
            //this.dispatchEvent({type:'changeDatasetId'})
            if(this.datasetId == void 0){
                this.dataset_points = null //可能为空或[null,null...]
            }else{
                 
                this.dataset_points = this.points.map(e=>{ 
                    return Potree.Utils.datasetPosTransform({toDataset:true,datasetId:this.datasetId, position:e.clone()})
                }) 
            }  
        //}
    }
    
    
     

    
    transformByPointcloud(){//每次移动点云 or 加载测量线时要获取一下当前position  //有地图时
        if(this.datasetId == void 0)return 
        this.points = this.dataset_points.map(e=>{   
            return Potree.Utils.datasetPosTransform({fromDataset:true, datasetId:this.datasetId, position:e.clone()})
        })
         
        this.getPoint2dInfo(this.points)
        this.update({ifUpdateMarkers:true})
        this.setSelected(false)//隐藏edgelabel
         
    }
 
	update(options={}) { 
        super.update(options)
      
        if(this.showCoordinates && this.points.length>0){
            let position = this.points[0];
       
            this.markers[0].position.copy(position);

            { // coordinate labels
                let coordinateLabel = this.coordinateLabels[0];
                
                let lonlat = viewer.transform.lonlatToLocal.inverse(position.toArray())
                let EPSG4550 = viewer.transform.lonlatTo4550.forward(lonlat)
                let pos = [
                    position.toArray(),
                    lonlat,
                    EPSG4550
                ] 
                //let msg = position.toArray().map(p => Utils.addCommas(p.toFixed(2))).join(" / ");
                let msg = pos.map(a=> 
                     a.map(p => Utils.addCommas(p.toFixed(10))).join(", ") 
                ).join("<br>") 
                coordinateLabel.setText(msg);
                coordinateLabel.setPos(position)
                coordinateLabel.setVisible(true)//this.showCoordinates;
            }
            return 
        }
         
         
         
        let setEdgeLabel = (label,p1,p2,distance)=>{//设置label位置和字
            let center = new THREE.Vector3().addVectors(p1,p2).multiplyScalar(0.5);  
            label.setPos(center) 
            distance = distance == void 0 ? p1.distanceTo(p2) : distance; 
            var text = viewer.unitConvert.convert(distance, 'distance', Potree.settings.precision, this.unitSystem, 0.1 , true)//distance要传0.1 这个factor
            label.setText(text)
            return distance
        }
         
         
        let lastIndex = this.points.length - 1; 
        for (let index = 0; index <= lastIndex; index++) {
            
            let nextIndex = (index + 1 > lastIndex) ? 0 : index + 1;
            let previousIndex = (index === 0) ? lastIndex : index - 1;
            //if(!this.closed && nextIndex == 0  )break; //add
            
            let point = this.points[index];
            let nextPoint = this.points[nextIndex];
            let previousPoint = this.points[previousIndex];

          
            if(this.showDistances){ // edge labels
                let edgeLabel = this.edgeLabels[index];
                let distance = point.distanceTo(nextPoint)
                edgeLabel.shouldVisi = (index < lastIndex || this.isRect || this.closed && !this.isNew ) && distance>0 
                /* this.closed || */edgeLabel.setVisible(edgeLabel.shouldVisi)  
                if(edgeLabel.visible){
                    setEdgeLabel(edgeLabel,point,nextPoint,distance)
                }  
                edgeLabel.sprite.lineDir = new THREE.Vector3().subVectors(point,nextPoint).normalize() //[point,nextPoint]
            }
        } 

        if(this.measureType == 'Distance' && this.points.length>1){//设置水平垂直辅助线
            var pTop, pBtm
            if(this.points[0].z > this.points[1].z ){
                pTop = this.points[0];
                pBtm = this.points[1];
            }else{
                pTop = this.points[1];
                pBtm = this.points[0];
            }
            let projectPos = new THREE.Vector3(pTop.x, pTop.y, pBtm.z);//两条guideline的交点
            
            {//倾斜角度太小的时候不显示
                let tan = pTop.distanceTo(projectPos) / pBtm.distanceTo(projectPos)
                let angle = Math.atan(tan);
           
                this.shouldShowHorVerGuide = angle > guideShowMinAngle.min && angle < guideShowMinAngle.max    
            }
            
            
            LineDraw.updateLine(this.verGuideEdge, [pTop, projectPos]) 
            LineDraw.updateLine(this.horGuideEdge, [pBtm, projectPos]) 
            setEdgeLabel(this.verEdgeLabel,pTop,projectPos) 
            setEdgeLabel(this.horEdgeLabel,pBtm,projectPos)  
            
            this.verGuideEdge.visible = this.horGuideEdge.visible = this.shouldShowHorVerGuide
            this.verEdgeLabel.visible = this.horEdgeLabel.visible = this.shouldShowHorVerGuide
        }
         
        
        if(this.showArea && this.point2dInfo){ // update area 
           /*  if(this.points.length>2){
                this.area = {value:0};
                this.areaLabel.setVisible(false)
            }else{ */
                let area = Math.abs(math.getArea(this.point2dInfo.points2d))//this.getArea();
                let msg = viewer.unitConvert.convert(area, 'area', Potree.settings.precision, this.unitSystem/* , 0.1 */ )
                this.area = {value:area, string:msg}
                
                this.areaLabel.setPos(this.center);
                this.areaLabel.setText(msg);
                this.areaLabel.setVisible(true)
            //}  
        } 
             
         
		
	};

  
      
	addMarker (o={}) {
         
        let marker = new Sprite({mat:this.getMarkerMaterial('default'), sizeInfo: markerSizeInfo, name:"measure_point"} )
        Potree.Utils.setObjectLayers(marker, 'measure' )
        marker.pickOrder = marker.renderOrder = 3 
        marker.markerSelectStates = {} 
        marker.addEventListener('startDragging',(e)=>{
            if(e.drag.dragViewport.name == 'MainView')viewer.inputHandler.dispatchEvent( {type: 'isMeasuring',v:true, cause:'startDragging'})
        })
        marker.addEventListener('drop',(e)=>{
            viewer.inputHandler.dispatchEvent({type: 'isMeasuring',  v:false, cause:'stopDragging'}  )
        })
         
        let edge
		{ // edges 
            edge = LineDraw.createFatLine( [ ],{material:this.getLineMat('edgeDefault')} ) 
            edge.pickOrder = 0
            Potree.Utils.setObjectLayers(edge, 'measure' ) 


                        
            let addHoverEvent = ()=>{ //当非isNew时才添加事件 
            
                let mouseover = (e) => {this.setSelected(true, 'edge')};
                let mouseleave = (e) => {this.setSelected(false, 'edge')};
 
                edge.addEventListener('mouseover', mouseover);
                edge.addEventListener('mouseleave', mouseleave); 
                edge.removeEventListener('addHoverEvent', addHoverEvent);
            }
            edge.addEventListener('addHoverEvent', addHoverEvent);
		}
        
        super.addMarker({point:o.point, marker:marker,  edge})
        
        
		if(this.showEdges){ // edge labels  
            const edgeLabel = this.createEdgeLabel('edgeLabel', !this.closed) 
			this.edgeLabels.push(edgeLabel); 
			 
		}

		

		if(this.showCoordinates){ // coordinate labels 
            let coordinateLabel = new Label({
                className:'measure_pointPos', 
                camera: viewer.scene.getActiveCamera() 
            })
            coordinateLabel.setVisible(false)
            this.coordinateLabels.push(coordinateLabel);
            
		}
        
        
        
        
		

		let event = {
			type: 'marker_added',
			measurement: this,
			marker: marker
		};
		this.dispatchEvent(event);

		//this.setMarker(this.points.length - 1, point);
        this.update()//更新一下倒数第二条线   
        return marker;//add
	};



       

     




    editStateChange(state){ //主要针对edgeLabels显示切换，编辑时显示
        super.editStateChange(state)
        if(!state){
            this.editStateTimer = setTimeout(()=>{
                if(!this.isEditing){
                    this.dispatchEvent({type:'editStateChange',state:false})   
                    this.setEdgesDisplay(false)
                    this.areaPlane && Potree.Utils.updateVisible(this.areaPlane, 'intersectLastLine',  true)
                    this.areaLabel && Potree.Utils.updateVisible(this.areaLabel, 'intersectLastLine',  true) 
                }
            },100)
        }else{
            if(!this.isEditing){
                this.dispatchEvent({type:'editStateChange',state:true})   
                this.setEdgesDisplay(true)
                clearTimeout(this.editStateTimer)
            } 
        }
        this.isEditing = state  
    }
    





    
    setMarkerSelected(marker, state, hoverObject){
        
        //console.warn(marker.id , state, hoverObject)
         
        marker.markerSelectStates[hoverObject] = state
        let absoluteState = false
        for(var i in marker.markerSelectStates){
            if(marker.markerSelectStates[i] == 'hover'){
                absoluteState = true; break;
            }
        }
        if(absoluteState){
            marker.material = this.getMarkerMaterial('select')
        }else{
            marker.material = this.getMarkerMaterial('default')
        }
        
        marker.selected = absoluteState
        
        viewer.mapViewer && viewer.mapViewer.dispatchEvent('content_changed') 
        viewer.dispatchEvent('content_changed')
    }
    
    
    
    setEdgesDisplay(state, ignoreGuideLine){
        this.closed && this.edgeLabels.forEach(e=>e.setVisible(!!(state && e.shouldVisi))  )
         
        if(!ignoreGuideLine && this.measureType == 'Distance'){
            this.horEdgeLabel.visible = this.verEdgeLabel.visible = this.horGuideEdge.visible = this.verGuideEdge.visible = !!(state && this.shouldShowHorVerGuide)
        }
    }
    
    
    setSelected(state, hoverObject){//add
        //console.log('setSelected', state, hoverObject)
        hoverObject && (this.selectStates[hoverObject] = state)
        let absoluteState = false
        for(var i in this.selectStates){
            if(this.selectStates[i]){
                absoluteState = true; break;
            }
        }
        
        
        if(absoluteState){
            this.markers.forEach(e=>this.setMarkerSelected(e, 'hover', 'selectAll' ) )
            
            this.edges.forEach(e=>e.material = this.getLineMat('edgeSelect')   )
			 
			this.areaPlane && (this.areaPlane.material = planeMats.selected)
             
            
            //this.areaLabel && this.areaLabel.elem.addClass('highLight')
            //this.closed || this.edgeLabels.forEach(e=>e.elem.addClass('highLight')  )
            this.setEdgesDisplay(true, hoverObject=="screenshot")
            
            this.areaLabel && setLabelHightState(this.areaLabel, true) 
            this.closed || this.edgeLabels.forEach(e=>setLabelHightState(e, true)  )
              
        }else{
            this.markers.forEach(e=>this.setMarkerSelected(e, 'unhover', 'selectAll' ))
            this.edges.forEach(e=>e.material = this.getLineMat('edgeDefault')  )
            this.areaPlane && (this.areaPlane.material = planeMats.default)
            this.setEdgesDisplay(false, hoverObject=="screenshot")
            //this.areaLabel && this.areaLabel.elem.removeClass('highLight')
            //this.closed || this.edgeLabels.forEach(e=>e.elem.removeClass('highLight')  )
            this.areaLabel && setLabelHightState(this.areaLabel, false) 
            this.closed || this.edgeLabels.forEach(e=>setLabelHightState(e, false)  )
            
        }
           
        this.selected = absoluteState
        
        if(hoverObject != 'byList'){
            //this.bus && this.bus.emit('highlight', this.selected)
            this.dispatchEvent({type:'highlight',state:this.selected})//列表高亮
        }
        
        viewer.dispatchEvent('content_changed')
        viewer.mapViewer && viewer.mapViewer.dispatchEvent('content_changed')
    }
    
	removeMarker(index ){  
        super.removeMarker(index)
        
        this.points_datasets.splice(index, 1);
        this.dataset_points && this.dataset_points.splice(index, 1)
        this.coordinateLabels.splice(index, 1);
         
        let edgeIndex = index//(index === 0) ? 0 : (index - 1);
        if(this.edgeLabels[edgeIndex]){ 
            this.edgeLabels[edgeIndex].dispose() 
            this.edgeLabels.splice(edgeIndex, 1);
        }
         
        this.update(); 
        this.dispatchEvent({type: 'marker_removed', measurement: this});
    }
    
    setPosition(index, position) {
        super.setPosition(index, position)
        let event = {
			type: 'marker_moved',
			measure:	this,
			index:	index,
			position: position.clone()
		};
		this.dispatchEvent(event); 
    }
    
    dispose(){//add
        var labels = this.edgeLabels.concat(this.coordinateLabels)
        this.areaLabel && labels.push(this.areaLabel)
        labels.forEach(e=>e.dispatchEvent({type:'dispose'}))
        super.dispose()
    }
    
     
	getTotalDistance () {
		if (this.points.length === 0) {
			return 0;
		}

		let distance = 0;

		for (let i = 1; i < this.points.length; i++) {
			let prev = this.points[i - 1];
			let curr = this.points[i];
			let d = prev.distanceTo(curr);

			distance += d;
		}

		if (this.closed && this.points.length > 1) {
			let first = this.points[0];
			let last = this.points[this.points.length - 1];
			let d = last.distanceTo(first);

			distance += d;
		}

		return distance;
	}

	getAngleBetweenLines (cornerPoint, point1, point2) {
		let v1 = new THREE.Vector3().subVectors(point1, cornerPoint);
		let v2 = new THREE.Vector3().subVectors(point2, cornerPoint);

		// avoid the error printed by threejs if denominator is 0
		const denominator = Math.sqrt( v1.lengthSq() * v2.lengthSq() );
		if(denominator === 0){
			return 0;
		}else{
			return v1.angleTo(v2);
		}
	};

	getAngle (index) {
		if (this.points.length < 3 || index >= this.points.length) {
			return 0;
		}

		let previous = (index === 0) ? this.points[this.points.length - 1] : this.points[index - 1];
		let point = this.points[index];
		let next = this.points[(index + 1) % (this.points.length)];

		return this.getAngleBetweenLines(point, previous, next);
	}
    
    getCenter(/* update */){ 
        if(this.closed){
            return this.center.clone()
        }else{  
            let center = this.points.reduce(function(total, currentValue ){
                return total.add(currentValue)
            }, new THREE.Vector3 ) 
            
            center.multiplyScalar(1/this.points.length)
            return center //求不出重心呜呜
        } 
        
    }
    
	// updateAzimuth(){
	// 	// if(this.points.length !== 2){
	// 	// 	return;
	// 	// }

	// 	// const azimuth = this.azimuth;

	// 	// const [p0, p1] = this.points;

	// 	// const r = p0.distanceTo(p1);
		
	// }
    
 
     
    
    createGuideLine(){//add 辅助线 
        var guideLine = LineDraw.createFatLine([ ],{material:this.getLineMat('guide')} )
        guideLine.visible = false 
        this.guideLine = guideLine
        this.add(guideLine);
    }
    createHorVerGuideLine(){//创建水平与垂直辅助线，仅距离测量有。
        var verGuideEdge = LineDraw.createFatLine([ ],{material:this.getLineMat('guide')} )
        verGuideEdge.visible = false 
        this.verGuideEdge = verGuideEdge
        verGuideEdge.name = 'verGuideEdge'
        
        var horGuideEdge = LineDraw.createFatLine([ ],{material:this.getLineMat('guide')} )
        horGuideEdge.visible = false 
        horGuideEdge.name = 'horGuideEdge'
        this.horGuideEdge = horGuideEdge
        
        this.add(this.verGuideEdge);
        this.add(this.horGuideEdge);
        
        
        //label:
        this.verEdgeLabel = this.createEdgeLabel('verGuideEdge')  
        this.horEdgeLabel = this.createEdgeLabel('horGuideEdge') 

        
    }
    
    focus(){  
        viewer.focusOnObject(this, 'measure')
        
        if(this.clickSelected)return
        this.setSelected(true, 'focus')
        this.dispatchEvent({type:'selected', state:true})
        this.clickSelected = true
        //viewer.dispatchEvent({type:'selectMeasure', measure:this})
        let cancelSelect = ()=>{
            this.clickSelected = false
            this.removeEventListener('cancelSelect', cancelSelect)
            viewer.removeEventListener('global_click', cancelSelect) 
            this.setSelected(false, 'focus') 
            this.dispatchEvent({type:'selected', state:false})
        }
        setTimeout(()=>{
            this.addEventListener('cancelSelect', cancelSelect)
            viewer.addEventListener('global_click', cancelSelect) 
        },10)
    }
     
    
    
    createEdgeLabel(name, hasHoverEvent){
        const edgeLabel = new TextSprite(
            $.extend(hasHoverEvent ? mainLabelProp : subLabelProp,{sizeInfo: labelSizeInfo,  name:name||'edgeLabel'})
        )
        if(hasHoverEvent){
            edgeLabel.addEventListener('mouseover',()=>{
                this.setSelected(true, 'edgeLabel')
            }) 
            edgeLabel.addEventListener('mouseleave',()=>{
                this.setSelected(false, 'edgeLabel')
            })  
            edgeLabel.addEventListener('click',()=>{
                if(!this.isNew) this.focus()
            })
        }
        edgeLabel.visible = false
        edgeLabel.sprite.material.depthTestWhenPick = true
        Potree.Utils.setObjectLayers(edgeLabel, 'measure' )
        this.add(edgeLabel)
        return edgeLabel
    }
    
    createAreaLabel(){ 
        /* const areaLabel = new Label({
            className:'measure_area', 
            
        })
        areaLabel.elem.on('mouseover',()=>{
            this.setSelected(true, 'areaLabel')
        })
        areaLabel.elem.on('mouseout',()=>{
            this.setSelected(false, 'areaLabel')
        }) */
        
        
        const areaLabel = new TextSprite(
            $.extend(mainLabelProp,{sizeInfo: labelSizeInfo, name:'areaLabel_'} )
        )
        
        areaLabel.addEventListener('mouseover',()=>{
            this.setSelected(true, 'areaLabel')
        })
        areaLabel.addEventListener('mouseleave',()=>{
            this.setSelected(false, 'areaLabel')
        }) 
        areaLabel.addEventListener('click',()=>{
            if(!this.isNew) this.focus()
        })
        Potree.Utils.setObjectLayers(areaLabel, 'measure' )
        areaLabel.setVisible(false) 
        
        return areaLabel;
        
        
    }

    
    getMarkerMaterial(type) { 
        if(!markerMats){
            markerMats = {  
                default:    new DepthBasicMaterial($.extend({},lineDepthInfo,{ 
                    transparent: !0,
                    opacity: 1,
                    map: texLoader.load(Potree.resourcePath+'/textures/pic_point_s32.png' ), 
                    useDepth:true 
                })),
                select:    new THREE.MeshBasicMaterial({  
                    transparent: !0,
                    opacity: 1,
                    depthTest:false,
                    map: texLoader.load(Potree.resourcePath+'/textures/pic_point32.png'/* , null, null, { antialias: false } */), 
                     
                }),   
            }
            Measure.markerMats = markerMats
        }
        return markerMats[type]
        
    }
    
    
    
    
    getLineMat(type) { 
        if(!Measure.lineMats){
            Measure.lineMats = { 
                edgeDefault:  LineDraw.createFatLineMat({
                    color: config.measure.default.color, 
                    lineWidth: config.measure.lineWidth,
                    useDepth :true,
                    dashWithDepth :true,  // 只在被遮住的部分显示虚线，因为实线容易挡住label 
                    dashed :true,   
                    dashSize : 0.04,
                    gapSize: 0.04,    
                    transparent: true,
                    opacity: config.measure.default.opacity,
                    depthTestWhenPick:true,
                }),
                edgeSelect:  LineDraw.createFatLineMat({
                    color: config.measure.highlight.color,//'#f0ff00',
                    dashSize: 0.5, 
                    gapSize: 0.2, 
                    lineWidth: config.measure.lineWidth  ,
                    transparent: true,
                    opacity: config.measure.highlight.opacity
                }),
                guide:   LineDraw.createFatLineMat({
                    color:config.measure.guide.color, 
                    dashSize: 0.1, 
                    gapSize: 0.02,
                    dashed: true,
                    lineWidth: config.measure.lineWidth  
                }) 
                    
            }
        }
        return Measure.lineMats[type]
        
    }
    
    
    createAreaPlane(){
        planeMats || (planeMats = { 
            default: new DepthBasicMaterial( $.extend({},LabelDepthInfo,{
                color:color,
                side:THREE.DoubleSide,
                opacity:0.2,
                transparent:true,
                useDepth:true 
            })), 
            selected: new THREE.MeshBasicMaterial({
                color:  color ,
                side:THREE.DoubleSide,
                opacity:0.3,
                transparent:true, 
            })
        },Measure.planeMats = planeMats)
        return super.createAreaPlane(planeMats.default)
    }
    
     
	raycast (raycaster, intersects) {
		for (let i = 0; i < this.points.length; i++) {
			let marker = this.markers[i];

			marker.raycast(raycaster, intersects);
		}

		// recalculate distances because they are not necessarely correct
		// for scaled objects.
		// see https://github.com/mrdoob/three.js/issues/5827
		// TODO: remove this once the bug has been fixed
		for (let i = 0; i < intersects.length; i++) {
			let I = intersects[i];
			I.distance = raycaster.ray.origin.distanceTo(I.point);
		}
		intersects.sort(function (a, b) { return a.distance - b.distance; });
	};

    
    
    
    transformData(prop){
        if(prop.measureType == 'Point'){ 
            prop.showCoordinates = true, 
            prop.closed = true, 
            prop.maxMarkers = 1,
            prop.minMarkers = 1 
        }else if(prop.measureType == 'Distance'){
            prop.showDistances = true,   
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2 
        }else if(prop.measureType == 'MulDistance'){//new 
            prop.showDistances = true,  
            prop.showEdges = true, 
            prop.minMarkers = 2 
        }else if(prop.measureType == 'Ver MulDistance'){ 
            prop.showDistances = true,
            prop.atPlane = true,                
            prop.showEdges = true, 
            prop.minMarkers = 2 
            prop.faceDirection = "vertical" 
            prop.unableDragAtMap = true
        }else if(prop.measureType == 'Hor MulDistance'){
            prop.showDistances = true,
            prop.atPlane = true,
            prop.showEdges = true, 
            prop.minMarkers = 2 
            prop.faceDirection = "horizontal"  
        }else if(prop.measureType == 'Ver Distance'){
            prop.showDistances = true,  
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2,
            prop.faceDirection = "vertical" 
            prop.unableDragAtMap = true
        }else if(prop.measureType == 'Hor Distance'){
            prop.showDistances = true, 
            prop.showEdges = true,
            prop.maxMarkers = 2,
            prop.minMarkers = 2,
            prop.faceDirection = "horizontal"  
                   
        }else if(prop.measureType == 'Area'){
            prop.showDistances = true,  
            prop.atPlane = true,                
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 3  
        }else if(prop.measureType == 'Hor Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 3  
            prop.faceDirection = "horizontal"
             
        }else if(prop.measureType == 'Ver Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 3 
            prop.faceDirection = "vertical"   
            prop.unableDragAtMap = true            
        }else if(prop.measureType == 'Rect Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 4 
            prop.maxMarkers = 4            
        }else if(prop.measureType == 'Hor Rect Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 4 
            prop.maxMarkers = 4 
            prop.isRect = true 
            prop.faceDirection = "horizontal" 
        }else if(prop.measureType == 'Ver Rect Area'){
            prop.showDistances = true,  
            prop.atPlane = true,  
            prop.showEdges = true,
            prop.closed = true, 
            prop.minMarkers = 4 
            prop.maxMarkers = 4 
            prop.isRect = true 
            prop.faceDirection = "vertical"  
            prop.unableDragAtMap = true
        } 
        if(prop.atPlane && prop.closed){ //atPlane在同一平面上
            prop.showArea = true
        }
        
        
        super.transformData(prop)
        
        
        
    }



    setUnitSystem(unitSystem){
        //console.log(this.name +':' +this.unitSystem)
        if(unitSystem != this.unitSystem){
            if(unitSystem == "metric"){
                
            }else if(unitSystem == 'imperial'){
                
            }
            this.unitSystem = unitSystem
            this.update()
        }
    }


    reDraw(restMarkerCount=0){//重新开始画 
        super.reDraw(restMarkerCount)
        if(this.measureType == 'Distance'){
            this.shouldShowHorVerGuide = false
            this.setEdgesDisplay(false)
        }
        if(this.showArea){ 
            this.area = {value:0};
            this.areaLabel && this.areaLabel.setVisible(false)
        }
        viewer.inputHandler.dispatchEvent( {type:'isMeasuring', v:true, cause:'reDraw'}  )
	            
    }
    


	/* get showCoordinates () {
		return this._showCoordinates;
	}

	set showCoordinates (value) {
		this._showCoordinates = value;
		this.update();
	}

	get showAngles () {
		return this._showAngles;
	}

	set showAngles (value) {
		this._showAngles = value;
		this.update();
	}

	get showCircle () {
		return this._showCircle;
	}

	set showCircle (value) {
		this._showCircle = value;
		this.update();
	}

	get showAzimuth(){
		return this._showAzimuth;
	}

	set showAzimuth(value){
		this._showAzimuth = value;
		this.update();
	}

	get showEdges () {
		return this._showEdges;
	}

	set showEdges (value) {
		this._showEdges = value;
		this.update();
	}

	get showHeight () {
		return this._showHeight;
	}

	set showHeight (value) {
		this._showHeight = value;
		this.update();
	}

	get showArea () {
		return this._showArea;
	}

	set showArea (value) {
		this._showArea = value;
		this.update();
	}

	get closed () {
		return this._closed;
	}

	set closed (value) {
		this._closed = value;
		this.update();
	}

	get showDistances () {
		return this._showDistances;
	}

	set showDistances (value) {
		this._showDistances = value;
		this.update();
	} */

}









function setLabelHightState(label, state){
    if(state){ 
        label.backgroundColor =  {r: highlightColor.r*255, g: highlightColor.g*255, b: highlightColor.b*255, a:config.measure.highlight.opacity},
        label.backgroundColor.a = config.measure.highlight.opacity
        label.sprite.material.useDepth = false;
        
    }else{
        label.backgroundColor = mainLabelProp.backgroundColor
        label.backgroundColor.a = config.measure.default.opacity
        label.sprite.material.useDepth = true
        
    } 
    label.updateTexture() 
    //label.sprite.material.needsUpdate = true 
}



function createCircleRadiusLabel(){
	const circleRadiusLabel = new TextSprite("");

	circleRadiusLabel.setTextColor({r: 140, g: 250, b: 140, a: 1.0});
	circleRadiusLabel.setBorderColor({r: 0, g: 0, b: 0, a: 1.0});
	circleRadiusLabel.setBackgroundColor({r: 0, g: 0, b: 0, a: 1.0});
	circleRadiusLabel.fontsize = 16;
	circleRadiusLabel.material.depthTest = false;
	circleRadiusLabel.material.opacity = 1;
	circleRadiusLabel.visible = false;
	
	return circleRadiusLabel;
}

function createCircleRadiusLine(){
	/* const lineGeometry = new LineGeometry();

	lineGeometry.setPositions([
		0, 0, 0,
		0, 0, 0,
	]);

	const lineMaterial = new LineMaterial({ 
		color: 0xff0000, 
		lineWidth: 2, 
		resolution:  new THREE.Vector2(1000, 1000),
		gapSize: 1,
		dashed: true,
	});

	lineMaterial.depthTest = false;

	const circleRadiusLine = new Line2(lineGeometry, lineMaterial);*/
	
    var circleRadiusLine = LineDraw.createFatLine([ ],{
        color:0xff0000,   
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })
    circleRadiusLine.visible = false; 
	return circleRadiusLine;
}

function createCircleLine(){
	const coordinates = [];

	let n = 128;
	for(let i = 0; i <= n; i++){
		let u0 = 2 * Math.PI * (i / n);
		let u1 = 2 * Math.PI * (i + 1) / n;

		let p0 = new THREE.Vector3(
			Math.cos(u0), 
			Math.sin(u0), 
			0
		);

		let p1 = new THREE.Vector3(
			Math.cos(u1), 
			Math.sin(u1), 
			0
		);

		coordinates.push(
			 p0, 
			 p1 
		);
	}

	/* const geometry = new LineGeometry();
	geometry.setPositions(coordinates);

	const material = new LineMaterial({ 
		color: 0xff0000, 
		dashSize: 5, 
		gapSize: 2,
		lineWidth: 2, 
		resolution:  new THREE.Vector2(1000, 1000),
	}); 

	material.depthTest = false;

	const circleLine = new Line2(geometry, material);
	circleLine.visible = false;
	circleLine.computeLineDistances();*/

    var circleLine = LineDraw.createFatLine(coordinates,{
        color: 0xff0000,
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })


	return circleLine;
}

/* function createCircleCenter(){
	const sg = new THREE.markerGeometry(1, 32, 32);
	const sm = new THREE.MeshNormalMaterial();
	
	const circleCenter = new THREE.Mesh(sg, sm);
	circleCenter.visible = false;

	return circleCenter;
} */

function createLine(){
	 
    const line = LineDraw.createFatLine([ ],{
        color: 0xff0000,
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })
    
    
    
	return line;
}

function createCircle(){

	const coordinates = [];

	let n = 128;
	for(let i = 0; i <= n; i++){
		let u0 = 2 * Math.PI * (i / n);
		let u1 = 2 * Math.PI * (i + 1) / n;

		let p0 = new THREE.Vector3(
			Math.cos(u0), 
			Math.sin(u0), 
			0
		);

		let p1 = new THREE.Vector3(
			Math.cos(u1), 
			Math.sin(u1), 
			0
		);

		coordinates.push(
			 p0, 
			 p1 
		);
	}

 
    var line = LineDraw.createFatLine(coordinates,{
        color: 0xff0000,
        dashSize: 0.5, 
		gapSize: 0.2, 
		lineWidth: config.measure.lineWidth  
    })
	return line;

}

/* function createAzimuth(){

	const azimuth = {
		label: null,
		center: null,
		target: null,
		north: null,
		centerToNorth: null,
		centerToTarget: null,
		centerToTargetground: null,
		targetgroundToTarget: null,
		circle: null,

		node: null,
	};

	const sg = new THREE.markerGeometry(1, 32, 32);
	const sm = new THREE.MeshNormalMaterial();

	{
		const label = new TextSprite("");

		label.setTextColor({r: 140, g: 250, b: 140, a: 1.0});
		label.setBorderColor({r: 0, g: 0, b: 0, a: 1.0});
		label.setBackgroundColor({r: 0, g: 0, b: 0, a: 1.0});
		label.fontsize = 16;
		label.material.depthTest = false;
		label.material.opacity = 1;

		azimuth.label = label;
	}

	azimuth.center = new THREE.Mesh(sg, sm);
	azimuth.target = new THREE.Mesh(sg, sm);
	azimuth.north = new THREE.Mesh(sg, sm);
	azimuth.centerToNorth = createLine();
	azimuth.centerToTarget = createLine();
	azimuth.centerToTargetground = createLine();
	azimuth.targetgroundToTarget = createLine();
	azimuth.circle = createCircle();

	azimuth.node = new THREE.Object3D();
	azimuth.node.add(
		azimuth.centerToNorth,
		azimuth.centerToTarget,
		azimuth.centerToTargetground,
		azimuth.targetgroundToTarget,
		azimuth.circle,
		azimuth.label,
		azimuth.center,
		azimuth.target,
		azimuth.north,
	);

	return azimuth;
} */









/* 
     

 */