2、Cesium学习之添加基本图层(adding Imagery Layers))
1、实例
var viewer = new Cesium.Viewer("cesiumContainer", {
//imageryProvider:使用的图像提供程序。仅当“baseLayerPicker”设置为false时，此值才有效。
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
}),
//createWorldImagery函数
//作用：为ion的默认全局基本图像层（当前为Bing地图）创建IonImageryProvider实例
//参数是一个对象，对象只有一个style属性，属性值为：IonWorldImageryStyle类型的数据(枚举类型,目前只有三个值：AERIAL, AERIAL_WITH_LABELS, 和 ROAD )
baseLayerPicker: false,//不显示底图切换小部件
});
//通过imageryLayers获取图层列表集合
var layers = viewer.scene.imageryLayers;
//图层列表集合的addImageryProvider方法:
//两个参数，第一参数是一个ImageryProvider函数，这个函数的作用是新建一个图层;第二个参数是index，Number类型，作用是指定新插入图层在图层列表集合中的索引(位置)，若不指定，默认新图层添加在最上层
//返回值是新添加到图层列表集合中的图层
var blackMarble = layers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3812 })
);
//ImageryProvider是一个抽象类，不能直接实例化，但有多个子类,如下：
//ArcGisMapServerImageryProvider
//BingMapsImageryProvider
//OpenStreetMapImageryProvider
//TileMapServiceImageryProvider
//GoogleEarthEnterpriseImageryProvider
//GoogleEarthEnterpriseMapsProvider
//GridImageryProvider
//IonImageryProvider
//MapboxImageryProvider
//MapboxStyleImageryProvider
//SingleTileImageryProvider
//TileCoordinatesImageryProvider
//UrlTemplateImageryProvider
//WebMapServiceImageryProvider
//WebMapTileServiceImageryProvider
//本例中使用的是IonImageryProvider子类，它是Cesium提供的REST api，用于提供平铺图像
//IonImageryProvider只有一个参数，参数类型是一个对象，对象属性值有三个：
//1、assetId,Number类型，指定获取平铺图像资源的assetId
//2、accessTokem,String类型，可选参数，默认值是默认的访问令牌，要使用的访问令牌（这个访问令牌就和天地图密钥一样）
//3、server,String或Resource类型，可选参数，默认值是默认服务，指定的是Cesium api服务器上的资源
//get或set图层透明度，范围是0-1
blackMarble.alpha = 0.5;
//get或set图层亮度，小于1图层更暗，大于1更亮
blackMarble.brightness = 2.0;
layers.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../images/Cesium_Logo_overlay.png",
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
})
);
//SingleTileImageryProvider也是ImageryProvider的一个字类
//参数只有一个，参数类型为Object
//该Object有四个属性
//1、url，String类型或Resource,图像资源地址
//2、rectangle:Rectangle类型，可选参数，默认值为Rectangle.MAX_VALUE,作用：图像覆盖的矩形（以弧度为单位）
//3、credit:String或Credit类型，可选参数，作用：数据源的信息(数据的一些说明信息，比如数据来源啊（xxx提供）)，显示在画布上
//4、ellipsoid:Ellipsoid类型，可选参数，作用：椭球体。如果未指定，则使用WGS84椭球体
2、亲测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css"
rel="stylesheet">
</head>
<style>
* {
margin: 0;
padding: 0;
}
button {
height: 70px;
width: 300px;
margin-right: 50px;
}
</style>
<body>
<div style="margin-bottom: 100px;">
<div style="display: flex;">
<div id="cesiumContainer1" style="height: 700px;margin-right: 10px;flex: 1;"><span
style="z-index: 2000;">默认</span>
</div>
<div id="cesiumContainer2" style="height: 700px;margin-right: 10px;flex: 1;"><span
style="z-index: 2000;">遥感影像</span>
</div>
<div id="cesiumContainer3" style="height: 700px;margin-right: 10px;flex: 1;"><span
style="z-index: 2000;">带有道路覆盖的遥感影像</span></div>
<div id="cesiumContainer4" style="height: 700px;margin-right: 10px;flex: 1;"><span
style="z-index: 2000;">道路影像</span>
</div>
</div>
<div id="creditContainer1" style="display: none;"> </div>
<div id="creditContainer2" style="display: none;"> </div>
<div id="creditContainer3" style="display: none;"> </div>
<div id="creditContainer4" style="display: none;"> </div>
</div>
<button id="btnImage">添加Ion影像服务</button>
<button id="btn"> 设置透明度为0.5和亮度为2</button>
<button id="btnSingleImage">添加SingleTileImage</button>
</body>
<script>
let viewer1 = new Cesium.Viewer('cesiumContainer1', {
timeline: false,
animation: false,
navigationHelpButton: false,
fullscreenButton: false,
baseLayerPicker: false,
creditContainer: 'creditContainer1',
geocoder: false,
})
let viewer2 = new Cesium.Viewer('cesiumContainer2', {
timeline: false,
animation: false,
navigationHelpButton: false,
fullscreenButton: false,
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
}),
baseLayerPicker: false,
creditContainer: 'creditContainer2',
geocoder: false
})
let viewer3 = new Cesium.Viewer('cesiumContainer3', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
}),
timeline: false,
animation: false,
navigationHelpButton: false,
fullscreenButton: false,
baseLayerPicker: false,
creditContainer: 'creditContainer3',
geocoder: false
})
let viewer4 = new Cesium.Viewer('cesiumContainer4', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.ROAD
}),
timeline: false,
animation: false,
navigationHelpButton: false,
fullscreenButton: false,
baseLayerPicker: false,
creditContainer: 'creditContainer4',
geocoder: false
})
</script>
<script>
document.getElementById('btn').disabled = true
let blackMarble1, blackMarble2, blackMarble3, blackMarble4
let layers1 = viewer1.scene.imageryLayers,
layers2 = viewer2.scene.imageryLayers,
layers3 = viewer3.scene.imageryLayers,
layers4 = viewer4.scene.imageryLayers
document.getElementById('btnImage').onclick = function addImageryService() {
blackMarble1 = layers1.addImageryProvider(
new Cesium.IonImageryProvider({
assetId: 3812
})
);
blackMarble2 = layers2.addImageryProvider(
new Cesium.IonImageryProvider({
assetId: 3812
})
);
blackMarble3 = layers3.addImageryProvider(
new Cesium.IonImageryProvider({
assetId: 3812
})
);
blackMarble4 = layers4.addImageryProvider(
new Cesium.IonImageryProvider({
assetId: 3812
})
);
document.getElementById('btnImage').disabled = true
document.getElementById('btn').disabled = false
}
document.getElementById('btn').onclick = function change() {
blackMarble1.alpha = 0.5;
blackMarble1.brightness = 2.0;
blackMarble2.alpha = 0.5;
blackMarble2.brightness = 2.0;
blackMarble3.alpha = 0.5;
blackMarble3.brightness = 2.0;
blackMarble4.alpha = 0.5;
blackMarble4.brightness = 2.0;
console.log('设置成功')
}
document.getElementById('btnSingleImage').onclick = () => {
layers1.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../Source/Assets/Images/ion-credit.png",
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
})
);
layers2.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../Source/Assets/Images/ion-credit.png",
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
})
);
layers3.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../Source/Assets/Images/ion-credit.png",
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
})
);
layers4.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: "../Source/Assets/Images/ion-credit.png",
rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
})
);
}
</script>
</html>