2、Cesium学习之添加基本图层(adding Imagery Layers))

最新推荐文章于 2024-05-29 14:47:38 发布

不收藏找不到我

最新推荐文章于 2024-05-29 14:47:38 发布

阅读量2.6k

点赞数 1

分类专栏： Cesium

本文链接：https://blog.csdn.net/weixin_41364246/article/details/115008282

版权

Cesium 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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>

不收藏找不到我

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
2、Cesium学习之添加基本图层(adding Imagery Layers))

1、实例var viewer = new Cesium.Viewer("cesiumContainer", { //imageryProvider:使用的图像提供程序。仅当“baseLayerPicker”设置为false时，此值才有效。 imageryProvider: Cesium.createWorldImagery({ style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS, }), //createWorldImager
复制链接

扫一扫

专栏目录