home > GIS > cesium >

Cesium簡介及學習資料搜集

author:[email protected]    hits:

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


轉載本站文章《Cesium簡介及學習資料搜集》, 請注明出處:http://www.qsexmk.tw/html/GIS/cesium/5668.html

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