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
相关推荐
slim~11 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼15 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
小浣熊喜欢揍臭臭25 分钟前
react+umi项目如何添加electron的功能
javascript·electron·react
惜.己27 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
乖女子@@@41 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响1 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
weixin_584121431 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js