创建了 Vue3 + TypeScript 项目,并已经在第 2 节通过手动拷贝的方式把四个静态资源文件夹拷贝到public/libs/cesium/目录下,配置好了CESIUM_BASE_URL让 CesiumJS 能访问到这些静态资源,并成功看到了具有离线 TMS 瓦片的三维地球 使用插件完成了打包外部化 CesiumJS,极大提高了打包速度、极大减小了构建产物的体积 ...
第2 节不需要知道原理,原理和最佳实践请往下阅读 3、4、5 节。 2.1. 创建 Vue3 - TypeScript 工程并安装 cesium 如果你没有命令行基础,也不懂什么是 NodeJS、npm,不知道 node-package 是什么东西,建议先补补 NodeJS 为基础的前端工具链知识。
1.2. 选择 Vite3 和 pnpm 的理由 1.3. 使用 External 模式引入静态库 - 不打包静态库 1.4. 切勿什么都 import - 以及页面运行的时候的路径与开发时的路径 2. 一步一步教你创建项目 2.1. 使用 create-vue 或 vite 模板 2.2. 指定版本安装 cesium 依赖 2.3. 不使用锁文件 2.4. 配置 External 和构建后的...
安装好对应的依赖之后,找到项目的vite.config.js文件,进行大概如下的配置。 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// 导入Cesium插件importcesiumfrom'vite-plugin-cesium';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),cesium()]}) 然后在某一个vue文件中...
由于Vue2 已经进入维护期,且 Vue2 对待组件内的 data 是无差别使用 Object.defineProperties 递归将其劫持的,对于复杂状态的对象会造成严重的 JavaScript 访问路径过长而导致的 性能问题,这个应该是老生常谈了。Vue3 提供了 markRaw 函数,标记一个对象,令 Vue 不再将其视作 响应式 数据,所以本文基于 Vue3 来...
下载之前,我们肯定是已经创建vue3的项目了,并且已经申请了cesium的token。申请token很简单,去官网用邮箱注册账号,直接就能申请 官网:https://cesium.com/downloads/ # 直接下载默认版本的 npm install cesium # 也可以指定版本 npm install cesium@1.99 vite-plugin-cesium ...
由于Vue2 已经进入维护期,且 Vue2 对待组件内的 data 是无差别使用 Object.defineProperties 递归将其劫持的,对于复杂状态的对象会造成严重的 JavaScript 访问路径过长而导致的 性能问题,这个应该是老生常谈了。 Vue3 提供了 markRaw 函数,标记一个对象,令 Vue 不再将其视作 响应式 数据,所以本文基于 Vue3 ...
1. 适用范围与目的本文假定读者是通过npm拉取CesiumJS依赖，适用于大多数应用开发场景。文章目标是介绍如何在Vue3工程中引入CesiumJS，以及如何封装地图组件。2. 牛刀小试 - 直接体验三维地球快速创建一个能展示3D地球的示例，是让读者对CesiumJS有直观认识的关键步骤。首先，从创建Vue3项目并安装CesiumJS...
在 Vue3的背景下，由于Vue2的组件内数据处理方式可能导致性能问题，Vue3提供了markRaw函数来处理复杂状态对象。本文将专注于基于Vue3的引入方法。了解基本概念前，CesiumJS是一个庞大的JavaScript库，通常使用官方构建版本而非源码。在项目中，CesiumJS的主库和静态资源需要正确配置。推荐使用Vite作为开发工具...