cesium 页面截图_Cesium开发入门篇 | 02开发环境搭建及第一个示例

开发环境准备

利用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:ode-v12.16.2-win-x64)。配置好之后打开cmd命令窗口输入node -v,显示版本则表示安装成功。

Cesium源码下载

Cesium最新版本下载地址:https://cesium.com/downloads/,本次教程用的1.75版本的Cesium,如果当前版本较高,可点击Previous releases找到1.75版本的Cesium下载,下载界面如下图所示:

c0bec4296fe924a03b73517a5a6454fa.png

下载完之后进行解压,压缩包主要内容如下图所示。

0bc718cf5f08449d20f0a4f5d79d5967.png

用VS Code打开解压后的文件夹,右击跟路径下的index.html,选“Open with Live Server”,运行界面如下:

9983f2dce440865d046806953c1555dc.png

Cesium ion:Cesium在线资源-地形(createWorldTerrain)、影像(createWorldImagery/IonImageryProvider)、OSM(createOsmBuildings)、点云(IonResource.fromAssetId)、3DTiles等

Local links:Cesium本地资源链接,文档、示例、单元测试等

External links:Cesium外部资源链接,社区、博客、GitHub等

环境搭建(纯HTML)

通过在html文件中引用cesium比较简单,新建文件夹(cesium_traning),将上面的Build文件夹(只拷贝里面的Cesium)拷贝到cesium_traning中,在cesium_traning根路径下创建examples文件夹,在examples文件夹下创建html文件,代码如下:(详情可查看https://github.com/ls870061011)

  Hello World

环境搭建(Vue CLI)

创建Vue工程

创建Vue工程,需要提前安装Vue脚手架,可在cmd命令窗口通过npm install -g @vue/cli命令安装,安装成功后输入vue --version命令检查安装版本。

当然如果你喜欢用yarn的话,可通过以下命令安装yarn和vue脚手架。

npm i yarn -gyarn global add @vue/cli

到此,你的电脑环境中已经具备创建vue工程的能力,下面就是通过在某个路径下打开cmd命令窗口执行vue create vue_cesium_js命令一步一步创建vue工程了,具体每一步选项的具体意义这里就不详细解释了,想了解的可查询相关资料。每一步的选项及部分截图如下:

69a6c64ef8fc9894b45f1f157d0a83f4.png

剩下的就是等待了,工程创建好之后,用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_tsgithub.com

    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'),      }),    ];

到目前为止,所有环境都已搭建好,下一步就是见证奇迹的时刻了。

第一个示例

如果是纯html的页面,可在VS Code中选中html文件右击Open with Live Server;如果是vue工程,在VS Code终端输入yarn serve按回车。不管是哪种方式,最终显示的结果都是一样的,大功告成,如下图所示。

0ff99b15164a8305a3003daf65b72e68.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/467637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android基础字符串String.md

问题抛出 String这个常量在我们代码中会经常被用到,那么我们了解 String stringbuffer StringBudilder三者之间的区别吗 问题解答 String 字符串常量,位于常量池stringbuffer 字符串变量 不同步适用于单线程 位于字符串缓冲区StringBudilder字符串变量 同步适用于多线程 位于字…

一个单片机ADC的挖坑填坑之旅

[导读] 本文来解析一个盆友在使用STM32采集电池电压踩过的坑。以STM32F4 的ADC属于逐次逼近SAR 型ADC为例进行分析,参考STM32F405xx Datasheet,对于如何编写ADC程序就不做描述了。先描述一下坑 采集电池电压,利用两个电阻将电池电压分压&…

centos mysql.tar.gz_centos7.2 mysql tar.gz 搭建 (亲测成功)

1、安装依赖:yum -y install libaioyum search libaio2、卸载系统自带的Mariadb数据库:rpm -qa | grep mariadbrpm -e --nodeps mariadb-libs-5.5.44-2.el7.centos.x86_64rpm -qa | grep mariadb3、创建mysql用户组和mysql用户groupadd mysqluseradd -g …

of_property_read_string 剖析~

前言今天在一个群里面看到的一个朋友提交,说of_property_read_string 这个函数有两个定义,到底是用了哪个呢?所以这篇文章就说下这个函数。函数引用的头文件引用的头文件位置在\kernel-4.4\include\linux\of.h其中一个是extern int of_proper…

欧几里得算法扩展欧几里得算法

欧几里德算法 欧几里德算法又称辗转相除法,用于计算两个整数a,b的最大公约数。 基本算法:设aqbr,其中a,b,q,r都是整数,则gcd(a,b)gcd(b,r),即gcd(a,b)gcd(b,a%b)。 第一种证…

mysql查询没有权限试图_MySQL迁移后提示查询view权限不足的处理

一.问题描述:开发人员反应xx物流系统mysql查询视图提示权限不足,请DBA介入处理.MariaDB [abc]> select * from c_time;ERROR 1045 (28000): Access denied for user lsa% (using password: YES)版本:mariadb 10.1.18 for centos 6.6二.问题分析&#…

CPU频率和核心

设置CPU的核心数在/sys/devices/system/cpu目录下可以看到你的CPU有几个核心,如果是四核,就是cpu0,cpu1,cpu2,cpu3 4个文件夹。cpu0 常开。进一个其他文件夹,比如cpu1,里面有个online文件用cat命令查看该文…

Java中的Map

java为数据结构中的映射定义了一个接口java.util.Map;它有四个实现类,分别是HashMap Hashtable LinkedHashMap 和TreeMap.HashMap:1.根据键的HashCode值存储数据2.最多只允许一条记录的键为Null,允许多条记录的值为Null3.不支持线程的同步(不支持多线程同时写操作),线程不安全,…

关于“进程”与“线程”的最通俗解析

来源:电子工程专辑进程(process)和线程(thread)是操作系统的基本概念,但是它们比较抽象,不容易掌握。最近,我读到一篇材料,发现有一个很好的类比,可以把它们解…

mysql 排序num_MySQL 实现row_number() 分组排序功能

数据库基本脚本CREATE TABLE a (ID INT(10) NULL DEFAULT NULL,class INT(10) NULL DEFAULT NULL,score INT(10) NULL DEFAULT NULL)COLLATEutf8_general_ciENGINEInnoDB;insert into a values (1,1,110);insert into a values (2,1,120);insert into a values (3,1,130);inser…

Netty源码学习(零)前言

本系列文章将介绍Netty的工作机制,以及分析Netty的主要源码。 基于的版本是4.1.15.Final(2017.08.24发布) 水平有限,如有谬误请留言指正 参考资料 the_flash的简书 占小狼的简书 转载于:https://www.cnblogs.com/stevenczp/p/7571…

要想选到音质好的耳机,你应该需要知道这些~

最近在一个音频公司调试我们设备的音频,从这次调试中,有所收获,希望这次的吹牛大家看完后,以后去买音频产品,可以分辨什么是好的,什么是不好的。有些产品硬件没有问题,但是产品经理因为个人喜好…

mysql kafka binlog_为什么使用kafka处理mysql binlog?

在开发 Spark Streaming 的公共组件过程中,需要将 binlog 的数据(Array[Byte])转换为 Json 格式,供用户使用,本文提供一种转换的思路。另外我们会用到几个辅助类,为了行文流畅,我们将辅助类的定义放在文章的最后面。如…

Fantasia (Tarjan+树形DP)

Time Limit: 1000 ms Memory Limit: 256 MB Description 给定一张N个点、M条边的无向图 $G$ 。每个点有个权值Wi。 我们定义 $G_i$ 为图 $G$ 中删除第 $i$ 号顶点后的图。我们想计算 $G_1, G_2, ..., G_n$ 这N张图的权值。 对于任意一张图 $G$ ,它的权值是这样定义…

买书这件事

知识这种东西,你只有不断的补充才不会觉得匮乏,我每年都会买点书,我喜欢买书,但是却不看书,很多书籍我都是当成工具书来用。我记得在2015年的时候,我需要自己写专利,但是我对写专利这个事情一窍…

python logging mysql_Python 操作 MySQL 的正确姿势

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~作者:邵建永使用Python进行MySQL的库主要有三个,Python-MySQL(更熟悉的名字可能是MySQLdb),PyMySQL和SQLAlchemy。Python-MySQL资格最老&…

Linus Torvalds的最新电脑配置

大家好,祝大家6.1节日快乐最近Linus Torvalds 公布了他的电脑配置,有了这个配置清单之后,每个人都可以拥有一台和Linux之父一样的电脑,当你拥有了一台之后,你可以发个朋友圈,「我今天用Linus 的电脑解了一个…

马上就校招了,是要去实习还是复习?

昨天晚上,遇到一个特别纠结的同学,他现在收到一份实习的通知,他犹豫是要去实习呢还是继续在学校复习学习技术。实习的话可以增加自己校招的筹码,比如在和面试官侃大山的时候,可以把实习这件事情拿出来说,这…

mysql order by 索引名字_MySQL如何利用索引优化ORDER BY排序语句

MySQL索引通常是被用于提高WHERE条件的数据行匹配或者执行联结操作时匹配其它表的数据行的搜索速度。MySQL也能利用索引来快速地执行ORDER BY和GROUP BY语句的排序和分组操作。通过索引优化来实现MySQL的ORDER BY语句优化:1、ORDER BY的索引优化。如果一个SQL语句形…

YAML/Properties配置文件与Spring Boot(转)

多年来,Java开发人员依赖于属性文件或xml文件来指定应用程序配置。在企业应用程序中,人们可以为每个环境(如开发,分段和生产)创建单独的文件,以定义相应环境的属性。但是,通过Spring引导&#x…