5、Cesium学习之切割图层

最新推荐文章于 2024-07-02 22:52:37 发布

不收藏找不到我

最新推荐文章于 2024-07-02 22:52:37 发布

阅读量877

点赞数

分类专栏： Cesium

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

版权

Cesium 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、实例

var viewer = new Cesium.Viewer("cesiumContainer", {
//加载arcgis影像图层
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url:
      "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  }),
  //禁用底图切换
  baseLayerPicker: false,
  //禁用标注框
  infoBox: false,
});
//获取影像图层集合
var layers = viewer.imageryLayers;
//在影像图层集合中添加Cesium的在线影像图层
var earthAtNight = layers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3812 })
);
//相对于场景#imagerySplitPosition显示imagerlayer的方向
//ImagerySplitDirection是枚举类型，三个值：LEFT，NONE,RIGHT
//LEFT:在场景的左侧显示imagerlayer#imagersplitposition
//NONE:总是显示影像图层
//RIGHT:在场景的右侧显示影像图层
earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

// Sync the position of the slider with the split position
var slider = document.getElementById("slider");
//imagerySplitPostion
//获取或设置图像拆分器在视口中的位置。有效值介于0.0和1.0之间
viewer.scene.imagerySplitPosition =
  slider.offsetLeft / slider.parentElement.offsetWidth;
//new Cesium.ScreenSpaceEventHandler(element)
//处理用户输入事件。可以添加自定义函数，以便在用户输入时执行。
//参数名称element,类型:HTMLCanvasElement,默认值document,将要添加此事件的html的canvas元素
var handler = new Cesium.ScreenSpaceEventHandler(slider);

var moveActive = false;

function move(movement) {
  if (!moveActive) {
    return;
  }

  var relativeOffset = movement.endPosition.x;
  //split元素的位置
  var splitPosition =
    (slider.offsetLeft + relativeOffset) /
    slider.parentElement.offsetWidth;
  slider.style.left = 100.0 * splitPosition + "%";
  viewer.scene.imagerySplitPosition = splitPosition;
}

handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);
//setInputAction(action, type, modifier)
//设置要在输入事件上执行的函数，
//action:函数类型，发生输入事件时要执行的函数
//type:Number类型，输入事件的ScreenSpaceEventType
//modifier:Number类型，可选参数，类型事件发生时保持的KeyboardEventModifier键。
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
//ScreenSpaceEventType 
//此枚举类型用于对鼠标事件进行分类：向下、向上、单击、双击、移动和移动按钮时按住按钮
//LEFT_DOWN	Number	鼠标左键按下事件
//LEFT_UP	Number	鼠标左键抬起事件
//LEFT_CLICK	Number	表示鼠标左键单击事件
//LEFT_DOUBLE_CLICK	Number	表示鼠标左键双击事件
//RIGHT_DOWN	Number	鼠标右键按下事件
//RIGHT_UP	Number	鼠标右键抬起事件
//RIGHT_CLICK	Number	表示鼠标右键单击事件.
//MIDDLE_DOWN	Number	表示鼠标中键按下事件
//MIDDLE_UP	Number	表示鼠标中键抬起事件
//MIDDLE_CLICK	Number	表示鼠标中键单击事件
//MOUSE_MOVE	Number	表示鼠标移动事件
//WHEEL	Number	表示鼠标滚轮事件
//PINCH_START	Number	表示触摸表面上两个手指事件的开始（移动端）
//PINCH_END	Number	表示触摸表面上两个手指事件的结束（移动端）
//PINCH_MOVE	表示触摸表面上两个手指移动的事件（移动端）.
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);

2、截图

在这里插入图片描述
3、亲测

<!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">
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .slide {
            z-index: 2000;
            height: 100%;
            background-color: grey;
            width: 5px;
            position: absolute;
            left: 50%;
        }

        .slide:hover {
            cursor: ew-resize;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="slide" id="slide" style=""></div>
    </div>
</body>
<script>
    let viewer = new Cesium.Viewer('container', {
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
        }),
        baseLayerPicker: false,
        infoBox: false
    })
    let layers = viewer.imageryLayers
    //分屏的另一个地图
    let earthAtNight = layers.addImageryProvider(
        new Cesium.IonImageryProvider({
            assetId: 3812
        })
    )
    //设置分屏地图在容器中的位置
    earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT
    //给元素添加事件
    let handler = new Cesium.ScreenSpaceEventHandler(document.getElementsByClassName('slide')[0])

    let moveActive = false
    handler.setInputAction(() => {
        moveActive = true
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
    handler.setInputAction(() => {
        moveActive = true
    }, Cesium.ScreenSpaceEventType.PINCH_START)
    handler.setInputAction(() => {
        moveActive = false
    }, Cesium.ScreenSpaceEventType.LEFT_UP)
    //绑定事件，第一个参数是所绑定的函数，第二个参数是事件名称
    handler.setInputAction(() => {
        moveActive = false
    }, Cesium.ScreenSpaceEventType.PINCH_END)
    let slider = document.getElementById('slide')
    viewer.scene.imagerySplitPosition =
        slider.offsetLeft / slider.parentElement.offsetWidth;

    function move(e) {
        if (moveActive) {
            var relativeOffset = e.endPosition.x;
            var splitPosition =
                (slider.offsetLeft + relativeOffset) /
                slider.parentElement.offsetWidth;
            slider.style.left = 100.0 * splitPosition + "%";
            viewer.scene.imagerySplitPosition = splitPosition;
        }

    }
    handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE)
</script>


</html>