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)
    }

效果展示

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Cesium绘制轨迹线,并在鼠标悬停时显示经纬度信息的示例代码: ```html <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from 'cesium/Cesium'; export default { name: 'CesiumTrajectory', data() { return { viewer: null, positions: [ { lng: 117.04, lat: 39.09, alt: 0 }, { lng: 117.05, lat: 39.1, alt: 1000 }, { lng: 117.06, lat: 39.11, alt: 2000 }, { lng: 117.07, lat: 39.12, alt: 3000 }, { lng: 117.08, lat: 39.13, alt: 4000 } ], lineEntity: null, labelEntity: null, mouseHandler: null }; }, mounted() { this.initialize(); }, methods: { initialize() { const viewer = new Cesium.Viewer('cesiumContainer'); this.viewer = viewer; // 添加轨迹线 const positions = this.positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lng, pos.lat, pos.alt)); this.lineEntity = viewer.entities.add({ polyline: { positions: positions, width: 5, material: Cesium.Color.RED } }); // 添加鼠标事件处理器 this.mouseHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); this.mouseHandler.setInputAction(this.showPositionLabel, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 添加标签 this.labelEntity = viewer.entities.add({ label: { show: false, font: '14px monospace', horizontalOrigin: Cesium.HorizontalOrigin.LEFT, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(10, -10), eyeOffset: new Cesium.Cartesian3(0, 0, -100), fillColor: Cesium.Color.YELLOW, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, disableDepthTestDistance: Number.POSITIVE_INFINITY } }); }, showPositionLabel(movement) { const pickedObject = this.viewer.scene.pick(movement.endPosition); if (Cesium.defined(pickedObject) && pickedObject.id === this.lineEntity) { const position = this.viewer.scene.pickPosition(movement.endPosition); if (Cesium.defined(position)) { const cartographic = Cesium.Cartographic.fromCartesian(position); const lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6); const alt = cartographic.height.toFixed(2); this.labelEntity.position = position; this.labelEntity.label.text = `经度: ${lng}\n纬度: ${lat}\n高度: ${alt}米`; this.labelEntity.label.show = true; } } else { this.labelEntity.label.show = false; } } } }; </script> <style> #cesiumContainer { height: 600px; width: 100%; } </style> ``` 在这个示例中,我们首先使用`Cesium.Cartesian3.fromDegrees`将经纬度转换为Cesium的笛卡尔坐标系。然后使用`viewer.entities.add`添加一条红色的轨迹线,并将其存储在`lineEntity`中。我们还添加了一个`labelEntity`实体,用于在鼠标悬停时显示经纬度信息。 在`initialize`方法中,我们初始化了Cesium Viewer,并添加了轨迹线和标签。然后,我们添加了一个鼠标事件处理器,当鼠标移动时调用`showPositionLabel`方法。 `showPositionLabel`方法首先检查鼠标是否在轨迹线上,并从场景中获取位置。如果位置已定义,则将其转换为`Cartographic`坐标,并将其格式化为经度、纬度和高度。最后,我们将这些信息显示在标签中。 注意,我们使用了`disableDepthTestDistance`来禁用深度测试,以便标签始终显示在轨迹线上方。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值