Cesium簡單使用

本文轉載自查看原文 2019-04-17 18:03 2040 gis/ 前端

CesiumJS是一個基於javascript的瀏覽器器3d地圖引擎

下載的Cesium-1.56.1，解壓后的結構為

1.設置Web服務器

為了運行Cesium的應用，需要一個本地Web服務器的主機文件

下載安裝所需要的模塊

npm install

啟動Web服務器

node server.js

注：

node server.js --port 8080 -- public 192.168.1.100

2.helloworld

新建html頁面並引用Cesium.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

cesiumContainer為html中的地圖顯示div的id

用瀏覽器打開 http://localhost:8080//Apps/HelloWorld.html

3.基本知識

（1）Viewer

Cesium的核心

可以在調用的時候添加參數，設置了地圖瀏覽中某個控件是否顯示

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否顯示動畫控件(左下方那個)
    baseLayerPicker: true, //是否顯示圖層選擇控件
    geocoder: true, //是否顯示地名查找控件
    timeline: true, //是否顯示時間線控件
    sceneModePicker: true, //是否顯示投影方式控件
    navigationHelpButton: false, //是否顯示幫助信息控件
    infoBox: true, //是否顯示點擊要素之后顯示的信息
});

baseLayerPicker——設置圖層選擇空間是否可見，如果設置不可見，則需要設置自定義圖層作為默認圖層。設置可見之后也可以更改其中的圖層為自定義圖層

var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false, //是否顯示動畫控件(左下方那個)
        baseLayerPicker: false, //是否顯示圖層選擇控件
        geocoder: false, //是否顯示地名查找控件
        timeline: false, //是否顯示時間線控件
        sceneModePicker: false, //是否顯示投影方式控件
        navigationHelpButton: false, //是否顯示幫助信息控件
        infoBox: true, //是否顯示點擊要素之后顯示的信息
});
//// 去除左下角的logo
viewer._cesiumWidget._creditContainer.style.display="none";

定義初始化時的鏡頭、視角
將鏡頭定位在濟南，經緯度為（117.13, 36.68）的地方，高度為1萬公里，下面的heading、pitch和roll就是鏡頭相對於xyz軸的角度，比如pitch為-90°而另外兩個為0時，就是90°向下俯視地球

viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, 10000000),
        orientation: {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-90),
            roll : Cesium.Math.toRadians(0)
        }
});

（2）圖層

　　分類：

　　　　普通圖層，包含影像、線划等普通顯示圖層；

　　　　地形圖層，用於真實的模擬地球表面的場景

　　在基本圖層上添加一個圖層

　　A.imageryLayers直接添加

　　在影像的基礎上疊加天地圖注記層，高度為10公里

viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(117.13, 36.68, 10000),
        orientation: {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-90),
            roll : Cesium.Math.toRadians(0)
        }
    });
    
    //加載影像注記
    var layer1= new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t7.tianditu.gov.cn/cia_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5',   
        layer:'cia', 
        style:'default',
        tileMatrixSetID:'w',
        format:'tiles',
        subdomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],
        maximumLevel: 18 
    });
    viewer.imageryLayers.addImageryProvider(layer1);

　　B.scene的imageryLayers

var my_layer = viewer.scene.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url : 'http://{s}.tianditu.gov.cn/img_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5',
            credit : '@123.',
            subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
            maximumLevel : 10
        })
);

　　圖層對象：

　　　　UrlTemplateImageryProvider

　　　　WebMapTileServiceImageryProvider

　　　　createTileMapServiceImageryProvider

　　　　SingleTileImageryProvider

　　eg:

　　　　 Esri ArcGIS 在線服務圖層

var layerProvider = new Cesium.WebMapTileServiceImageryProvider({
    url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
   baseLayerPicker: false, 
   imageryProvider: layerProvider
});

（3）默認圖層設置

　　可以設置baseLayerPicker為false或true來控制圖層選擇控件是否可見

　　當設置為false的時候可以在創建viewer時添加一項來設置默認顯示的底圖，否則仍然顯示微軟的默認影像

var viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker: false, //是否顯示圖層選擇控件
        imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t7.tianditu.gov.cn/vec_w/wmts?tk=10e4a33383d86f868e6c5748e8f6cbb5",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        })
    });

（4）坐標

　　坐標系

　　屏幕坐標系——二維

　　三維空間坐標

new Cesium.Cartesian2(1,1) //表示一個二維笛卡爾坐標系，也就是直角坐標系（屏幕坐標系） 
new Cesium.Cartesian3(1,1,1) //表示一個三維笛卡爾坐標系，也是直角坐標系(就是真實世界的坐標系)

　　二維到三維

var pick1= scene.globe.pick(viewer.camera.getPickRay(pt1), scene) //其中pt1為一個二維屏幕坐標。

　　三維到地理坐標

var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) //其中pick1是一個Cesium.Cartesian3對象。

　　地理坐標到經緯度

var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180]; //其中geoPt1是一個地理坐標。

　　經緯度轉地理坐標

var cartographic = Cesium.Cartographic.fromDegree(point) //point是經緯度值
var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//單位：度，度，米

　　經緯度轉三維

var cartesian = Cesium.Cartesian3.fromDegree(point)

　　計算距離（三維）

var d = Cesium.Cartesian3.distance(
    new Cesium.Cartesian3(pick1.x, pick1.y, pick1.z), 
    new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z)
); //pick1、pick3都是三維坐標系

（5）加載3D對象（Entity）

　　通過Cesium將一個三維模型加載到地球中

　　A.直接添加

var entity = viewer.entities.add({ 
        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), 
        model : { uri : '../Apps/SampleData/models/ShadowTester/Shadow_Tester.gltf' }
    });
viewer.trackedEntity = entity; // 鏡頭追蹤，將鏡頭固定在對象上

　　B.添加primitives

var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-123.0745725, 44.0503706));
var model = scene.primitives.add(Cesium.Model.fromGltf({
    url: '../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
    //以下這些信息也均可在entity中設置
    color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)),//模型顏色，透明度
    silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)),//輪廓線
    colorBlendMode : Cesium.ColorBlendMode.MIX,//模型樣式['Highlight', 'Replace', 'Mix']
    modelMatrix: modelMatrix,
    minimumPixelSize : 256, // 最小的縮放尺寸，256個像素，就是一個瓦片的尺寸。
    maxiumScale: 2 // 最大的縮放倍數
}));
//添加動畫
Cesium.when(model.readyPromise).then(function (model) {
    model.activeAnimations.addAll({
        loop: Cesium.ModelAnimationLoop.REPEAT,//控制重復
        speedup: 0.5, // 速度，相對於clock
        reverse: true // 動畫反轉
    })
});

（6）加載矢量數據

　　　當然數據量特別大的時候就需要考慮矢量瓦片

　　　先讀取矢量瓦片而后轉換成GeoJson進行加載

　　　A.GeoJson是較為通用的一種網絡矢量數據傳輸方案

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../Specs/Data/test.geojson', {
        stroke: Cesium.Color.BLUE.withAlpha(0.8),
        strokeWidth: 2.3,
        fill: Cesium.Color.RED.withAlpha(0.3),
        clampToGround : true
    }
));

　　 Cesium.GeoJsonDataSource.load函數即為加載geojson數據，並配置相關屬性。

　　通過這種方式就可將數據加載到三維地球中，並設置邊線以及填充等，clampToGround用於設置對象是否貼着地形，如為true則對象會隨地勢起伏而變化。

Cesium.Math.setRandomNumberSeed(0);

var promise = Cesium.GeoJsonDataSource.load('../Specs/Data/test.geojson'); // load完之后即為一個promise對象
promise.then(function(dataSource) { // 此處類似於添加3D對象中的動畫。
    viewer.dataSources.add(dataSource); // 先添加對象

    var entities = dataSource.entities.values; // 獲取所有對象

    var colorHash = {};
    for (var i = 0; i < entities.length; i++) { // 逐一遍歷循環
        var entity = entities[i];
        var name = entity.properties.GB1999; // 取出GB1999屬性內容
        var color = colorHash[name]; // 如果GB1999屬性相同，則賦同一個顏色。
        if (!color) {
            color = Cesium.Color.fromRandom({
                alpha : 1.0
            });
            colorHash[name] = color;
        }
        entity.polygon.material = color; // 設置polygon對象的填充顏色
        entity.polygon.outline = false; // polygon邊線顯示與否

        entity.polygon.extrudedHeight = entity.properties.POPU * 1000; // 根據POPU屬性設置polygon的高度
    }
});
viewer.zoomTo(promise);

　　　先load數據，而后逐一設置load后數據的entity

　　　B.KML是Google Earth定義的一種矢量數據組織方式

var promise = Cesium.KmlDataSource.load('SampleData/kml/eiffel-tower-flyto.kml');

　　　使用

dataSource = new Cesium.KmlDataSource();
var kmz = '../Specs/Data/KML/multilevel.kmz';
var promise = dataSource.load(kmz);
promise.then(function(dataSource) { // 此處類似於添加3D對象中的動畫。
    viewer.dataSources.add(dataSource); // 先添加對象
});
viewer.zoomTo(promise);

　　c.CZML

　　CZML是一種JSON格式的字符串，用於描述與時間有關的動畫場景，CZML包含點、線、地標、模型、和其他的一些圖形元素，並指明了這些元素如何隨時間而變化。

dataSource = new Cesium.CzmlDataSource();
var czml = 'SampleData/ClampToGround.czml'; 
dataSource.load(czml); viewer.dataSources.add(dataSource);

　　　　使用

Cesium.Math.setRandomNumberSeed(0);
dataSource = new Cesium.CzmlDataSource();
    var czml = 'SampleData/ClampToGround.czml';
var promise = dataSource.load(czml);
promise.then(function(dataSource) { 
    viewer.dataSources.add(dataSource); 
});
viewer.zoomTo(promise);

（7）加載3D Tile

　　　3D瓦片可以顯示建築物、地標乃至森林廣告牌等等以及其對應的屬性信息。

　　　每個3D瓦片就是一個3D對象，具體的數據范圍等等信息在tileset.json中定義。

var tileSet = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        // 同樣url只定義編號前面的部分，具體的編號（數字或者非數字都有可能）在此URL下的tileset.json文件中定義，包括此3d瓦片圖層的范圍等等。
        url:'SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json'
}));
tileSet.readyPromise.then(function (tileset) {
        viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0));
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
});

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 cesium編程入門（三）開始使用cesium開發 Cesium基礎使用介紹 Cesium中DrawCommand使用【轉】 github中cesium-terrain-builder和cesium-terrain-server使用 Cesium快速上手2-Model圖元使用講解 Cesium入門5 - Cesium ion Cesium之Cesium3DTileStyle cesium的學習 Cesium 事件 cesium入門1