在前端开发中,使用地图和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对象来进行相关操作。文章来源:https://www.toymoban.com/news/detail-524371.html
<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模型应用开发中提供了更多的可能性。希望这篇文章对您有所帮助,欢迎您的使用和探索!文章来源地址https://www.toymoban.com/news/detail-524371.html
到了这里,关于通过mars3d1.8+cesium1.6根据坐标获取对应坐标在3dtiles模型上的高度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!