Cesium笔记(0)：Cesium简介及学习资料搜集

2023-05-14 23:13:14 浏览数 (2)

最先接触地图开发在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

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

如果不愿意搜索，推荐阅读：http://mars3d.cn/cm?url=study-cesium

Cesium文档

对我来说，非专业的GIS开发者，还是看看文档，然后磨合这，做出点东西来

Cesium除了官方demo：https://cesium.com/blog/categories/userstories/

超图WebGL引擎案例集合(基于Cesium改造) ：http://support.supermap.com.cn:8090/webgl/examples/examples.html#KMLAndModel

看着别人：https://cesium.com/blog/categories/userstories/

官方文档：https://cesium.com/docs/cesiumjs-ref-doc/

代码语言：javascript复制
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学习路线

API学习路线图，按下图顺序学习相关类

Cesium进阶之路 （3大方向）

  • Web前端方向：Cesium与webpack （裁剪以及压缩），Cesium 与vue （框架设计， 嵌入复杂业务系统）， Cesium的UI （UI 设计，定制可复用的Cesium交互界面）
  • 图形学方向：WebGL深入，基于Cesium 的可视化定制（视阈、水淹、水面、热力图，流场图、飞线图、扫描图）
  • 数据预处理方向：投影变换， 空间索引， LOD ， 3dtile 生成，数据存储， 数据分发服务，解决超大空间数据如何在 Cesium上流畅可视化的问题。

Cesium学习的一些资料推荐

https://www.jianshu.com/p/31c3b55a21eb/

http://mars3d.cn/forcesium/started/started.html

法克鸡丝的：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

补充人家整理好的学习资料：

Cesium资料大全 https://zhuanlan.zhihu.com/p/34217817

Cesium资料大全 https://www.jianshu.com/p/dd364b59b774

转载本站文章《Cesium笔记(0)：Cesium简介及学习资料搜集》, 请注明出处：https://www.zhoulujun.cn/html/GIS/cesium/5668.html

gisCesium

0 人点赞