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

cesium开发引入方式

无独有偶,引入无非两种方式:外部标签引入和import导入。

1、外部引入

      外部引入的话需要提前去下载开发包,下载完后,Build文件夹有两个文件夹:Cesium和CesiumUnminified,Cesium是压缩版的,CesiumUnminified是未压缩的,如果自己学习调试可以用未压缩的;如果是项目建议用压缩的,体积小,网络请求快。

 下载地址:GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

    <link href="<%= BASE_URL %>Cesium/Widgets/widgets.css" rel="stylesheet" />

    <script src="<%= BASE_URL %>Cesium/Cesium.js"></script>

2、npm导入

具体步骤可以看这篇:三维技术探索-Cesium.js学习 - 简书 

可以看出npm稍有麻烦,需要做一下打包配置,以上是vue/cli 打包配置的,如果是纯webpack打包项目配置请看这儿:基于Webpack的Cesium+Vue应用-CSDN博客

(顺便补充一下webpack与vue-cli的关系:webpack与vue-cli的关系_vuecli和webpack关系_儒雅的烤地瓜的博客-CSDN博客)

两者项目结构和位置有所差别。

注意配置时CopyWebpackPlugin参数,我这是这样配置的,在vue.config.js文件configureWebpack下:

const webpack = require('webpack');

const CopyWebpackPlugin = require('copy-webpack-plugin');

    plugins: [

      new webpack.DefinePlugin({

        CESIUM_BASE_URL: JSON.stringify('./')

      }),

      new CopyWebpackPlugin(

        [

          { from: path.resolve('./node_modules/cesium/Source/Workers'), to: 'Workers' },

          { from: path.resolve('./node_modules/cesium/Source/Assets'), to: 'Assets' },

          { from: path.resolve('./node_modules/cesium/Source/Widgets'), to: 'Widgets' },

          { from: path.resolve('./node_modules/cesium/Source/ThirdParty/Workers'), to: 'WoThirdParty/Workersrkers' },

        ]

      ),

    ],

http://www.lryc.cn/news/208024.html

相关文章:

  • 无缝的链间互操作性:通用消息传递的强大之处
  • minio + linux + docker + spring boot实现文件上传与下载
  • vue ant DatePicker 日期选择器 限制日期可控范围
  • linux 音视频架构 linux音视频开发
  • el-table添加固定高度height后高度自适应
  • Python分享之多进程探索 (multiprocessing包)
  • Boris FX Mocha Pro 2023:Mac/win全能影像处理神器
  • elementUI 特定分辨率(如1920*1080)下el-row未超出一行却换行
  • mac电脑视频处理推荐:达芬奇DaVinci Resolve Studio 18 中文最新
  • OKLink携手CertiK在港举办Web3生态安全主题论坛
  • 王道p40 1.设计一个递归算法,删除不带头结点的单链表L中的所有值为x的结点(c语言代码实现)图解递归
  • 深入浅出排序算法之希尔排序
  • close excel by keyword 根据关键字关闭 excel 窗口 xlwings 方式实现
  • LIO-SAM算法解析
  • vscode 提升小程序开发效率的必备插件与工具
  • 第五章单元测试
  • 【JAVA基础】多线程与线程池
  • HCIA数据通信——交换机(Vlan间的通信与安全)
  • Linux shell编程学习笔记16:bash中的关联数组
  • 浏览器是怎么执行JS的?——消息队列与事件循环
  • IMU预积分的过程详解
  • TypeScript中的类型运算符
  • 【蓝桥杯选拔赛真题03】C++输出字母Y 青少年组蓝桥杯C++选拔赛真题 STEMA比赛真题解析
  • redis搭建集群-多实例快速搭建
  • 为什么进行压力测试? 有哪些方法?
  • Java开发者必备:支付宝沙箱环境支付远程调试指南
  • 基于STM32温湿度传感器采集报警系统设计
  • 檢測項目簡體字
  • 适用于嵌入式arm的ffmpeg编解码
  • nlp与知识图谱代码解读_词嵌入