cesium-加载地形图

最新推荐文章于 2024-07-25 15:21:31 发布

醉书生ꦿ℘゜এ

最新推荐文章于 2024-07-25 15:21:31 发布

阅读量563

点赞数 1

分类专栏： cesium vue js 文章标签： vue.js 前端 javascript cesium

本文链接：https://blog.csdn.net/zslsh44/article/details/135955592

版权

cesium 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中集成Cesium库，展示了一个地形示例，使用了ArcGIS的TiledElevationTerrainProvider从URL加载世界地形数据，并展示了如何初始化CesiumViewer并禁用infoBox。

摘要由CSDN通过智能技术生成

废话不多说

直接代码

<template>
	<div id="cesiumContainer" style="height: 100vh;"></div>
	<div id="toolbar" style="position: fixed;top:20px;left:220px;">
		<el-breadcrumb>
			<el-breadcrumb-item>地形示例</el-breadcrumb-item>
			<el-breadcrumb-item>arcgis地形</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesium.js";

onMounted(async () => {
	let initCesium = new InitCesium('cesiumContainer')
	let viewer = initCesium.initViewer({
		infoBox: false
	});

	viewer.scene.terrainProvider = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl('https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer')
})
</script>
<style scoped>
#cesiumContainer {
	overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner {
	color: #ffffff !important;
}
</style>

InitCesium.js

import * as Cesium from "cesium";

class InitCesium {

    constructor(cesiumContainer, options) {
        this.cesiumContainer = cesiumContainer;
    }

    initViewer(options) {
        Cesium.Ion.defaultAccessToken = 'token';
        return new Cesium.Viewer(this.cesiumContainer, options);
    }
}

export default InitCesium