cesium 页面截图_Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例
01
开发环境准备
利用Cesium API进行二次开发属于Web前端开发范畴,目前比较火的Web三剑客包括React、Vue、AngularJS,每个js库的详细介绍可转至官网查看,在此不做详细介绍。本次开发环境是基于Vue搭建的,需要安装(部署)的软件主要包括以下几种:
分类 | 名称 |
---|---|
IDE | VS Code |
浏览器 | Chrome |
Web服务器 | nginx |
包管理器 | node |
前两个下载后安装即可,注意VS Code需要安装Live Server扩展;nginx下载后的压缩包解压到电脑磁盘路径下(比如E盘跟路径下),配置好conf文件夹下的nginx.conf文件,双击nginx跟路径下的nginx.exe程序启动服务;同样node下载后的压缩包也解压到某个路径下,不同的是需要配置node系统环境变量,配置流程如下:我的电脑→右击属性→点击左侧的高级系统设置→点击环境变量→在系统变量中选中Path点击编辑→点新建将node的存储目录复制过去(比如E:\node-v12.16.2-win-x64\)。配置好之后打开cmd命令窗口输入node -v,显示版本则表示安装成功。
02
Cesium源码下载
Cesium最新版本下载地址:https://cesium.com/downloads/,本次教程用的1.75版本的Cesium,如果当前版本较高,可点击Previous releases找到1.75版本的Cesium下载,下载界面如下图所示:
下载完之后进行解压,压缩包主要内容如下图所示。
用VS Code打开解压后的文件夹,右击跟路径下的index.html,选“Open with Live Server”,运行界面如下:
Cesium ion:Cesium在线资源-地形(createWorldTerrain)、影像(createWorldImagery/IonImageryProvider)、OSM(createOsmBuildings)、点云(IonResource.fromAssetId)、3DTiles等
Local links:Cesium本地资源链接,文档、示例、单元测试等
External links:Cesium外部资源链接,社区、博客、GitHub等
03
环境搭建(纯HTML)
通过在html文件中引用cesium比较简单,新建文件夹(cesium_traning),将上面的Build文件夹(只拷贝里面的Cesium)拷贝到cesium_traning中,在cesium_traning根路径下创建examples文件夹,在examples文件夹下创建html文件,代码如下:(详情可查看github.com/ls870061011)
Hello World html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } var viewer = new Cesium.Viewer("cesiumContainer");
04
环境搭建(Vue CLI)
创建Vue工程
建Vue工程,需要提前安装Vue脚手架,可在cmd命令窗口通过npm install -g @vue/cli命令安装,安装成功后输入vue --version命令检查安装版本。
当然如果你喜欢用yarn的话,可通过以下命令安装yarn和vue脚手架。
npm i yarnyarn global add @vue/cli
到此,你的电脑环境中已经具备创建vue工程的能力,下面就是通过在某个路径下打开cmd命令窗口执行vue create vue_cesium_js命令一步一步创建vue工程了,具体每一步选项的具体意义这里就不详细解释了,想了解的可查询相关资料。每一步的选项及部分截图如下:
剩下的就是等待了,工程创建好之后,用VS Code打开此工程,在终端输入yarn add cesium@1.75等待cesium包安装完成即可。
配置vue.config.js
首先执行yarn add webpack copy-webpack-plugin --dev,在vue.config.js中的configureWebpack配置如下代码:详情可查看本人GitHub地址中的工程https://github.com/ls870061011/vue_cesium_ts。
config.plugins = [ ...config.plugins, new CopyWebpackPlugin({ patterns: [ { from: 'node_modules/cesium/Build/Cesium', to: 'cesium', }, ], }), new webpack.DefinePlugin({ // Define relative base path in cesium for loading assets CESIUM_BASE_URL: JSON.stringify('./cesium'), }), ];
到目前为止,所有环境都已搭建好,下一步就是见证奇迹的时刻了。
04
第一个示例
如果是纯html的页面,可在VS Code中选中html文件右击Open with Live Server;如果是vue工程,在VS Code终端输入yarn serve按回车。不管是哪种方式,最终显示的结果都是一样的,大功告成,如下图所示。
往期推荐
Cesium开发入门篇 | 01Cesium介绍
cesium 页面截图_Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例相关推荐
- cesium 页面截图_Cesium开发入门篇 | 02开发环境搭建及第一个示例
开发环境准备 利用Cesium API进行二次开发属于Web前端开发范畴,目前比较火的Web三剑客包括React.Vue.AngularJS,每个js库的详细介绍可转至官网查看,在此不做详细介绍.本次 ...
- ReactNative入门(一)——环境搭建及第一个RN项目—HelloWorld
ReactNative入门--本篇以及接下来的几篇有关RN的文章,是默认你对前端相关知识如Node,React,以及原生移动端Android可以熟练使用的情况下(最起码达到了解会用的程度)为前提的!不 ...
- 程序猿编程课堂 Python学习之入门篇1:环境搭建与第一个程序
前言: Python作为目前比较热门的编程语言,其简单和简洁的语法使它成为一种非常好的通用编程语言,它是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),并且随着版本的不断更新和 ...
- Hololens2开发入门(一)环境搭建
Hololens开发环境配置主要分为两块 一.unity环境搭建 本贴以2021.3.16f1c1版本为例,需要勾选 1.安卓板块 2.ios板块 3.universal windows platfo ...
- 【微信小程序】开发入门篇(二)
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
- 【微信小程序】开发入门篇(一)
前言 ❤️ 你可能认为一个人无法改变世界,但我想让你知道,这个世界也无法改变像我这样的人 ❤️ [微信小程序]开发入门篇(一) 一.小程序简介 (1)小程序与普通网页开发的区别 二.第一个小程序 (1 ...
- Hololens开发入门篇-郑洪智-专题视频课程
Hololens开发入门篇-572人已学习 课程介绍 本课程使用Hololens模拟器,基于Unity2017.2及Visual Studio 2017开发 课程收益 学会Ho ...
- 海思软件开发入门篇 (一)
标题 海思软件开发入门篇 (一) (第一次写博客,有错别字与写的不好的地方敬请谅解.) 加过很多群,也逛过很多论坛,很多人在问,第一次接触海思不知道从而入手,的确,现在一个SDK动不动上G,还 ...
- 后悔没早点看这篇直播系统定制开发入门篇
直播想必大家都不陌生了,在互联网的风口下,以及5G技术的推动,流量带宽的提高,使得直播在我们生活中扮演着越来越重要的角色.本文先来讲一下入门直播需要了解的一些基本概念,搜集整理了直播入门需要了解的一些 ...
最新文章
- 理解 Word2Vec 之 Skip-Gram 模型
- android点击输入法会把底部顶上去的解决办法
- 网站优化之如何稳固网站关键词排名?
- Oracle数据隐式乱码,正则匹配中文数据失败
- numpy求逆矩阵_线性代数精华2——逆矩阵的推导过程
- Linux下的C++ socket编程实例
- Ubuntu 下 libev编译安装
- mongodb可视化工具robo3T的安装和使用
- Open3d之python版本快速安装和使用
- DeepFake技术--DeepFake克星来了,简单两步算法造假图像无处可逃
- Gliffy Diagrams 好用的流程图工具
- Koo叔说Shader-CG语言介绍
- 智能暖风机——2.嵌入式系统创建
- 服务器网站内容被阻止,关于安全狗提示“您请求的页面包含一些不合理的内容,已被网站管理员设置拦截”的解决方法...
- scikit-learn 学习笔记(一)
- 从零开始学数据分析之——《笨办法学Python》(习题0-10)
- 计算机网络不同网段,WIN7系统计算机不同网段如何共享资源
- 数值法求解最优控制问题(二)——打靶法
- 中国矿业大学测绘工程专业课-学习笔记
- 怎么样才能快速有效系统的学好linux?
热门文章
- 利用条件随机场模型进行中文分词
- 初学python之路-day11
- hightcharts 3d 堆积图下钻
- Hibernate SQL 方言(hibernate.dialect)
- 关于js中window.location.href、location.href、parent.location.href、top.location.href的用法...
- 判断活动窗口_蒙城活动推拉棚定做厂家
- python服务器搭建nginx_从0开始搭建nginx-uWSGI-Django-python服务器
- 20个基本电路图讲解_12v太阳能充电电路图大全
- Pycharm中SQL语句提示SQL Dialect is Not Configured
- I2C driver编写常用接口