个人博客上线，欢迎访问! ——&
全球矢量地图服务
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
//是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true,
//是否显示点击要素之后显示的信息
imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
url: "/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
layer: "tdtVecBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
全球影像地图服务
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
//是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: true, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: true, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: true,
//是否显示点击要素之后显示的信息
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
全球影像中文注记服务
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
全球矢量中文注记服务
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
阅读(...) 评论()& & & & & & & & & &cesiumjs 简介、开发环境搭建
Cesiumjs 是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据在GIS图层上的展示，是一个跨平台，开源，非常有前途的webgis表现层库。
& & &Cesiumjs 是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据在GIS图层上的展示，是一个跨平台，开源，非常有前途的webgis表现层库。
& & &Cesiumjs源自&Analytical Graphics, Inc.&(AGI) 公司为他们客户开发一个虚拟地球项目，后来将cesium项目贡献给开源社区并一直活跃开发中。（AGI
开发的&STK Terrain Server&是一种针对Cesium-应用的流式高分辨率服务器）另一个公司级的贡献者是NICTA&(National
ICT Australia) 澳大利亚最大的信息与通讯技术中心，NICTA的员工们贡献了瓦片地图服务、地形处理等cesium的核心功能。并一直使用cesium开发环境监测分析、交通基础设施建模仿真优化等领域的应用。
& & &&Cesiumjs托管在著名的社交编程平台github上，地址为
本机上装有git客户端后，可以clone整个工程到本地目录，大概300多M。根据根目录下的.project文件得知可以用eclipseIDE打开
右键单击build.xml,选择Run As--》Ant Build
在弹出对话框中选择build，点OK。
生成过程大概20分钟，包括了文档的生成。生成完后在根目录新增了一个Build目录，里面包含：
Apps - & Viewer的例子程序
Cesium - 最小化的cesium库js文件
CesiumUnminified - 非最小化的cesium库js文件（用于调试目的）
Documentation - html版的API文档
stubs - （暂时不知道用途）
HelloWorld.html - 最简单的例子
index.html - 起始页面，包含hello world例子和文档入口
minifyShaders.state -&（暂时不知道用途）
server.js - 启动一个最简单的http服务器的nodejs脚本，监听在8080端口
& & http服务器可以使用任何一种标准的Web服务器，如IIS， Apache， Nginx等等，设定webroot指向Build目录即可。启动后访问http://localhost:88&(假设监听端口为88)即可看到如下页面
点击Hello world后进入一个最简单的cesium演示
左键拖动，右键缩放，中键旋转视角，默认地图覆盖为Bing地图，至此一个最简单的cesium应用搭建完毕。
如要查看cesium所支持的所有功能，可以设定web服务器的webroot指向根目录下Apps（非Build/Apps）目录，然后在浏览器中进入Sandcastle连接。Sandcastle是一个cesium特性演示环境，同时是可以修改代码即时看到效果的沙箱（sandbox）。
& & &cesium开发环境搭建先介绍到这里，下一篇《cesiumjs开发实践(二) Viewer控件》
本文已收录于以下专栏：
相关文章推荐
new Cesium.Viewer(container, options)
Widgets/Viewer/Viewer.js 34
Animation(动画)
new Cesium.Animation(container, viewModel)
动画小部件提供按钮来播放,暂停,并扭转,以...
一、一个文件夹下查询获取多种后缀的文件
/// 读取文件夹
public void ReadFolde...
Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。
WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来...
空间数据可视化
Cesium提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状（volume）。
Entity API简介
Cesium提供两类...
如何让地图变得更有吸引力
　　制图员在编制地图和构建页面布局时，会应用到许多设计原则。其中，有五个主要的设计原则：易读性、视觉对比、图形背景组织、层次组织和平衡。综合这些原则形成一个系统，有助于观...
Cesium提供了以下默认鼠标行为：
（1）单击并拖拽球体：旋转地球，镜头俯角不变
（2）单击并拖拽空间：滚动roll、俯仰pitch镜头
（3）右击并拖拽、中键滚动：缩放镜...
Cesium中提供了三维模型加载API，但是很显然一般三维场景的模型成千上万，如果单纯采用默认的三维模型加载方案会出现浏览器吃不消致使崩溃或者高延迟低帧率等影响正常可视化交互的问题。诚然官方团队已经开...
GitHub在前端用到的一系列工具基本上都是开源的。现简单地整理如下。
1. HTML / CSS / JavaScript
1.1. HTML模板
GitHub的标记 & 模板风格...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)前面我们从宏观上分析了Cesium的整体调度以及网格方面的内容，通过前两篇，读者应该可以比较清楚的明白一个Tile是怎么来的吧（如果还不明白全是我的错）。接下来，在前两篇的基础上，我们着重讨论一下地形相关的内容。
Cesium提供了TerrainProvider基类，该Provider负责每一个Tile对应的地形数据的构建，定义了一套地形Provider需要实现的接口和规范，但本身并不会参与其中的操作。这里列举一些关键的属性和函数：
tilingScheme
Provider内部地球网格的剖分方式，通常是WGS84坐标，也可以选择墨卡托坐标系
hasWaterMask
是否支持水面效果
hasVertexNormals
地形数据中是否包含法向量（光照是否支持）
heightmapTerrainQuality
地形显示的精度，在上一篇中介绍的一个Tile占多少像素，其中这个参数作为调整系数
requestTileGeometry
Provider的对外接口，参数为Tile对应的XYZ，返回其对应的TerrainData，基类中为空实现。
如上就是TerrainProvider，基本都是空实现，仅仅提供了一套规范，在Cesium中有三个继承类，EllipsoidTerrainProvider和CesiumTerrainProvider，还有最新提供的ArcGisImageServerTerrainProvider。
详细介绍地形前我们先说明一下TileScheme、Terrain和Imagery之间的一个关联。TileScheme是坐标系，Cesium中目前支持WGS1984和墨卡托投影两种。Terrain和Imagery分别采用自己的TileScheme，比如目前Terrain默认采用WGS1984的坐标系，这和经纬高的真实数据更接近，而目前Imagery影像服务基本都是墨卡托投影（据我了解，只有天地图提供WGS84的影像服务）。
TileScheme
Imagery（WGS1984）
Imagery（Mercator）
Terrain（WGS1984）
Terrain（Mercator）
如上图，首先，Globe，也就是地球网格是根据TerrainProvider的TileScheme来划分的；其次，如果地形和影像之间采用不同的坐标系，则影像切片需要动态的转换为地形切片下对应的效果，也就是动态投影的过程，这个计算量是不可忽略的；
最后，在实际中，EllipsoidTerrainProvider支持WGS和Mercator两种坐标系，而CesiumTerrainProvider只能支持WGS一种，因此选择何种地形和影像来互相匹配，在性能上也是有差异的。
EllipsoidTerrainProvider
EllipsoidTerrainProvider是Globe默认采用的地形Provider，该Provider不支持水面，没有法向量，所以即使开启光照，对Tile也是无效的。
EllipsoidTerrainProvider功能弱爆了，那还有它存在的价值吗？答案是肯定的。它提供了一个全球范围内高度为0的地形，不需要额外的地形文件，就可以实时的自己来构建这个高度为0的Mesh。对那些没有网络环境，或网络不理想，或不需要地形的应用，EllipsoidTerrainProvider提供了最简单的，无需额外负担的地形数据来构网。
来看一下requestTileGeometry的实现：
原来EllipsoidTerrainProvider采用的高度图方式来构网，但buffer直接new出来，所以值都为0，而高宽为16，也就是把一个Tile的行列分为16*16。至于Cesium如何通过高度图构网的过程，我们在下一篇会介绍，本篇主要在于思路和流程的理解。如下是截取的XYZ为412的地形网格效果，是一个15*15的高度为0的网格：
另外，EllipsoidTerrainProvider有一个更为灵活的地方，TileScheme默认采用WGS84，但用户可以选择，这个在性能优化上还是值得考虑的，目前的影像服务绝大多数都是采用墨卡托，如果地形采用WGS84，如果所用的EllipsoidTerrainProvider内部坐标系是WGS84，这样就需要讲墨卡托的影像切片转换为WGS的切片的过程，所以，在这种情况下，反正怎么划分，最后的网格都没什么区别，索性让地形的TileScheme和影像的保持一致，性能会更好。理论上讲这个思路是正确的，但事实真的如此吗？因为这个牵扯到Imagery模块，我们在后面讲影像时再详细讨论。
ArcGisImageServerTerrainProvider
我们下来在看看年轻的ArcGIS的地形，这个可以说是一个真实的（凹凸的）高度图，原理和EllipsoidTerrainProvider如出一辙，因此同样的不支持法线，水面，但可以选择TileScheme，与EllipsoidTerrainProvider不一样之处在于每一个切片会根据ArcGIS规范请求一张图片，该图片中的像素对应的值就是该像素对应的高度，真的是名副其实的高度图。我们来看看ArcGisImageServerTerrainProvider的requestTileGeometry实现：
如上，不同于EllipsoidTerrainProvider，ArcGisImageServerTerrainProvider需要根据当前的XYZ获取对应的范围bbox，然后向ArcGIS World Elevation Image Services请求对应该范围的一个_heightmapWidth*_heightmapWidth大小的高度图。heightmapWidth默认为65，可想而知该网格会比较密。
遗憾的是，根据Cesium提供的url，我本机无法访问，所以看不到效果，如果对这个感兴趣，可以参考之前的一篇文章《ArcGIS Earth数据小析》，两者应该是同源的。
CesiumTerrainProvider
最后，就轮到了CesiumTerrainProvider，在该Provider中支持两种地形格式，一种是高度图，一种则是TIN网格的STK地形。我们一一道来。
createHeightmapTerrainData
这个是Cesium提供的高度图方式，和ArcGIS的很相似，目前Cesium已经废弃，确实在技术上，高度图有很多缺陷，我们在介绍完STK的TIN效果后，大家就一目了然。
这个就不用介绍了吧，和前面的一模一样，效果如下，相比EllipsoidTerrainProvider，同一个XYZ（412）这个比较密，因为这次确实有高度了，而不是清一色的0：
另外，Cesium的高度图支持水面效果，水面涉及到渲染层面，我们会在影像渲染中涉及这个问题。
createQuantizedMeshTerrainData
Cesium厉害的指出就在于目前采用STK的地形服务，这个地形的难度和技术细节已经无法在这一个章节内一一道来了，我们也主要说思路，后面单独一个章节来具体的说一下。支持。Cesium通过QuantizedMeshTerrainData封装了STK地形数据格式，它的优点是支持水面和法线，同时数据量比较小。个人认为STK的地形数据代表目前最好的TIN地形生成技术，没有之一，相比之下，高度图的形式可能更容易在应用层面解决问题，但在技术角度不值得一提。
当然，下载STK的数据思路和高度图的一直，也是根据XYZ请求一个Terrain文件，返回值是一个arraybuffer，不过这一次，不是用HeightmapTerrainData来封装，而是用QuantizedMeshTerrainData，本篇不讨论QuantizedMeshTerrainData细节，先看看同一个Tile（412）下的效果图：
可见STK的地形网格看上去很简单，甚至比EllipsoidTerrainProvider还要稀疏，那为什么还能具有如此多的优点呢，现卖个关子，下回分解。
本文主要介绍了目前Cesium支持的三种TerrainProvider的相关细节，每一个Tile切片，对应不同的TerrainProvider，地形数据会封装成HeightMapTerrainData或者QuantizedMeshTerrainData对象。
下两篇，我们详细介绍高度图，也就是HeightMapTerrainData和QuantizedMeshTerrainData中的细节。
本文已收录于以下专栏：
相关文章推荐
关于3D-Tiles还是Beta阶段，其定位是Web环境下海量三维模型数据。其数据的生产目前还没有成熟的工具，不过cesium在去年9约已经开始推进3dtile数据规范的ogc进程，相信很快就会有结果...
思考一下这个问题，
知识层面：从小学到初中，再到高中、大学、硕士、博士、院士、诺贝尔奖获得者。
财富层面：从乞丐到……，到全球首富。
权力层面：从小组长到……，到联合国秘书长。
为什么都不乏乐...
转自：/fuckgiser/p/5772077.html上一篇我们从宏观上介绍了Cesium的渲染过程，本章延续上一章的内容，详细介绍一下Cesium网格划...
转自：/fuckgiser/p/5744509.html原计划开始着手地形系列，但发现如果想要从逻辑上彻底了解地形相关的细节，那还是需要了解Cesium的数...
Cesium中提供了三维模型加载API，但是很显然一般三维场景的模型成千上万，如果单纯采用默认的三维模型加载方案会出现浏览器吃不消致使崩溃或者高延迟低帧率等影响正常可视化交互的问题。诚然官方团队已经开...
基于geoserver搭建离线web球环境，采用cesium1.25版本，win10环境搭建，供大家参考。
码畜：靠编译器帮自己查语法错误。
码农：靠调试器帮自己查逻辑错误。
码人：靠写日志帮自己查运营错误。
码神：靠冥想和顿悟帮自己查不可再现错误。
用微笑面对一切令你烦恼的人或事，不久之后，你会发现令你微笑的人或事变得越来越多了。
Cesium中目前支持gltf和bgltf两种格式。“gltf是khronos组织（起草OpenGL标准的那家）定义的一种交换格式，用于互联网或移动设备上展现3d内容，充分支持opengl，webgl...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)本文讨论如何配置学习环境
预期目的:在webstrom中配置好开发环境，并运行达到下图效果
1）nodejs环境配置
很简单直接下载nodejs安装文件安装即可。
备注：由于node的资源在国内被墙的厉害，推荐采用cnpm替代npm来安装一些依赖库
安装cnpm方法：
npm install -g cnpm --registry=https://registry.npm.taobao.org
2）cesium下载
下载解压，打开cmd转到该解压后的目录下，执行
cnmp install
自动安装所需要的依赖文件，然后执行
node server.js
即可运行处上图结果。
3）在webstorm中进行配置
下载webstorm开发平台，通过cnpm安装express开发框架，这些前序基础都需要先完成。
3.1 打开webstorm，新建项目选择nodejs+express模式如下图
3.2 拷贝cesium解压目录下的buid里面的cesium文件夹到下图所示位置
3.3 环境配置好了，我们修改下主页的代码，引用相关js文件，运行webstorm，在浏览器中输入localhost:3000即可访问到结果
&!DOCTYPE html&
&&%= title %&&
rel='stylesheet' href='/stylesheets/style.css' /&
rel='stylesheet' href='/javascripts/Cesium/Widgets/widgets.css' /&
charset="utf-8"&
http-equiv="X-UA-Compatible" content="IE=edge"&
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&
&Hello World!&
, , #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
id="cesiumContainer"&&
src="/javascripts/Cesium/Cesium.js"&&
var viewer = new Cesium.Viewer('cesiumContainer');
本文已收录于以下专栏：
相关文章推荐
cesium学习2–空间数据可视化
官方文档阅读
Cesium has a rich API for spatial data that can be split into two categorie...
Cesium的练手
范例中所有范例可以在Github中搜索：ExamplesforCesium
       Cesium ['si:z??m]是一款开源的JavaScript开源库，开发者通过Cesium，实现无插件的...
第一步： 安装node.js(JavaScript 解释器)  (参考网址： /smallidea/archive//2599734.h...
cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触...
摘要: Cesiumjs 是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合...
首先确保你的浏览器支持Cesium
判断你的浏览器是否支持Cesium最简单的办法就是看你是否能成功的运行cesium的helloworld例子（点这里（要翻墙才行）），假如你看到如下的图像，祝贺你，...
Cesiumjs 是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据...
摘要: viewer控件是cesiumjs中最常用的控件，它提供了基本的虚拟地球显示和众多的控制选项
viewer控件是cesiumjs中最常用的控件，它提供了基本的虚拟地球显示和众多的控制...
using S using System.Collections.G using System.L using System.T using System.N...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)