Cesium--Viewer

822 阅读4分钟

描述Viewer

Viewer是地图可视化展示的主窗口,Cesium 程序应用的切入口,是 Cesium 中的核心类,开发中我们常用来初始化地图,控制图层的添加、删除等,是较为频繁调用的API

创建 Viewer

new Cesium.Viewer(container, options);

第一个参数:地图容器的 id

第二个参数:初始化地图选项

    let viewer = new Cesium.Viewer('myMap', {
        selectionIndicator: false, // 是否显示选中地图元素标识控件
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        homeButton: false, // 是否显示主页控件
        fullscreenButton: false // 是否显示全屏控件
    })
  • selectionIndicator 是否显示选中地图元素标识控件,默认为 true image.png

  • animation 是否显示动画控件,默认为 true

image.png

  • baseLayerPicker 是否显示图层选择控件,默认为 true

image.png

  • geocoder 是否显示地名查找控件,默认为 true

image.png

  • timeline 是否显示时间线控件,默认为 true

image.png

  • sceneModePicker 是否显示投影方式控件,默认为 true

image.png

  • navigationHelpButton 是否显示帮助信息控件,默认为 true

image.png

  • infoBox 是否显示点击要素之后显示的信息,默认为 true

image.png

  • homeButton 是否显示主页控件,默认为 true

image.png

  • fullscreenButton 是否显示全屏控件,默认为 true

image.png

  • 版权信息

image.png

Viewer - camera 控制

相机是 viewer.scene 中的属性,用来控制当前可见的视角区域。我们可以通过直接设置它的位置和方向来控制相机

一些常用的方法:

Camera.setView(options):在特定位置和方向立即设置相机
Camera.zoomIn(amount):沿着视角矢量移动摄像机
Camera.zoomOut(amount)]:沿视角矢量向后移动摄像机
Camera.flyTo(options):创建从当前相机位置到新位置的动画相机飞行
Camera.lookAt(target, offset):定位并定位摄像机以给定偏移量瞄准目标点
Camera.move(direction, amount):朝任何方向移动摄像机
Camera.rotate(axis, angle):绕任意轴旋转相机

heading,pitch,roll

Heading 是高度

Pitch 是围绕Y轴旋转

Roll 是围绕X轴旋转

image.png

setView

Cartesian3 3D笛卡尔坐标

 viewer.camera.setView({
           destination: Cesium.Cartesian3.fromDegrees(-85.16, 13.71, 23000000.0), 
           orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
  }
});

Cartographic 由经度,纬度和高度定义的位置

camera.setView( {
    positionCartographic : new Cesium.Cartographic( longitude, latitude, height), 
    heading : headingAngle,
    pitch : pitchAngle,
    roll : rollAngle
} );

Rectangle 指定为经度和纬度坐标的二维区域

 viewer.camera.setView({
           destination: : Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),
           orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
  }
});

flyTo

viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.435314, 39.960521, 15000.0),
            orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
          }
            duration: 2, // 设置飞行持续时间,默认会根据距离来计算
            maximumHeight:5000 // 相机最大飞行高度
            easingFunction: _Cesium2.default.EasingFunction.LINEAR_NONE,
            flyOverLongitude:100  // 如果到达目的地有2种方式,设置具体值后会强制选择方向飞过这个经度(这个,很好用)
            complete: function complete() {
                var z = (view.z || 90000) * 1.2 + 8000;// 到达位置后执行的回调函数
            }
        });

viewer - imageryLayers 图层

    // 加载 WMTS 服务
    var WMTSserve = new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS/tile/1.0.0/USGSShadedReliefOnly/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg',
        layer: 'USGSShadedReliefOnly', // 请求的层名称
        style: 'default', // 请求的样式名称
        format: 'image/jpeg', // 要从服务器检索的图像的MIME类型
        tileMatrixSetID: 'default028mm', // 用于WMTS请求的TileMatrixSet的标识符
        maximumLevel: 19, // 图像提供者支持的最大详细程度
        credit: new Cesium.Credit('U. S. Geological Survey') // 数据源的信用,显示在画布上
    });
    viewer.imageryLayers.addImageryProvider(WMTSserve);

图像数据太大,无法放入内存,甚至无法放入单个磁盘,因此图像被划分为较小的图像,称为tiles(瓦片),可以根据视图将图像流传输到客户端

  • Web Map Service (WMS) - OGC标准,用于从分布式地理空间数据库中请求地理区域的地图块

  • Tile Map Service (TMS) - 访问瓦片图的Rest接口。瓦片图被转换为 MapTilerGDAL2Tiles

  • OpenGIS Web Map Tile Service (WMTS) - 一个OGC标准,用于在互联网上提供预先绘制的地理参考瓦片图。在Cesium中

  • OpenStreetMap - 访问 OpenStreetMap 瓦片图或任何Slippy瓦片图

  • Bing Maps - 使用 Bing Maps REST Services 访问瓦片图

  • Esri ArcGIS MapServer - 使用 ArcGIS Server REST API 来访问ArcGIS MapServer上的瓦片图

  • Google Earth Enterprise - 提供对存储 Google Earth Enterprise 服务器中的图层的访问

  • Mapbox - 使用 Mapbox API 访问瓦片图. 创建一个账户并提供 access token

  • Standard image files - 从图片中创建图层

  • Custom tiling schemes - 使用 UrlTemplateImageryProvider ,通过使用URL模板,我们可以连接到大量图像源

  • Tile coordinates - 通过绘制每个瓦片图周围的边界并用其水平、X和Y坐标标记它,显示如何在特定的瓦片方案中将地球划分为多个瓦片图