Cesium案例解析(二)——ImageryLayers影像圖層

時間 2019-12-22

標籤 cesium 案例解析 imagerylayers 像圖简体版

原文原文鏈接

目錄javascript

1. 概述

Cesium支持加載影像圖層，主要是各類地圖服務。這裏就經過Cesium實現添加影像地圖和中文註記。css

2. 實例

2.1. ImageryLayers.html

HTML的代碼比較簡單，主要仍是導入了組件cesium.js及其樣式表widgets.css,二者都來自於cesium源代碼；而後建立了一個名爲cesiumContainer的div圖層，並設定其樣式；最後是導入了本身寫的JS代碼ImageryLayers.js。html

<!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">
    <meta name="description" content="Create imagery layers from multiple sources.">
    <meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" 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;
            font-family: sans-serif;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <script src="ImageryLayers.js"></script>
</body>

</html>

2.2. ImageryLayers.js

2.2.1. 代碼

//Add your ion access token from cesium.com/ion/ 
Cesium.Ion.defaultAccessToken = '你申請的key';

'use strict';

//默認BING影像地圖
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: Cesium.createWorldImagery({
        style: Cesium.IonWorldImageryStyle.AERIAL
    }),
    baseLayerPicker: false
});

//全球影像中文註記服務
var imageryLayers = viewer.scene.imageryLayers;
var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=d99ffacb3eeafd378927c060ab39bdab",    
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible" 
}));

//tdtAnnoLayer.alpha = 0.5;
//tdtAnnoLayer.brightness = 2.0;

imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
}));

2.2.2. 解析

默認狀況下，當建立Cesium.Viewer的時候，就包含了一個在線Bing影像地圖圖層，顯式的建立形式以下：java

//默認BING影像地圖
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: Cesium.createWorldImagery({
        style: Cesium.IonWorldImageryStyle.AERIAL
    }),
    baseLayerPicker: false
});

函數Cesium.createWorldImagery()能夠直接建立帶標註的圖層，只要把這裏的AERIAL修改成AERIAL_WITH_LABELS便可。惋惜這裏的標註是英文標註。瀏覽器

能夠經過天地圖來實現中文註記功能，天地圖採用的是OGC的WMTS標準，Cesium中正好提供了相應的接口Cesium.WebMapTileServiceImageryProvider():ide

//全球影像中文註記服務
var imageryLayers = viewer.scene.imageryLayers;
var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=您的密鑰",    
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible" 
}));

//tdtAnnoLayer.alpha = 0.5;
//tdtAnnoLayer.brightness = 2.0;

能夠看到新建的圖層被添加到當前場景scene的圖層集合對象readonlyimageryLayers中，它是一個Cesium.ImageryLayerCollection對象，用來管理圖層對象Cesium.ImageryLayer。經過這個對象，能夠設置當前圖層的透明度、亮度、對比度等，對於圖層的融合特別有用：函數

圖1：Cesium.ImageryLayer參數

除此以外，還能夠直接把一張本地（域內）的圖片做爲圖層添加到特定的位置，是經過另一個建立Cesium.ImageryLayer的接口Cesium.SingleTileImageryProvider()實現的：ui

imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : '../images/Cesium_Logo_overlay.png',
    rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
}));