vue3 Cesium 离线地图

kang5789

已于 2024-11-04 14:37:00 修改

阅读量1.2k

点赞数 5

CC 4.0 BY-SA版权

文章标签： cesium vue3

于 2024-06-26 11:09:03 首次发布

本文链接：https://blog.csdn.net/kang5789/article/details/139982415

源码：cesium-demo: Cesium示例工程，基于vue3

1、vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件，用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程。

npm i cesium vite-plugin-cesium vite -D

2、配置vite.config.js

import cesium from 'vite-plugin-cesium'

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

3、页面

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

<script setup>
import * as Cesium from 'cesium';
import {onMounted, ref} from 'vue';

const viewer = ref();

onMounted(() => {
  //初始化地球
  initCesium()
})

//初始化地球
const initCesium = () => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZmJjODE1Yy1kMjU4LTQyZTgtODAyZC1mNzE2MDNhMmQ3YzUiLCJpZCI6MTk5NzQwLCJpYXQiOjE3MDk2Mjg5Mjh9.GuRbyEbm8FknaFOM34kGm9wCbf2XVjp873h_