-->

臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > WEB框架 >cesium > Cesium影像服务- 添加图层

Cesium影像服务- 添加图层

所属分类: cesium   2019-03-04 14:03:26  编辑:admin  浏览次数 584 次

Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离,Cesium会去请求和渲染不同层级的图层详细信息。

多种图层能够被添加、移除、排序和适应到Cesium中。

Cesium提供了一系列方法用于处理图层,比如颜色自适应,图层叠加融合。一些样例代码如下:

Cesium提供了各种接口支持各样的图层数据源。

支持的图层格式

  1. wms

  2. TMS

  3. WMTS (with time dynamic imagery)

  4. ArcGIS

  5. Bing Maps

  6. Google Earth

  7. Mapbox

  8. OpenStreetMap

注意:不同的数据源需要不同的认证 - 需要确保自己能够有权限访问到这些数据源,自然地需要注册特定的认证才可以

默认地,Cesium使用Bing Maps作为默认的图层。这个图层被打包进Viewer中用于演示。Cesium需要您自己创建ion account然后生成一个access key用于访问图层数据。

在接下来的例子中,将使用Cesium ion中的Sentinel-2图层。

去Cesium ion页面,将Sentinel-2图层加入到自己的assets中。点击在导航栏中点击“Asset Depot” 

点击“Add to my assets”。Sentinel-2将在你个人用户中的asset列表(My Assets)中出现,此时将在个人的app中图层数据源变得可用。

代码级别:我们创建一个IonImageryProvider,将assetId传给对应的Sentinel-2图层。然后我们将ImageryProvider添加到viewer.imageryLayers

// Remove default base layerviewer.imageryLayers.remove(viewer.imageryLayers.get(0));// Add Sentinel-2 imageryviewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

1ArcGisMapServerImageryProvider
支持ArcGIS Online和Server的相关服务
2BingMapsImageryProvider
Bing地图影像,可以指定mapStyle,详见BingMapsStyle类
3createOpenStreetMapImageryProvider
OSM影像服务,根据不同的url选择不同的风格
4createTileMapServiceImageryProvider
看文档是根据MapTiler规范,貌似是可以自己下载瓦片,发布服务,类似ArcGIS影像服务的过程
5GoogleEarthEnteriseImageryProvider
企业级服务,没有用过
6GoogleEarthEnteriseMapsProvider
企业级服务,没有用过
7GridImageryProvider
渲染每一个瓦片内部的格网,了解每个瓦片的精细度
8MapboxImageryProvider
Mapbox影像服务,根据mapId指定地图风格
9SingleTileImageryProvider
单张图片的影像服务,适合离线数据或对影像数据要求并不高的场景下
10TileCoordinatesImageryProvider
渲染每一个瓦片的围,方便调试
11UrlTemplateImageryProvider
指定url的format模版,方便用户实现自己的Provider,比如国内的高德,腾讯等影像服务,url都是一个固定的规范,都可以通过该Provider轻松实现。而OSM也是通过该类实现的。
12WebMapServiceImageryProvider
符合WMS规范的影像服务都可以通过该类封装,指定具体参数实现
13WebMapTileServiceImageryProvider
服务WMTS1.0.0规范的影像服务,都可以通过该类实现,比如国内的天地图
本篇开始介绍cesium的在线服务功能,包括:ArcGisMapServerImageryProvider、BingMapsImageryProvider、createOpenStreetMapImageryProvider、MapboxImageryProvider这四类。
以下为测试代码:
    //一: ArcGisMapServerImageryProvider 
    var esri = new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        enablePickFeatures: false
    });
    //二: BingMapsImageryProvider 不可用!
    var bing = new Cesium.BingMapsImageryProvider({
        url: 'https://dev.virtualearth.net',
        key: 'get-yours-at-https://www.bingmapsportal.com/',
        mapStyle: Cesium.BingMapsStyle.AERIAL
    });
    //三: createOpenStreetMapImageryProvider 
    var osm = Cesium.createOpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/'
    });
    //四: MapboxImageryProvider  提供了mapbox.satellite、mapbox.streets、mapbox.streets-basic 三种风格 basic不行
    var mbox = new Cesium.MapboxImageryProvider({
        mapId: 'mapbox.satellite'
    });
 
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: mbox,
        contextOptions: {
            webgl: {
                alpha: true
            }
        },
        creditContainer: "creditContainer",
        selectionIndicator: false,
        animation: false,  //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false,  //是否显示点击要素之后显示的信息
        fullscreenButton: true
    });


Web文章检索

Web文章目录