IonWorldImageryStyle是一种CesiumJS的内置ImageryLayer搭配IonImageryProvider使用的全球地形及卫星图像样式,通过使用IonWorldImageryStyle可以轻松访问高清质量的地形和卫星图像数据,创建高质量的三维视图展示。
要使用IonWorldImageryStyle,首先需要引入CesiumJS库和Ion.js库:
<script src="https://unpkg.com/cesium/Build/Cesium/Cesium.js"></script>
<script src="https://unpkg.com/cesium-ion-sdk/Ion.js"></script>
然后,在创建Cesium Viewer的过程中,可以通过设置imageryProvider属性来使用IonWorldImageryStyle:
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
})
});
在使用IonWorldImageryStyle时,可以通过以下属性进行配置:
该属性表示使用全球地形和卫星数据创建的高分辨率空中图像,包括道路、城市、航拍照片、地形等多种图像数据,可呈现出引人入胜的全球视图。
Cesium.IonWorldImageryStyle.AERIAL;
该属性表示使用全球地形和卫星数据创建的高分辨率空中图像,包括道路、城市、航拍照片、地形等多种图像数据,并添加了标签和注释等文本信息,帮助用户更好地了解地图信息。
Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS;
该属性表示使用全球地形和卫星数据创建的高分辨率道路图像,适用于需要展示道路、交通信息或者其他人行或车行标记信息的场景。
Cesium.IonWorldImageryStyle.ROAD;
该属性表示使用Natural Earth卫星图像创建的无标签图像,色彩鲜艳,适合于展现自然景色、水体、陆地轮廓等信息。
Cesium.IonWorldImageryStyle.NATURAL_EARTH;
该属性表示使用Natural Earth卫星图像创建的带标签图像,标签包括河流、湖泊、山脉、高原等自然地理信息,以及行政区域、国家、城市等信息。
Cesium.IonWorldImageryStyle.NATURAL_EARTH_II;
该属性表示使用OpenStreetMap数据创建的道路图像,包括路网、建筑物等信息,是一种开源的地图数据。
Cesium.IonWorldImageryStyle.OPEN_STREET_MAP;
以下代码示例演示了如何在CesiumJS中使用IonWorldImageryStyle创建全球地形和卫星图像:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cesium IonWorldImageryStyle Example</title>
<script src="https://unpkg.com/cesium/Build/Cesium/Cesium.js"></script>
<script src="https://unpkg.com/cesium-ion-sdk/Ion.js"></script>
<style>
@import url(https://unpkg.com/cesium/Build/Cesium/Widgets/widgets.css);
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
}),
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
fullscreenButton: false,
navigationHelpButton: false,
infoBox: false,
selectionIndicator: false,
timeline: false
});
</script>
</body>
</html>