vue3中使用cesium

vue3中使用cesium

Cesium是一个开源的JavaScript库，专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具，使得开发人员能够轻松地构建出高质量的地理空间可视化应用。

1. 安装cesium包

npm install cesium

2. 复制node_modules中的Cesium至public静态资源中

3. main.ts中引入cesium

import "cesium/Build/Cesium/Widgets/widgets.css";

import * as Cesium from "cesium";

(window as any).CESIUM_BASE_URL = "/Cesium"; 

Cesium.Ion.defaultAccessToken = "你的token";  // 注册地址https://cesium.com/ion/signin/tokens

4. 编写页面

<script setup lang="ts">
import { onMounted } from "vue";
import * as Cesium from "cesium";

onMounted(() => {
	const viewer = new Cesium.Viewer("cesiumContainer1");
});
</script>
<template>
	<div id="cesiumContainer1" />
</template>
<style lang="less" scoped>
#cesiumContainer1 {
	width: 100%;
	height: 100%;
}
</style>

此时页面效果

5.cesium相关配置, 具体可查看官方文档。

viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "xxx", //换成自己的地址
        maximumLevel: 9,
    }),
    animation: false, // 动画控件
    shouldAnimate: false, // 初始时刻运动
    homeButton: false, // Home按钮
    fullscreenButton: false, // 全屏按钮
    baseLayerPicker: false, // 图层选择控件
    geocoder: false, // 地名查找控件
    timeline: false, // 时间线控件
    shadows: false,
    navigationHelpButton: false, // 帮助信息控件
    infoBox: false, // 点击要素之后显示的信息 信息框小部件
    requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]
    scene3DOnly: false, // 几何图形以3D模式绘制以节约GPU资源
    sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式  3d 球
    maximumRenderTimeChange: 1,
    sceneModePicker: false, // 切换展示模式控件
    selectionIndicator: false,

    // 设置渲染
    orderIndependentTranslucency: false,
    contextOptions: {
        webgl: {
            alpha: true,
        },
    },
});

//去除 左下角 版权信息
(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";

// 相机位置
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120, 48, 25000000),
});

const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;

配置后的页面效果