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

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.kler.cn/news/107087.html

相关文章:

  • 一体化运维监控:数据中心运维可视化的指挥中枢
  • 轻量封装WebGPU渲染系统示例<3>-纹理立方体(源码)
  • JVM进阶(3)
  • macOS Sonoma 14.1正式版(23B74)发布(可下载黑白苹果镜像)
  • LabVIEW开发基于图像处理的车牌检测系统
  • C/C++面试常见问题——const关键字的作用和用法
  • DAC芯片AD5689控制代码SPI接口FPGA代码,视频
  • Qt文件 I/O 操作
  • 深度学习标注工具(包括自动标注)总结——持续更新
  • 不同网段的IP怎么互通
  • c语言基础:L1-060 心理阴影面积
  • 一文详解汽车电CAN总线
  • SpringMVC(下)
  • mysql bin_log日志恢复数据
  • Android framework服务命令行工具框架 - Android13
  • 高速下载b站视频的解决方案
  • UI自动化测试是什么?什么项目适合做UI自动化测试
  • 24年FRM备考知识点以及一级公式表
  • 【机器学习】KNN算法-模型选择与调优
  • 力扣每日一题73:矩阵置零
  • 2023CSP-J题解
  • python 字典dict和列表list的读取速度问题, range合并
  • 笔记-《RabbitMQ实战指南》
  • Oracle 数据库的锁排查方法
  • Linux 系统调用IO口,利用光标偏移实现文件复制
  • Kotlin 使用@BindingAdapter编译出错
  • 【微服务开篇-RestTemplate服务调用、Eureka注册中心、Nacos注册中心】
  • VPS是什么?详解亚马逊云科技Amazon Lightsail(VPS)虚拟专用服务器
  • C++模拟实现-----日期计算器(超详细解析,小白一看就会!)
  • Java架构师内功计算机网络