Cesium开发基础篇 | 01加载影像数据

Cesium中的影像图层类

无论是二维地图还是三维地图,如果缺少了底图影像或电子地图,都是不完整的。Cesium为我们提供了ImageryLayerCollection、ImageryLayer以及相关的ImageryProvider类来加载不同的影像图层。虽然Cesium把此类图层叫做Imagery*,但并不是特指卫星影像数据,还包括一些互联网地图、TMS、WMS、WMTS、单个图片等。

ImageryLayer类

Cesium.ImageryLayer类用于表示Cesium中的影像图层,它就相当于皮毛、衣服,将数据源包裹在内,它需要数据源(imageryProvider)为其提供内在丰富的地理空间信息和属性信息。同时,通过该类还能设置影像图层相关属性,比如透明度、亮度、对比度、色调等。

ImageryProvider类

Cesium.ImageryProvider类及其子类封装了加载各种影像图层的方法,其中Cesium.ImageryProvider类是抽象类、基类或者可将其理解为接口,它不能被直接实例化。我们可以把ImageryProvider看作是影像图层的数据源(包裹在ImageryLayer类内部),我们想使用哪种影像图层数据或服务就用对应的ImageryProvider子类去加载,目前Cesium提供了以下14种ImageryProvider。


imageryProvider

ImageryLayerCollection类

Cesium.ImageryLayerCollection类是ImageryLayer类对象的容器,它可以装载、放置多个ImageryLayer或ImageryProvider类对象,而且它内部放置的ImageryLayer或ImageryProvider类对象是有序的。
Cesium.Viewer类对象中包含的imageryLayers属性就是ImageryLayerCollection类的实例,它包含了当前Cesium应用程序所有的ImageryLayer类对象,即所有影像图层,所以Cesium种的影像图层可以添加多个。

Cesium加载不同类型的影像图层

根据上面提供的Provider可知道,目前Cesium(1.75版本)支持14种类型的影像图层。

ArcGisMapServerImageryProvider

支持ArcGIS Online和Server的相关服务。

var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
      url:
        "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
    });
imageryLayers.addImageryProvider(arcgisProvider);

BingMapsImageryProvider

Bing地图影像,可以指定mapStyle,详见BingMapsStyle类。

 var bingStyle = [
      Cesium.BingMapsStyle.AERIAL_WITH_LABELS,
      Cesium.BingMapsStyle.COLLINS_BART,
      Cesium.BingMapsStyle.CANVAS_GRAY,
      Cesium.BingMapsStyle.CANVAS_LIGHT,
      Cesium.BingMapsStyle.CANVAS_DARK,
      Cesium.BingMapsStyle.ORDNANCE_SURVEY,
      Cesium.BingMapsStyle.ROAD,
      Cesium.BingMapsStyle.AERIAL,
    ];
var bingMapProvider = new Cesium.BingMapsImageryProvider({
      url: "https://dev.virtualearth.net", //’'https://dev.virtualearth.net',
      key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",
      mapStyle: bingStyle[7],
    });
imageryLayers.addImageryProvider(bingMapProvider);

GoogleEarthEnterpriseImageryProvider

使用谷歌Earth企业REST API提供瓦片图像,可与Google Earth Enterprise的3D Earth API一起使用。

 var geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata(
      "http://www.earthenterprise.org/3d"
    );
var googleEarthProvider = new Cesium.GoogleEarthEnterpriseImageryProvider({
      metadata: geeMetadata,
    });
imageryLayers.addImageryProvider(googleEarthProvider);

加载谷歌Earth的瓦片影像需要翻墙,这里就不截图了。

GridImageryProvider(开发调试)

展示内部渲染网格划分情况,了解每个瓦片的精细度,便于调试地形和图像渲染问题。

 var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
      url:
        "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
    });

    viewer.imageryLayers.addImageryProvider(arcgisProvider);
    var gridImagery = new Cesium.GridImageryProvider();
    var gridImageryLayer = viewer.imageryLayers.addImageryProvider(gridImagery);
    imageryLayers.raiseToTop(gridImageryLayer); //将图层置顶

IonImageryProvider

cesium Ion 在线服务,默认全局基础图像图层(当前为Bing Maps)。

 imageryLayers.addImageryProvider(
      new Cesium.IonImageryProvider({ assetId: 3954 })
    );

MapboxImageryProvider

Mapbox影像服务,根据mapId指定地图风格。

 var mapIds = [
      "mapbox.satellite",
      "mapbox.streets",
      "mapbox.streets-basic",
      "mapbox.light",
      "mapbox.streets-satellite",
      "mapbox.wheatpaste",
      "mapbox.comic",
      "mapbox.outdoors",
      "mapbox.run-bike-hike",
      "mapbox.pencil",
      "mapbox.pirates",
      "mapbox.emerald",
      "mapbox.high-contrast",
    ];
    imageryLayers.addImageryProvider(
      new Cesium.MapboxImageryProvider({
        mapId: mapIds[1],
        accessToken:
          "pk.eyJ1IjoibHM4NzAwNjEwMTEiLCJhIjoiY2tqYXZlZ2JrMDI5bTJzcDJmdDNteGhsNyJ9.0wTn4B1ce9Q4U5GnPso5iA",
      })
    );

MapboxStyleImageryProvider

Mapbox影像服务,根据styleId指定地图风格。

var styleIds = [
      "streets-v11",
      "outdoors-v11",
      "light-v10",
      "dark-v10",
      "satellite-v9",
      "msatellite-streets-v11",
    ];
    imageryLayers.addImageryProvider(
      new Cesium.MapboxStyleImageryProvider({
        styleId: styleIds[0],
        accessToken:
          "pk.eyJ1IjoibHM4NzAwNjEwMTEiLCJhIjoiY2tqYXZlZ2JrMDI5bTJzcDJmdDNteGhsNyJ9.0wTn4B1ce9Q4U5GnPso5iA",
      })
    );

OpenStreetMapImageryProvider

OSM影像服务,根据不同的url选择不同的风格。

 var osm = new Cesium.OpenStreetMapImageryProvider({
      url: "https://a.tile.openstreetmap.org/",
      minimumLevel: 0,
      maximumLevel: 18,
      fileExtension: "png",
    });
    imageryLayers.addImageryProvider(osm);

SingleTileImageryProvider

单张图片的影像服务,适合离线数据或对影像数据要求并不高的场景下。

 var imagelayer = new Cesium.SingleTileImageryProvider({
      url: "./images/worldimage.jpg",
    });
    imageryLayers.addImageryProvider(imagelayer);

TileCoordinatesImageryProvider(开发调试)

展示内部渲染网格瓦片划分情况,包括网格瓦片等级、X、Y序号,便于调试地形和图像渲染问题。当然也可以和GridImageryProvider一起叠加使用。

 var imagelayer = new Cesium.SingleTileImageryProvider({
      url: "./images/worldimage.jpg",
    });
    imageryLayers.addImageryProvider(imagelayer);
    var tileCoordinates = new Cesium.TileCoordinatesImageryProvider();
    var tileCoordinatesLayer = viewer.imageryLayers.addImageryProvider(tileCoordinates);
    imageryLayers.raiseToTop(tileCoordinatesLayer); //将图层置顶

TileMapServiceImageryProvider

访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles。

 var imagelayer = new Cesium.TileMapServiceImageryProvider({
      url: "//cesiumjs.org/tilesets/imagery/blackmarble",
      maximumLevel: 8,
    });
    imageryLayers.addImageryProvider(imagelayer);

UrlTemplateImageryProvider

指定url的format模版,方便用户实现自己的Provider.比如国内的高德,腾讯等影像服务,url都是一个固定的规范,都可以通过该Provider轻松实现。而OSM也是通过该类实现的,以下是使用XYZ方式加载上面加载过的OSM影像服务。

    const osmImageryProvider = new Cesium.UrlTemplateImageryProvider({
      url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      subdomains: ["a", "b", "c"],
    });
    imageryLayers.addImageryProvider(osmImageryProvider);

这里需要注意参数subdomains,它表示子域。subdomains参数数组中的四个值可以替换url中的{s},也就是改变不同的请求URL,从而提高加载数据的速度。

WebMapServiceImageryProvider

符合WMS规范的影像服务都可以通过该类封装,指定具体参数实现。

var provider = new Cesium.WebMapServiceImageryProvider({
      url:
        "https://nationalmap.gov.au/proxy/http://geoserver.nationalmap.nicta.com.au/geotopo_250k/ows",
      layers: "Hydrography:bores",
      parameters: {
        transparent: true,
        format: "image/png",
      },
    });
    imageryLayers.addImageryProvider(provider);

WebMapTileServiceImageryProvider

服务WMTS1.0.0规范的影像服务,都可以通过该类实现,比如国内的天地图。

var shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
      url:
        "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS",
      layer: "World_Imagery",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "default028mm",
      maximumLevel: 23,
    });
    imageryLayers.addImageryProvider(shadedRelief1);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容