vue cesium 快速开发

最新推荐文章于 2024-07-06 16:47:02 发布

潇、然

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量459

点赞数 6

分类专栏： vue JavaScript 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43512977/article/details/136718665

版权

vue 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中引入Cesium.js库，并在Vue应用中使用它创建一个3D地图视图。内容包括设置Cesium默认accesstoken，使用Vue组件和vite插件进行配置，以及在`.vue`文件中展示和初始化CesiumViewer。

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

效果图

在这里插入图片描述

获取 token

html 使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script src="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Cesium.js"></script>
		<link href="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Widgets/widgets.css"
			rel="stylesheet">
	</head>
	<body>
		<div id="cesiumContainer"></div>
		<script type="module">
			Cesium.Ion.defaultAccessToken =
				'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWYzNzgwZi1lY2YwLTRhMjEtOTllZS03NGIyN2I1ODBiZjUiLCJpZCI6MjAyNDgwLCJpYXQiOjE3MTA2ODgyODZ9.3iGh58C4jmK6fXdt4PX6UkxVYp8l9qLbllYsttuOYrU'
			const viewer = new Cesium.Viewer('cesiumContainer', {});
		</script>
		</div>
	</body>
</html>

在 `Vue` 中使用

下载 cesium

pnpm add cesium

下载 vite 插件

pnpm add vite-plugin-cesium -D

vite.config.ts 配置

import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [
    vue(),
    cesium()
  ]
})

xxx.vue

<script lang="ts" setup>
import { Ion, Viewer } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

defineOptions({ name: 'CesiumView' })

Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWYzNzgwZi1lY2YwLTRhMjEtOTllZS03NGIyN2I1ODBiZjUiLCJpZCI6MjAyNDgwLCJpYXQiOjE3MTA2ODgyODZ9.3iGh58C4jmK6fXdt4PX6UkxVYp8l9qLbllYsttuOYrU'

onMounted(() => {
  new Viewer('cesiumContainer', {})
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style lang="scss" scoped></style>