cesium-加载地形图

废话不多说

直接代码

<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
相关推荐
cs_dn_Jie5 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic39 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据2 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel