wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>多屏联动</title>
  <link rel="stylesheet" href="../dist/index.css" />
  <link href="../cesium/Source/Widgets/widgets.css" rel="stylesheet">
  <script src="../cesium/Build/Cesium/Cesium.js"></script>
  <script src="../dist/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id='cesiumContainer' style="display: flex;flex-direction: column">
    <div id="map" style="display: flex;">
      <div id="map1" style="height: 90vh; width: 50vw;border:5px solid red;"></div>
      <div id="map2" style="height: 90vh; width: 50vw;"></div>
    </div>
    <div id="func" style="height: 10vh;">
      <button onclick="sync()">同步</button>
    </div>
  </div>
</body>

<script>
  window.CESIUM_BASE_URL = '../cesium/Build/Cesium';
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MjIyODA4ZS0zNmRmLTQwNGMtYjZkNC0wOGY2NDdmODgyZTUiLCJpZCI6ODMyOCwiaWF0IjoxNjA2MjkyNDE1fQ.ZhhxNIJ-TzstpcavQBNL7xRwytBat3G2__3jr7lJ8yg'
  let isleft = true
  const source = new CTMapOl.source.XYZ({
    url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
  })
  const tileLayer = new CTMapOl.layer.Tile({
    title: '天地图',
    source: source
  })
  var sourceMarker = new CTMapOl.source.XYZ({
    url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
  })
  const tileMarker = new CTMapOl.layer.Tile({
    title: '标注图层',
    source: sourceMarker
  })
  const map = new CTMapOl.Map({
    view: new CTMapOl.View({
      projection: 'EPSG:3857',
      center: CTMapOl.extend.formatLayer.transCooordinateToOpenlayer([116.39, 39.91]),
      // center: [0, 0],
      zoom: 16,
      maxZoom: 18,
      minZoom: 1
    }),
    layers: [tileLayer, tileMarker],
    target: 'map1'
  })
  var viewer2 = CTMapOl.thrdime.viewercontrol.globalviewer('map2', CTMapOl.thrdime.viewercontrol.globalvieweroptions())
  viewer2._cesiumWidget._creditContainer.style.display = 'none'
  CTMapOl.thrdime.imagerylayercontrol.removeAll(viewer2, true)
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer2, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('vec', "vec_w"))
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer2, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('cva', "cva_w"))
  CTMapOl.thrdime.cameracontrol.setcamera(viewer2, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(116.39, 39.91, 5000, 0, -90, 0))
  function sync() {
    if (isleft) {
      document.getElementById('map1').style = "height: 90vh; width: 50vw;"
      document.getElementById('map2').style = "height: 90vh; width: 50vw;border:5px solid red;"
      const geom = new CTMapOl.geom.Point(map.getView().getCenter())
      geom.transform('EPSG:3857', 'EPSG:4326')
      CTMapOl.thrdime.cameracontrol.setcamera(viewer2, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(geom.flatCoordinates[0], geom.flatCoordinates[1], CTMapOl.thrdime.cameracontrol.zoomToHeight(map.getView().getZoom()), 0, -90, 0))
    } else {
      document.getElementById('map2').style = "height: 90vh; width: 50vw;"
      document.getElementById('map1').style = "height: 90vh; width: 50vw;border:5px solid red;"
      let pos = CTMapOl.thrdime.cameracontrol.getposition(viewer2)
      let lonlath = Cesium.Cartographic.fromCartesian(pos)
      const geom = new CTMapOl.geom.Point([lonlath.longitude * 180 / Math.PI, lonlath.latitude * 180 / Math.PI])
      geom.transform('EPSG:4326', 'EPSG:3857')
      map.getView().setCenter(geom.flatCoordinates)
      map.getView().setZoom(CTMapOl.thrdime.cameracontrol.heightToZoom(lonlath.height))
    }
    isleft = !isleft
  }
</script>

</html>