Ceisum官方教程1 -- 开始

原文地址:https://cesium.com/docs/tutorials/getting-started/
学会使用全球地形、影像、3d tile(模型切片)、地理编码创建一个Cesium程序。
CesiumJS是一个基于javascript的浏览器器3d地图引擎。Cesium ion是一个3d内容的发布中心并且可以把你自己的数据进行切片、发布服务。CesiumJS和 ion 配合起来可以创建世界级3d地图程序。

3D数据经过ion或者cesiumlab进行处理,并且在cesiumjs中可视化.
第一个程序
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script&gt;
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = ‘your_access_token‘;
var viewer = new Cesium.Viewer(‘cesiumContainer‘);
</script>
</body>
</html>
注意:
如果你登陆cesium ion之后,可以用你自己的access token 替换代码里的。
所有web程序需要一个web服务器,CesiumJS也不例外。为了简单,这个教程跳过本地服务器的搭建,使用Glitch 和 一个在线的IDE做程序开发。点击这里创建一个glitch项目。Glitch加载之后,忽略模板提示,直接点击index.html 删除整个内容,把上面的代码粘贴过去。
点击

按钮,它会打开一个新窗口,并显示了Cesium的程序。修改代码后,这个弹出窗口会自动刷新。

Glitch预览界面
代码分析:
在HTML的head标签内包含CesiumJS的库引用
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script&gt;
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
创建一个HTML标签去承载CesiumJS控件(widget):

从你的ion账户提供一个token去访问Bing影像底图:

最后,创建一个名为Viewer的Cesium控件,并且让他去使用上面定义的HTML元素:

添加Cesium全球地形
Cesium全球地形是一个高精度地形库,在你的ion账户里已经有访问权限。用下述代码替换我们做的第一个示例里的创建Viewer的部分:

下来我们在预览界面缩放到特定位置,比如“Grand Canyon, AZ”,就看到如下图效果:

Grand Canyon的10米精度地形

原文地址:http://blog.51cto.com/14117342/2327029

时间: 2024-10-11 07:53:00

Ceisum官方教程1 -- 开始的相关文章

Ceisum官方教程3 -- 空间数据可视化

原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点,图标,文字标注,折线,模型,图形和立体图形.虽然这章不需要什么前提,但是如果你对Cesium一无所知,最好从第一个教程开始.Entity API是什么?Cesium丰富的空间数据可视化API分为两部分:Primitive API 面向三维图形开发者,更底层一些.Entity API 是数据驱动更高级一

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解 在本章中,我们研究生成的Edit方法和视图.但在研究之前,我们先将 release date 弄得好看一点.打开Models\Movie.cs 文件.先添加一个引用: <span style="font-size:14px;">using System.ComponentModel.DataAnnotations;</span> 然后在Movie类中添加以下代码: [Display(

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据 在本章中,我们将新建一个MoviesController 控制器,并编写获取电影数据的代码,使用视图模板将数据展示在浏览器中. 在进行下一步之前,你需要先编译应用程序,否则在添加控制器的时候会出错. 在解决方法资源管理器的Controllers文件夹右键,选择"添加">"新建搭建基架项": 在"添加支架"对话框,选择 包含视图的MVC 5控制器(使用 En),然后单击

学习ASP .NET MVC5官方教程总结(八)搜索查询

学习ASP .NET MVC5官方教程总结(八)搜索查询 在本节中,我们为 Index 方法添加查询功能,使我们能够根据电影的题材或名称进行查找. 首先,我们需要更新 MoviesController 的 Index 方法,代码如下: public ActionResult Index(string searchString) { var movies = from m in db.Movies select m; if (!String.IsNullOrEmpty(searchString))

《Java: The Complete Reference》《Java 8 编程参考官方教程(第9版)》读书笔记

春节期间读了下<Java: The Complete Reference>发现这本书写的深入浅出,我想一个问题,书中很多内容我们也知道,但是为什么我们就写不出这样一本书,这么全面,这么系统,这么简单易懂.不得不佩服Herbert Schildt的编程功底,需要提到的是Herbert Schildt写了很多Java和C.C++的书,他是C.C++.Java和C#编程语言的权威,是ANSI/ISO组织C语言标准化委员会的委员. Herbert Schildt最新的基本Java著作其实都差不多,在内

如何在Eclipse正确安装配置PyDev插件的官方教程,以及error 问题的解决方法:

官方教程; 1 1 This manual assumes that you have already have Python and/or Jython and/or IronPython installed in your machine, as well as Eclipse. Manual topics: Installing from update site and zips uninstalling Configuring the interpreter specify the py

QML官方教程——Using the Qt Quick Particle System

附网址:http://qt-project.org/doc/qt-5/qtquick-effects-particles.html Using the Qt Quick Particle System-- 使用Qt Quick粒子系统 所有粒子系统的类型都可以在QtQuick.Particles模块文档中找到. 注意想要使用粒子模块中的类型,你需要使用下面这个代码进行引入: import QtQuick.Particles 2.0 · The ParticleSystem 粒子系统包含4个主要的

Unity性能优化(4)-官方教程Optimizing graphics rendering in Unity games翻译

本文是Unity官方教程,性能优化系列的第四篇<Optimizing graphics rendering in Unity games>的翻译. 相关文章: Unity性能优化(1)-官方教程The Profiler window翻译 Unity性能优化(2)-官方教程Diagnosing performance problems using the Profiler window翻译 Unity性能优化(3)-官方教程Optimizing garbage collection in Uni

boost操作xml 5分钟官方教程

Five Minute Tutorial This tutorial uses XML. Note that the library is not specifically bound to XML, and any other supported format (such as INI or JSON) could be used instead. XML was chosen because the author thinks that wide range of people is fam