通过mars3d1.8+cesium1.6根据坐标获取对应坐标在3dtiles模型上的高度

在前端开发中,使用地图和3D模型的需求越来越常见。然而,对于一些开发者来说,如何在3D模型上获取对应坐标的高度可能是一个挑战。在本文中,我们将介绍如何使用mars3d1.8和cesium1.6这两个强大的前端库来实现这一功能。
mars3d是一个基于Cesium的地图开发引擎,可以帮助您快速构建各种地图应用。而cesium则是一个强大的开源3D地理信息系统(GIS)库,为开发者提供了丰富的功能和工具。要在3D模型上获取坐标的高度,我们需要首先将模型加载到地图中。使用mars3d,您可以轻松加载3D模型,并使用cesium强大的功能进行操作和分析。
首先,我们需要引入mars3d和cesium的库文件。您可以通过以下方式将它们添加到您的项目中:

<script src="path/to/mars3d.min.js"></script>
<script src="path/to/cesium.min.js"></script>

接下来,我们需要创建一个地图容器,并初始化mars3d地图引擎:

<div id="mapContainer"></div>
<script> 
	 // 初始化mars3d地图引擎  
 </script>

现在,我们可以加载我们的3D模型并将其添加到地图中:

<script> 
 // 创建3D模型图层  
 // 将3D模型添加到地图  
</script>

一旦我们的3D模型加载完成,我们就可以使用cesium的功能来获取对应坐标在模型上的高度了。在cesium中,我们可以使用Scene对象来进行相关操作。

<script> 
//获取模型或者地形高度
	        function getHeightByType(cartesians, type) {
            if (type === 'model') {
                return new Promise(async resolve => {
                    try {
                        let promise = viewer.scene.clampToHeightMostDetailed(cartesians)
                        promise.then(updatedCartesians => {
                            console.log(updatedCartesians)
                            var cartographic = Cesium.Cartographic.fromCartesian(updatedCartesians[0]);
                            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                            console.log(longitude)
                            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                            console.log(latitude)
                            var height = cartographic.height;
                            console.log(height)
                            resolve(height)
                        })
                    } catch (e) {
                        resolve(false)
                    }
                })
            } else if (type = 'terrain') {
                // 首先将cartesians转为positions
                let positions = []
                cartesians.forEach(cartesian => {
                    positions.push(this.cartesianToCartographic(cartesian))
                })
                let terrain = viewer.terrainProvider
                return new Promise(async resolve => {
                    try {
                        // 当前场景中没有使用地形
                        if (!terrain) resolve(false)
                        const promise = Cesium.sampleTerrainMostDetailed(terrain, positions);
                        promise.then(updatedPositions => {
                            let resultCartesians = []
                            updatedPositions.forEach(position => {
                                if (position) {
                                    // 采集成功,转为笛卡尔坐标
                                    resultCartesians.push(this.cartographicToCartesian(position))
                                } else {
                                    // postion为undefined时,说明该位置采集失败
                                    // resultCartesians.push(position)
                                }
                            })
                            resolve(resultCartesians)
                        })
                    } catch (e) {
                        resolve(false)
                    }
                })
            }
        }

        // 定义获取高度的函数
        function getHeightFromLongitudeAndLatitude(longitude, latitude) {

            const cartesian1 = new Cesium.Cartesian3.fromDegrees(longitude, latitude)
            this.getHeightByType([cartesian1], 'model').then(results => {
                console.log('demo: 拾取结果:', results)
            })
        }

        // 获取经纬度点的地形高度
        function getHeight(lon, lat) {
            var cartographic = Cesium.Cartographic.fromDegrees(lon, lat);
            console.log(cartographic);
            var promise = Cesium.sampleTerrain(viewer.terrainProvider, 9, [cartographic]);
            console.log(promise);
            Cesium.when(promise, function(updatedPositions) {
                var height = updatedPositions[0].height;
                console.log("Height (in meters): " + height);
            });
        }
</script>

现在,我们已经成功地获取到了对应坐标在3D模型上的高度。您可以根据需要在这个基础上进行进一步的处理和分析。总结起来,通过结合mars3d和cesium这两个强大的前端库,我们可以轻松获取对应坐标在3D模型上的高度。这为开发者们在地图和3D模型应用开发中提供了更多的可能性。希望这篇文章对您有所帮助,欢迎您的使用和探索!

在使用mars3d库加载线段并在点击事件中获取线段两个端点的坐标时,通常需要结合mars3d提供的API以及JavaScript编程来实现。以下是一个简单的介绍和示例代码: 首先,你需要在mars3d地图上添加线段图层。这通常通过实例化一个线段的实体,并使用`addOverlay`方法将其添加到地图上。在创建线段实体时,你需要指定线段的起点和终点坐标。 接着,你可以为这个线段添加点击事件监听器。当线段被点击时,可以通过事件对象获取到点击的详细信息,并进一步解析出线段的两个端点坐标。 下面是一个简单的示例代码: ```javascript // 假设已经有了mars3d地图实例map var map = new mars3d.Map("cesiumContainer"); // 创建Cesium地图容器 // 创建线段实体,需要指定起点和终点坐标 var lineEntity = new mars3d.graphic.Line({ positions: [[lon1, lat1], [lon2, lat2]], // 线段的起点和终点坐标 style: { color: "#ff0000", width: 3 }, attr: { remark: "线段" } }); map.addOverlay(lineEntity); // 将线段添加到地图上 // 为线段添加点击事件监听器 lineEntity.bindPopup(function (event) { var popupContent = "点击到线段"; var position = event.graphic.getPosition(); // 点击到的线段的位置 if (position) { popupContent += "<br>坐标:" + mars3d.Const.LonLatStr(position); } return popupContent; }); // 点击事件 lineEntity.on('click', function (event) { console.log("线段被点击了"); console.log("点击到的线段的坐标:", event.positions); }); ``` 在上述代码中,`positions`是一个数组,包含了线段的起点和终点坐标。`lineEntity.bindPopup`方法用于当线段被点击时显示弹出窗口,显示点击到的线段坐标等信息。`lineEntity.on('click', function(event) {...})`用于绑定点击事件的回调函数,当线段被点击时,可以在回调函数中处理相关逻辑,比如获取线段两个端点的坐标
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值