专栏首页代码编写世界Cesium案例解析(二)——ImageryLayers影像图层

Cesium案例解析(二)——ImageryLayers影像图层

目录

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略去了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cesium案例解析(八)——CesiumWidget简化窗体

    Cesium Widget这个案例展示了一个Cesium的简化窗体。在之前的案例中使用的都是Cesium.Viewer这个窗体组件,包含了非常丰富的组件内容。C...

    charlee44
  • Cesium案例解析(七)——Layers在线地图服务

    Cesium提供了一些在线地图服务的案例,这些案例都特别简单,只用几行代码就可以了。因此将他们整合成一个案例。

    charlee44
  • Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等。与常规的模型文件格式相比,最大的特...

    charlee44
  • Cesium基础使用介绍

    前言 最近折腾了一下三维地球,本文简单为大家介绍一款开源的三维地球软件——Cesium,以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示,这只是...

    魏守峰
  • Cesium案例解析(七)——Layers在线地图服务

    Cesium提供了一些在线地图服务的案例,这些案例都特别简单,只用几行代码就可以了。因此将他们整合成一个案例。

    charlee44
  • Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等。与常规的模型文件格式相比,最大的特...

    charlee44
  • Cesium 画贴地线

    使用Cesium加载线数据时,在关闭地形的情况下毫无问题,但在开启地形加载地形数据以后,由于地面将不再是平平整整,而是可能会坑坑洼洼,在这种情况下,因为线数据中...

    Melody132
  • Cesium案例解析(三)——Camera相机

    Cesium的Camera案例,展示了其关于漫游器镜头的控制,能够调整视图的位置。这里改进了一下这个实例,使之能够展示一些自己关注的兴趣点的情况,并总结遇到的问...

    charlee44
  • Cesium案例解析(九)——Rotatable2DMap旋转2D地图

    其中Viewer的配置项sceneMode可以指定3D、2D以及2.5D效果的地图。配置mapMode2D参数为Cesium.MapMode2D.ROTATE表...

    charlee44
  • EditText与仿钉钉的搜索功能

      仿钉钉的通讯录搜索,点击搜索框后,跳页面,直接让输入框获取焦点并且弹出软键盘,当用户输入内容后,点击软键盘上的搜索,隐藏软键盘并且显示列表。 总结需求如下...

    饮水思源为名

扫码关注云+社区

领取腾讯云代金券