08 Cesium—影像服务-1

WorkLee

已于 2022-03-25 17:08:47 修改

阅读量537

点赞数 1

分类专栏： Cesium 文章标签： GIS cesium

于 2022-03-23 15:37:27 首次发布

本文链接：https://blog.csdn.net/lili40342/article/details/123687833

版权

Cesium 专栏收录该内容

22 篇文章 27 订阅

订阅专栏

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

影像服务 1

相关介绍请移步影像服务介绍，这里先介绍其中几个在线服务，包括：ArcGisMapServerImageryProvider、BingMapsImageryProvider、OpenStreetMapImageryProvider、MapboxImageryProvider 和 MapboxStyleImageryProvider。

ArcGisMapServerImageryProvider

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

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
    enablePickFeatures: false //是否点击地图获取查询图层的要素，默认为true
});

viewer.imageryLayers.addImageryProvider(arcgisProvider);

//设置初始位置
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 3000000)
});

效果如下：

BingMapsImageryProvider

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

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

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 bingProvider = new Cesium.BingMapsImageryProvider({
	url: "bing地图影像服务地址", //例如：https://dev.virtualearth.net
	key: "bing授权的key", //需要注册账号
	mapStyle: bingStyle[0] //可以指定mapStyle，详见BingMapsStyle类
});

viewer.imageryLayers.addImageryProvider(bingProvider);

效果如下（作者从网上撬了一个key试了试还能行，仅展示效果）：

OpenStreetMapImageryProvider

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

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

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

viewer.imageryLayers.addImageryProvider(osmProvider);

//设置初始位置
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});

效果如下：

MapboxImageryProvider

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

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

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",
];

var mapboxProvider = new Cesium.MapboxImageryProvider({
    mapId: mapIds[0],
    accessToken: "Mapbox授权的accessToken" //这里不展示这个token了
});

viewer.imageryLayers.addImageryProvider(mapboxProvider);

//设置初始位置
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});

效果如下：

MapboxStyleImageryProvider

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

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

var styleIds = [
    "streets-v11",
    "outdoors-v11",
    "light-v10",
    "dark-v10",
    "satellite-v9",
    "msatellite-streets-v11"
];

var mapboxstyleProvider = new Cesium.MapboxStyleImageryProvider({
    styleId: styleIds[0],
    accessToken: "Mapbox授权的accessToken" //这里不展示这个token了
});

viewer.imageryLayers.addImageryProvider(mapboxstyleProvider);

//设置初始位置
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});