GisWeb实战笔记(1)基于 Vue 3 + Vite + CesiumJS搭建gis开发环境

一、实现效果

二、功能描述

(1)支持二三维切换显示;

(2)支持平移、旋转、缩放;

(3)支持自然地球、夜晚地球等样式切换显示。

三、参考代码

cpp 复制代码
//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Cesium Web GIS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
//main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
//App.vue
<template>
  <div id="cesiumContainer" style="width: 100vw; height: 100vh"></div>
</template> 
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Cesium from "cesium"; 
onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false,
    timeline: false,
  });
});
</script>

工程下载

欢迎关注我,一起交流!

相关推荐
FFF团团员90920 小时前
树莓派学习笔记5:安装yagmail,启用SMTP,发送邮件
笔记·学习
liugang_lawyer20 小时前
防范新型金融诈骗
笔记·百度·微信·金融·微信公众平台·新浪微博
遇到困难睡大觉哈哈20 小时前
Harmony os——ArkTS 语言笔记(七):注解(Annotation)实战理解
java·笔记·ubuntu·harmonyos·鸿蒙
竹子_2321 小时前
pyenv和.venv详解
经验分享·笔记·python
位文杰TOP1 天前
博客摘录「 六自由度机械臂运动学分析及其轨迹规划」2024年10月8日
笔记
Promise4851 天前
贝尔曼公式的迭代求解笔记
笔记·算法
锦锦锦aaa1 天前
【layout理解篇之:mos电阻】
经验分享·笔记
zore_c1 天前
【C语言】带你层层深入指针——指针详解2
c语言·开发语言·c++·经验分享·笔记
koo3641 天前
pytorch深度学习笔记
pytorch·笔记·深度学习
眠晚晚1 天前
API攻防&系统攻防笔记分享
笔记·web安全·网络安全