首页 > GIS > cesium > > 正文

Cesium简介及学习资料搜集

发布人:zhoulujun@live.cn    点击:

Cesium教程现在已经很多了,这里对过往看过的教程做些总结。Cesium学了也那么久了,自己整理的手札都不好意思拿出来—说实话也无意深入GIS。

最先接触地图开发在09年做疯狂英语包会营官方网站,没有什么印象了,应该是没有啥进展。应该是到13年在 常盈的时候,用百度地图API做了很多的地图定制开发。比如一块去旅行的景点地图。同期看了高德地图,谷歌地图。最近一年用了maptalks来做地图开发。但是真如官方说是,现在是3D的时代,所以cesium是 必杀技了

3D data is all around us. Today this data is being collected at astonishing rates, every second of every day, by sensors on satellites, aircraft, cars, drones, and nearly everything. But we're hardly doing anything to use this data. With Cesium we want to change this and unleash the power of this 3D content by creating a platform that makes it easy for developers to use this data in their applications.

Cesium enables developers and data providers to build dynamic 3D geospatial applications

Cesium起步

Cesium官方起点:https://cesium.com/docs/tutorials/getting-started/ 把里面大致看一下,然后撸代码学习

Cesium官方代码实例:https://github.com/AnalyticalGraphicsInc/cesium-workshop  cesium替换为最新的,或者

下载最新cesiumjs,解压,npm i,node server.js 即可运行

浏览 里面的Documentation,查看相关API说明,

浏览 里面的 Sandcastle ,查看相关 demo详情,和原来学习百度地图 JS API  类似 http://lbsyun.baidu.com/jsdemo.htm 

其实还百度地图、高德地图差不多,只是相关的接口更多,因为功能更多吗

var viewer = new Cesium.Viewer('cesiumContainer', {//Cesium的最基础对象就是Viewer,3d地球的黑盒
  geocoder: false,//地理位置查询定位控件,默认使用bing地图服务.
  homeButton: false,//默认相机位置。
  sceneModePicker: false,//3D、2D和哥伦布模式的切换按钮.
  baseLayerPicker: false,//选择地形、影像等图层。
  navigationHelpButton: false,//显示默认的相机控制提示.
  animation: false,//控制场景动画的播放速度.
  creditContainer: "credit",//展示数据版权属性。
  timeline: false,//时间滚动条。
  fullscreenButton: false,//全屏切换。
})
viewer.scene.debugShowFramesPerSecond = true//显示FPS帧速
//添加覆盖物 种类 entity.point rectangle ellipse  polygons polyline corridor box cylinder
var redBox = viewer.entities.add({//通过Entity添加形状
  name: 'Red box with black outline',
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
  box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material: Cesium.Color.RED.withAlpha(0.5),//添加着色、材质(如纹理图片 images/cats.jpg)复杂的 : new Cesium.CheckerboardMaterialProperty({evenColor : Cesium.Color.WHITE, oddColor : Cesium.Color.BLACK, repeat : new Cesium.Cartesian2(4, 4)})

    fill: false,//控制表面是否填充
    outline: true,//控制是否有外边界
    outlineColor: Cesium.Color.BLACK
  }
})
viewer.zoomTo(viewer.entities) //更多:https://www.jianshu.com/p/8ae3624347cb

var czml = [//通过CZML添加,因为它可以描述动画。类似Google Earth的KML
  {"id": "document", "name": "box", "version": "1.0"},
  {
    "id": "shape2",
    "name": "Red box with black outline",
    "position": {"cartographicDegrees": [-107.0, 40.0, 300000.0]},
    "box": {
      "dimensions": {"cartesian": [400000.0, 300000.0, 500000.0]},
      "material": {
        "solidColor": {"color": {"rgba": [255, 0, 0, 128]}}
      },
      "outline": true,
      "outlineColor": {"rgba": [0, 0, 0, 255]}
    }
  }]
var dataSourcePromise = Cesium.CzmlDataSource.load(czml)
viewer.dataSources.add(dataSourcePromise)
viewer.zoomTo(dataSourcePromise)

//添加地图图层Tiles 3d Tiles包括 建筑 树木,点云和矢量数据
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url: url, //数据路径
  maximumScreenSpaceError: 2, //最大的屏幕空间误差
  maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
  modelMatrix: m //形状矩阵
}))

//添加影像图层 教程:https://www.jianshu.com/p/98d4c0b2c618 https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/
var layers = viewer.scene.imageryLayers
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
  url: '//cesiumjs.org/tilesets/imagery/blackmarble',
  maximumLevel: 8,
  credit: 'Black Marble imagery courtesy NASA Earth Observatory'
}))
blackMarble.alpha = 0.5; // 0.0  全透明.  1.0 不透明.
blackMarble.brightness = 2.0; // > 1.0 增加亮度

Cesium学习的一些资料推荐

关于Cesium 官方教程 https://www.jianshu.com/p/31c3b55a21eb/

作者声称:在完成教程后,你对Cesium的功能会有几个基本概念,包括配置viewer、加载数据、创建各种样式的几何体、使用3d tiles(三维模型切片)、控制相机、增加鼠标交互事件。

法克鸡丝的:Cesium教程系列汇总 https://www.cnblogs.com/fuckgiser/p/5706842.html

Cesium中午论坛:http://cesiumcn.org/guide/index.html

https://fav.github.io/forstudy/tags/

cesium中文网 http://cesium.xin/wordpress/archives/16.html

超图官网示范及API翻译:http://support.supermap.com.cn:8090/webgl/index.html

http://cesium.marsgis.cn/docs/go.html?id=12

https://pasu.github.io/ExamplesforCesium/examples/examples.html#Primer-ImageryProvider


上一篇:First page
下一篇:Last page