cesium,各种影像的卷帘效果实现

有荣与焉

已于 2022-11-11 15:29:55 修改

阅读量1k

点赞数

文章标签： html 前端 javascript

于 2022-11-11 15:00:42 首次发布

本文链接：https://blog.csdn.net/youroong/article/details/127806118

版权

sweeties~ 今天一起学习cesium的卷帘效果哦^^

实现的是简单的HTML页面在线显示

1、CDN引入

<script src='https://cdn.bootcdn.net/ajax/libs/cesium/1.98.1/Cesium.js'></script>
  <link href='https://cdn.bootcdn.net/ajax/libs/cesium/1.98.1/Widgets/widgets.css' rel='stylesheet'>

2、样式和显示区域

<style>
      #slider {
        position: absolute;
        left: 50%;
        top: 0px;
        background-color: #d3d3d3;
        width: 5px;
        height: 100%;
        z-index: 9999;
      }
      #slider:hover {
        cursor: ew-resize;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer" class="fullSize">
    <div id="slider"></div>
  </div>
</body>

3、设置容器

第一步仍然是设置最基础的容器~ 控件显示自行改动哦

  const viewer = new Cesium.Viewer("cesiumContainer", {
    fullscreenButton: false,
    baseLayerPicker: false,
    selectionIndicator: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    homeButton: false,
    animation: false, // 时间控制器
    geocoder: false,
    timeline: false, //时间线
    infoBox: false,
    scene3DOnly: false,
    vrButton: false,
    shouldAnimate: true,
    navigationInstructionsInitiallyVisible: false,
      baseLayerPicker: false,
      infoBox: false,
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
      }),
    });

5、卷帘图层

最重要的一步来喽！设置与初始影像不一样的卷帘影像

imageryProvider：提供要在地球表面上显示的图像。它描述了一个接口，并不直接实例化。

/************直接使用cesium提供的影像************
new Cesium.IonImageryProvider({
assetId: 3812
accessToken:"你申请的accessToken"
})**/
/**********其他卷帘图层样式************************

imageryProvider: new Cesium.ArcGisMapServerImageryProvider({

url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",

}),

ArcGisMapServerImageryProvider可更改为：

1、ArcGisMapServerImageryProvider:支持ArcGIS Online和Server的相关服务
2、BingMapsImageryProvider:Bing地图影像，可以指定mapStyle，详见BingMapsStyle类
3、createOpenStreetMapImageryProvider:OSM影像服务，根据不同的url选择不同的风格
4、createTileMapServiceImageryProvider:看文档是根据MapTiler规范，貌似是可以自己下载瓦片，发布服务，类似ArcGIS影像服务的过程
5、GoogleEarthImageryProvider:企业级服务，没有用过
6、ImageryProvider:基类，所有的影像服务最终都基于此类，如果你需要扩展新的Provider也会继承该类
7、MapboxImageryProvider:Mapbox影像服务，根据mapId指定地图风格
8、SingleTileImageryProvider:单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下
9、UrlTemplateImageryProvider:指定url的format模版，方便用户实现自己的Provider，比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。而OSM也是通过该类实现的。
10、WebMapServiceImageryProvider:符合WMS规范的影像服务都可以通过该类封装，指定具体参数实现
11、WebMapTileServiceImageryProvider：服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图
12、TileCoordinatesImageryProvider:渲染每一个瓦片的围，方便调试
13、GridImageryProvider:渲染每一个瓦片内部的格网，了解每个瓦片的精细度******/

//设置卷帘图层
const layers = viewer.imageryLayers;
const earthAtOver = layers.addImageryProvider(
  new Cesium.ArcGisMapServerImageryProvider({ 
    url:"https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
  })
);
earthAtOver.splitDirection = Cesium.SplitDirection.LEFT; // 只显示在滑动条的左侧，需要右侧显示改为"RIGHT"即可

6、对分割条的操作

// 将滑块的位置与分割位置同步
const slider = document.getElementById("slider");
viewer.scene.splitPosition =//确定分割点位置
  slider.offsetLeft / slider.parentElement.offsetWidth;//占据父级容器的比例

const handler = new Cesium.ScreenSpaceEventHandler(slider);//处理用户输入事件。可以添加自定义功能以在用户输入时执行；参数为任意元素

let moveActive = false;

function move(movement) {
  if (!moveActive) {
    return;
  }
//捕获滑动停止的位置
  const relativeOffset = movement.endPosition.x;
  const splitPosition =
    (slider.offsetLeft + relativeOffset) /
    slider.parentElement.offsetWidth;
  slider.style.left = `${100.0 * splitPosition}%`;
  viewer.scene.splitPosition = splitPosition;
}

//对分割条的操作
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);

handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);