openlayer和Cesium如何实现分屏

openlayer实现分屏

1. 创建两个div,分别放左侧地图和右侧地图

<div class="map" id="left-2d"></div>
<div class="map" id="right-2d"></div>

2. 初始化两个地图，共用一个view

 let map,map2 = null
 const initMap1 = () => {
 map = new ol.Map({
    target: "left-2d",
    controls: ol.control.defaults({ attribution: false, rotate: false }),
    view: new ol.View({
      center: [118.398425529150051, 35.57175763322584],
      zoom: 11,
      projection: "EPSG:4326",
      multiWorld: true
    })
  })
}
 const initMap1 = () => {
  map = new ol.Map({
    target: "right-2d",
    controls: ol.control.defaults({ attribution: false, rotate: false }),
    view: map.getView()//使用map的view
  })
}

这样就可以实现openlayer的地图分屏了，左侧地图缩放滑动右侧地图同时也会。并且对地图图层打点画面不会影响另外一个地图。

Cesium实现分屏

有几种实现方式，看你想要那种效果。

1. 可以同时缩放地图，同步地图操作。相当于copy一份一样的地图，类似分屏阅读器。

scene.multiViewportMode = Cesium.MultiViewportMode.HORIZONTAL

具体的窗口模式详见api文档

2. 只同步缩放滑动地图，不能对地图进行编辑（例如打点，画面，测量等）
scene.useWebVR = true加在Promise函数里.
可参考以下例子
在这里插入图片描述
3. 只同步缩放滑动地图，两个地图的操作(编辑)是独立的，互不影响
这个相比前面两个要麻烦一些，需要弄两个地图。
首先初始化三维地图

<div class="map left" id="old-3d"></div>
<div class="map right" id="new-3d"></div>

let viewer,oldViewer = null

const initNewViewer = () => {
  viewer = new Cesium.Viewer("new-3d", {
    infoBox: false
  })
}
//初始化旧的三维地图
const initOldViewer = () => {
  oldViewer = new Cesium.Viewer("old-3d", {
    infoBox: false
  })
}

写一个函数用来同步两个地图缩放滑动.

const flyViewer = (viewer1, viewer2) => {
  //viewer1是触发操作的地图，viewer2是被同步的地图
  if (!viewer1 || !viewer2) return
  let _camera = viewer1.camera
  viewer2.camera.setView({
    destination: _camera.position,
    orientation: {
      direction: _camera._direction,
      up: _camera.up,
      heading: _camera.heading,
      pitch: _camera.pitch,
      roll: _camera.roll
    }
  })
}

给两个地图添加鼠标滚动和滑动事件

const initOldViewer = () => {
  oldViewer = new Cesium.Viewer("old-3d", {
    infoBox: false
  })
  oldViewer._cesiumWidget._creditContainer.style.display = "none"
  var scene = oldViewer.scene
  var camera = scene.camera
  var promise = scene.open('地图地址')
  promise.then(function (obliqueLayers) {
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
    //添加鼠标滑动事件
    handler.setInputAction(function (e) {
      flyViewer(oldViewer, viewer)
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
   // 添加鼠标滚动事件
    handler.setInputAction(function (e) {
      flyViewer(oldViewer, viewer)
    }, Cesium.ScreenSpaceEventType.WHEEL)
  })
  const initNewViewer = () => {
  vewer = new Cesium.Viewer("new-3d", {
    infoBox: false
  })
  oldViewer._cesiumWidget._creditContainer.style.display = "none"
  var scene = viewer.scene
  var camera = scene.camera
  var promise = scene.open('地图地址')
  promise.then(function (obliqueLayers) {
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
    //添加鼠标滑动事件
    handler.setInputAction(function (e) {
      flyViewer(viewer,oldViewer)
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    //添加鼠标滚动事件
    handler.setInputAction(function (e) {
      flyViewer(viewer,oldViewer)
    }, Cesium.ScreenSpaceEventType.WHEEL)
  })
}