1. 概述
2. 实例
- 2.1. ImageryLayers.html
- 2.2. ImageryLayers.js
  - 2.2.1. 代码
  - 2.2.2. 解析
3. 结果

1. 概述

Cesium支持加载影像图层，主要是各种地图服务。这里就通过Cesium实现添加影像地图和中文注记。

2. 实例

2.1. ImageryLayers.html

HTML的代码比较简单，主要还是导入了组件cesium.js及其样式表widgets.css,两者都来自于cesium源代码；然后创建了一个名为cesiumContainer的div图层，并设定其样式；最后是导入了自己写的JS代码ImageryLayers.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">

    <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影像地图图层，显式的创建形式如下：

//默认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():

//全球影像中文注记服务

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()实现的：

imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({

    url : '../images/Cesium_Logo_overlay.png',

    rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)

}));

3. 结果

在浏览器运行，得到影像地图和中文标注：

图2：中文标注

本地的图片被放到特定的位置，我这里放到了武汉市附近：

图3：加载本地图片

这个示例一定要注意Cesium自带的Bing地图和天地图都要申请对应的key才能正常显示，这里我把我自己申请的key略去了。

图层