@yanbo01haomiao 2019-03-28T22:09:39.000000Z 字数 2302 阅读 563

Cesium笔记

笔记

Cesium笔记

引入使用

Cesium简介

官网
 Github地址
官方API文档：hello world - cesium

An open-source JavaScript library for world-class 3D globes and maps.

非常简洁：Cesium是一款开源的基于JS的3D地图框架。其实Cesuim就是一个地图可视化框架，与Leaft-let以及OpenLayer等没有本质的区别，只是Cesium支持三维场景，做的更漂亮。

下载引入

最简单的安装方式，就是普通的JS文件加载，只需要从Github中下载其js代码，放到自己的项目中，在html页面中引用即可。
Cesium.js及其依赖, 如果是下载这里的版本，JS文件放在 Build/Cesium 目录下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cesium引入</title>
    <script src="Cesium/Cesium.js"></script>
    <style>
        @import url(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>
    viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>

cesiumContainer为html中的地图显示div的id。浏览器打开上述html页面，便可看到一个三维地球。底图为微软影像只是加载到了三维地球上，包含放大、缩小、平移等基本在线地图功能，同时还包含了时间轴等与时间有关的控件，这是Cesium的一个特色，其地图、对象以及场景等能与时间相关联(在展示动态地图时有效)。

核心类及其方法

Viewer

new Cesium.Viewer(container, options)

Viewer是Cesium的核心，前面的一行代码实现了基本框架的加载，我们可以为其添加参数，实现不同类型的地图加载。详细参数选择请参照开发文档。

viewer = new Cesium.Viewer('cesiumContainer',{
    animation: false, //是否显示动画控件(左下角)
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏控件，仅仅在非正常缩放时显示
    geocoder: true, //是否显示地名查找控件
    homeButton: true, //是否显示回到当前所在地控件
    sceneModePicker: true, //是否显示投影方式控件：2D,columebus view
    navigationHelpButton: false, //是否显示右上角帮助信息控件
    infoBox: true, //是否显示点击要素之后显示的信息
    timeline: false, //是否显示时间线控件
});
//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

其中baseLayerPicker项，他可以设置图层选择空间是否可见，如果设置不可见，则需要设置自定义图层作为默认图层。当然设置可见之后也可以更改其中的图层为自定义图层。

图层

Cesium中的图层分为两种：一种是普通图层，包含影像、线划等普通显示图层；还有一种是地形图层，用于真实的模拟地球表面的场景，Cesium会根据加载到的地形瓦片以三维的方式显示出山川、大海等。

在Cesium中如何创建一个图层。

第一种方式可以直接在基本图层上添加一个图层，如注记等等。当然也可以添加其他已知商业地图的图层或者自定义地图，但是需要做好CORS跨域访问问题。实例：叠加天地图。

全球影像中文注记服务

访问国家地理信息公告服务平台注册称为开发者即可使用API服务。开发者创建服务后获取key。其他地图信息服务也可查询其开发文档。

var my_key = '&tk=你的平台服务key'
//全球影像中文注记服务
var my_layer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg"+my_key,
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: false
}));

参考资料

Cesium基础使用介绍 https://www.cnblogs.com/miaosen/p/8390945.html
待补充