Bootstrap

cesium显示鼠标经纬度

cesium显示鼠标经纬度

showLonLats(){
        let lonLatDiv = document.createElement('div');

        lonLatDiv.id = 'lonLatDiv'
        lonLatDiv.style.display = 'block';
        lonLatDiv.style.right = '20px'
        lonLatDiv.style.paddingRight = '20px'
        lonLatDiv.style.marginTop= '-50px'
        lonLatDiv.style.zIndex = 999
        lonLatDiv.style.position = 'absolute';

        let mapDiv = document.getElementById(this.MapDivId)
        mapDiv.appendChild(lonLatDiv)

        this.handler.setInputAction((e)=>{
            var ray = this.viewer.camera.getPickRay(e.endPosition);
            if(ray){
                var earthPosition = this.viewer.scene.globe.pick(ray, this.viewer.scene);
                if(earthPosition){
                    let ellipsoid = this.viewer.scene.globe.ellipsoid;
                    let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
                    let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
                    let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
                    lonLatDiv.innerHTML = lon.toString() +','+ lat.toString()
                }
            }

        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    }

效果展示

在这里插入图片描述

;