wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!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="map" style="height: 90vh; width: 100vw;">
  </div>
  <div id="funcs" style="width:100%;position: fixed;top: 0;z-index: 999;">
    <button onclick="startpick()">开始拾取</button>
    <button onclick="endpick()">结束拾取</button>
    <p>lon:<span id="coodlon"></span></p>
    <p>lat:<span id="coodlat"></span></p>
    <p>h:<span id="coodh"></span></p>
    <p>字符串</p><input type="text" name="str" value="标记点1" onchange="changestr(this.value)" />
    <button onclick="drawstr()">添加实体显示字符串</button>
    <button onclick="drawimg()">添加实体显示图片</button>
    <button onclick="drawsvg(1)">添加实体显示svg图片1</button>
    <button onclick="drawsvg(2)">添加实体显示svg图片2</button>
    <button onclick="drawsvg(3)">添加实体显示svg图片3</button>
    <button onclick="drawoverlay()">添加实体地表覆盖物</button>
    <button onclick="flyto()">飞行至</button>
    <button onclick="SaveSceneToImg()">截图</button>
    <div id="popup" style="width: 100px;height: 100px;">
      <img src="/example/assets/sxt.png" />
      这是一个覆盖物
    </div>
    <img src="../dist/assets/image/ar/switch/add-zoom-out.svg" />
    <img id="tarimg" />
  </div>
</body>

<script>
  window.CESIUM_BASE_URL = '../cesium/Build/Cesium';
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MjIyODA4ZS0zNmRmLTQwNGMtYjZkNC0wOGY2NDdmODgyZTUiLCJpZCI6ODMyOCwiaWF0IjoxNjA2MjkyNDE1fQ.ZhhxNIJ-TzstpcavQBNL7xRwytBat3G2__3jr7lJ8yg'
  var viewer = CTMapOl.thrdime.viewercontrol.globalviewer('map', CTMapOl.thrdime.viewercontrol.globalvieweroptions())
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  CTMapOl.thrdime.imagerylayercontrol.removeAll(viewer, true)
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('vec', "vec_w"))
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('cva', "cva_w"))
  CTMapOl.thrdime.cameracontrol.setDEFAULT_VIEW_RECTANGLE(116.38, 39.90, 116.40, 39.92)
  CTMapOl.thrdime.cameracontrol.setcamera(viewer, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(116.39, 39.91, 5000, 0, -90, 0))
  let me = this
  let CesiumEventHandlerclick = null
  let tarstr = "标记点1"
  function startpick() {
    if (CesiumEventHandlerclick) {
      endpick()
    }
    CesiumEventHandlerclick = CTMapOl.thrdime.cameracontrol.startpickcood(viewer, (e, f) => {
      console.log(e, f)
      let dom1 = document.getElementById("coodlon")
      dom1.innerHTML = f.longitude / Math.PI * 180
      let dom2 = document.getElementById("coodlat")
      dom2.innerHTML = f.latitude / Math.PI * 180
      let dom3 = document.getElementById("coodh")
      dom3.innerHTML = f.height
    })
  }
  function endpick() {
    CTMapOl.thrdime.cameracontrol.stoppickcood(viewer, CesiumEventHandlerclick)
  }
  function changestr(str) {
    tarstr = str
  }
  function drawstr() {
    let pos = new Cesium.Cartesian3.fromDegrees(Number.parseFloat(document.getElementById("coodlon").innerHTML), Number.parseFloat(document.getElementById("coodlat").innerHTML), Number.parseFloat(document.getElementById("coodh").innerHTML))
    CTMapOl.thrdime.entitycontrol.addlable(viewer, pos, tarstr, Cesium.Color.BLACK, [0, -20], 0.5)
  }
  function drawimg() {
    let pos = new Cesium.Cartesian3.fromDegrees(Number.parseFloat(document.getElementById("coodlon").innerHTML), Number.parseFloat(document.getElementById("coodlat").innerHTML), Number.parseFloat(document.getElementById("coodh").innerHTML))
    CTMapOl.thrdime.entitycontrol.addimg(viewer, pos, '/example/assets/camera-cluster-2.png', [0, -20], 0.5)
  }
  async function drawsvg(type) {
    let pos = new Cesium.Cartesian3.fromDegrees(Number.parseFloat(document.getElementById("coodlon").innerHTML), Number.parseFloat(document.getElementById("coodlat").innerHTML), Number.parseFloat(document.getElementById("coodh").innerHTML))
    switch (type) {
      case 1:
        CTMapOl.thrdime.entitycontrol.addimg(viewer, pos, '../dist/assets/image/locus/point_selected.svg', [0, -20], 0.5)
        break
      case 2:
        CTMapOl.thrdime.entitycontrol.addimg(viewer, pos, '../dist/assets/image/locus/point_begin.svg', [0, -20], 0.5)
        break
      case 3:
        let svg1 = await axios({ url: '../dist/assets/image/locus/point_selected.svg', method: 'get' })
        let svg2 = await axios({ url: '../dist/assets/image/locus/point_begin.svg', method: 'get' })
        let xmlDoc1 = new DOMParser().parseFromString(svg1.data, "text/xml");
        let xmlDoc2 = new DOMParser().parseFromString(svg2.data, "text/xml");
        let svgdom1=xmlDoc1.getElementsByTagName('svg')[0];
        let svgdom2=xmlDoc2.getElementsByTagName('svg')[0];
        svgdom1.innerHTML=svgdom1.innerHTML+svgdom2.innerHTML
        // for(let i=0;i<svgdom2.childNodes.length;i++)
        // {
        //   svgdom1.childNodes.push(svgdom2.childNodes[i])
        // }
        CTMapOl.thrdime.entitycontrol.addimg(viewer, pos,'data:image/svg+xml;base64,' + window.btoa((new XMLSerializer()).serializeToString(svgdom1)), [0, -20], 0.5)
        break
    }

  }
  function drawoverlay() {
    let pos = new Cesium.Cartesian3.fromDegrees(Number.parseFloat(document.getElementById("coodlon").innerHTML), Number.parseFloat(document.getElementById("coodlat").innerHTML), Number.parseFloat(document.getElementById("coodh").innerHTML))
    let scrposition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pos)
    const pop = document.getElementById("popup");
    pop.style.position = "absolute";
    pop.style.top = scrposition.y - 100 / 2 + "px";
    pop.style.left = scrposition.x - 100 / 2 + "px";
    pop.style.zIndex = 99;
    viewer.scene.postRender.addEventListener(() => {
      scrposition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pos)
      pop.style.top = scrposition.y - 100 / 2 + "px";
      pop.style.left = scrposition.x - 100 / 2 + "px";
    });
  }
  function flyto() {
    let pos = new Cesium.Cartesian3.fromDegrees(Number.parseFloat(document.getElementById("coodlon").innerHTML), Number.parseFloat(document.getElementById("coodlat").innerHTML), Number.parseFloat(document.getElementById("coodh").innerHTML) + 500)
    CTMapOl.thrdime.cameracontrol.flyTo(viewer, CTMapOl.thrdime.cameracontrol.getflyTooptions(pos, {
      /**\
       * 朝向
       */
      heading: Cesium.Math.toRadians(0),
      /**
       * 仰俯
       */
      pitch: Cesium.Math.toRadians(-90.0)
    }, 20, () => { alert('飞行完成') }))
  }
  function SaveSceneToImg() {
    viewer.render()
    let canvas = viewer.scene.canvas;
    var base64 = canvas.toDataURL('image/png');
    document.getElementById("tarimg").src = base64
    // 去除头部信息
    console.log(base64)
  }
</script>

</html>