当前位置: 首页 > news >正文

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

一、实现效果
在这里插入图片描述
二、功能描述

(1)支持二三维切换显示;
(2)支持平移、旋转、缩放;
(3)支持自然地球、夜晚地球等样式切换显示。

三、参考代码

//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>

工程下载
欢迎关注我,一起交流!

相关文章:

  • 深入探索Anthropic Claude与Spring AI的融合应用
  • 【STM32单片机】#13 RTC实时时钟
  • 分析strtol(),strtoul()和strtod()三个函数的功能
  • 从网页到桌面:将 Web 应用无缝迁移为 Electron 桌面程序
  • 电赛经验分享——模块篇
  • 定积分的定义式(黎曼和极限定义)
  • 协议(消息)生成
  • STA中的multi_cycle 和false_path详细讨论
  • 从Rtos到Linux:学习的策略
  • Dify框架面试内容整理-如何评估基于Dify开发的AI应用的效果?
  • 【Vue】Vue3源码解析与实现原理
  • 基于muduo库实现高并发服务器
  • Linux文件复制命令精要指南:cp与scp详解
  • DotNetBrowser 3.2.0 版本发布啦!
  • RPC是什么
  • 线程局部存储----TLS
  • 使用AI 将文本转成视频 工具 介绍
  • 《MATLAB实战训练营:从入门到工业级应用》高阶挑战篇-《5G通信速成:MATLAB毫米波信道建模仿真指南》
  • zotero pdf中英翻译插件使用
  • 10 种最新的思维链(Chain-of-Thought, CoT)增强方法
  • 潘功胜:坚定支持汇金公司在必要时实施对股票市场指数基金的增持
  • 金融监管总局:支持银行有序设立科技金融专门机构,推动研发机器人、低空飞行器等新兴领域的保险产品
  • 涉个人信息收集使用问题,15款App和16款SDK被通报
  • 新闻1+1丨多地政府食堂开放 “舌尖上的服务”,反映出怎样的理念转变?
  • 联合国秘书长古特雷斯呼吁印巴保持最大克制
  • 张国清赶赴贵州毕节黔西市指导游船倾覆事故应急救援救治工作