wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!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 style="display: flex;">
    <div id="info" style="height: 100vh; width: 30vw;">
      <button class="btn" onclick="addpointentity()">新增点</button><br>
      <button class="btn" onclick="addpolylineentity()">新增线</button>
      <span>线长倍数</span>
      <span style="margin-left: 2em;">
        0倍
        <input type="range" min="0" max="10" value="1" step="0.01" onchange="changelinelength(this.value)">
        10倍
      </span><br>
      <button class="btn" onclick="addpolygonentity()">新增多边形</button>
      <span>多边形倍数</span>
      <span style="margin-left: 2em;">
        0倍
        <input type="range" min="0" max="10" value="1" step="0.01" onchange="changepolygonlength(this.value)">
        10倍
      </span><br>
      <span>周边缓冲距离：</span>
      <span style="margin-left: 2em;">
        0km
        <input type="range" min="0" max="10" value="0.5" step="0.01" onchange="changebuffervalue(this.value)">
        10km
      </span>
      <canvas id="testcanvas" style="width: 100px;height: 100px;"></canvas>
    </div>
    <div id="map" style="height: 100vh; width: 70vw;"></div>
  </div>
</body>

<script>
  window.CESIUM_BASE_URL = '../../cesium/Build/CesiumUnminified';
  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('img', "img_w"))
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('cia', "cia_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))
  CTMapOl.thrdime.viewercontrol.addterrain(viewer)
  let coloroptions = {
    pointcolor: '#4F9FFF', // 点内填充颜色
    pointoutlineColor: '#4F9FFF', // 点外圈
    linecolor: '#4F9FFF', // 线颜色
    polygoncolor: '#4F9FFF40', // 多边形颜色
    buffercolor: '#4F9FF1A0', // 缓冲区颜色及透明度
    linewidth: 2 // 线宽
  }
  let BufferAnalysis = new CTMapOl.cesiumComponent.BufferAnalysis(viewer, 0.5, coloroptions)
  let linescale = 1
  let polygonscale = 1
  let muentitys = []
  let mucoods = []
  let index = 0
  for (let i = 116.28; i < 116.50; i += 0.001) {
    for (let j = 39.80; j < 40.02; j += 0.001) {
      mucoods.push({
        cood: [i, j],
        id: index
      })
      index++
    }
  }
  async function addpointentity() {
    let tarpointbufferentity = await BufferAnalysis.addpointentity([116.39, 39.91])
    console.log(tarpointbufferentity)
    getcenterandradi(tarpointbufferentity._polygon._hierarchy._value.positions)
    let coods1 = filterforcoods(tarpointbufferentity._polygon._hierarchy._value.positions, mucoods)
    testaddpoints(coods1)
  }
  async function addpolylineentity() {
    let coods = [[116.392, 39.917], [116.39, 39.91], [116.391, 39.921]]
    let length = CTMapOl.turf.length(CTMapOl.turf.lineString(coods))
    coods = CTMapOl.turf.transformScale(CTMapOl.turf.lineString(coods), linescale).geometry.coordinates
    if (BufferAnalysis.checkpolylineentity(coods)) {
      alert('超限')
    }
    else {
      let tarpolylinebufferentity = await BufferAnalysis.addpolylineentity(coods)
      getcenterandradi(tarpolylinebufferentity._polygon._hierarchy._value.positions)
      let coods2 = filterforcoods(tarpolylinebufferentity._polygon._hierarchy._value.positions, mucoods)
      testaddpoints(coods2)
    }
  }
  function changelinelength(scale) {
    linescale = Number(scale)
  }
  async function addpolygonentity() {
    let coods = [[[116.392, 39.917], [116.39, 39.91], [116.391, 39.921], [116.392, 39.917]]]
    let length = CTMapOl.turf.length(CTMapOl.turf.polygon(coods))
    coods = CTMapOl.turf.transformScale(CTMapOl.turf.polygon(coods), polygonscale).geometry.coordinates
    if (BufferAnalysis.checkpolygonrntity(coods)) {
      alert('超限')
    } else {
      let tarpolygonbufferentity = await BufferAnalysis.addpolygonrntity(coods)
      getcenterandradi(tarpolygonbufferentity._polygon._hierarchy._value.positions)
      let coods3 = filterforcoods(tarpolygonbufferentity._polygon._hierarchy._value.positions, mucoods)
      testaddpoints(coods3)
    }
  }
  function changepolygonlength(scale) {
    polygonscale = Number(scale)
  }
  async function changebuffervalue(buffervalue) {
    let newbufferentitys = await BufferAnalysis.changebuffervalue(buffervalue)
    console.log(newbufferentitys)
  }
  //获取中心点和半径
  function getcenterandradi(entitycoods) {
    let poses = []
    for (let i = 0; i < entitycoods.length; i++) {
      let temp = Cesium.Cartographic.fromCartesian(entitycoods[i])
      poses.push([temp.longitude, temp.latitude])
    }
    var coods = CTMapOl.turf.points(poses);
    var center = CTMapOl.turf.center(coods);
    let radi = Number.MIN_VALUE
    let centerpoint = Cesium.Cartesian3.fromRadians(center.geometry.coordinates[0], center.geometry.coordinates[1])
    for (let i = 0; i < entitycoods.length; i++) {
      let temp = Cesium.Cartesian3.distance(centerpoint, entitycoods[i])
      radi = Math.max(radi, temp)
    }
    let res = {
      center: {
        longitude: center.geometry.coordinates[0] / Math.PI * 180,
        latitude: center.geometry.coordinates[1] / Math.PI * 180,
      },
      radi: radi
    }
    console.log(res)
    return res
  }
  //过滤
  function filterforcoods(entitycoods, testpoints) {
    let poses = []
    for (let i = 0; i < entitycoods.length; i++) {
      let temp = Cesium.Cartographic.fromCartesian(entitycoods[i])
      poses.push([temp.longitude / Math.PI * 180, temp.latitude / Math.PI * 180])
    }
    var polygon = CTMapOl.turf.polygon([poses]);
    let res = []
    for (let i = 0; i < testpoints.length; i++) {
      var point = CTMapOl.turf.point([testpoints[i].cood[0], testpoints[i].cood[1]]);
      if (CTMapOl.turf.booleanContains(polygon, point)) {
        res.push(testpoints[i])
      }
    }
    console.log(res)
    return res
  }
  //测试准确性
  function testaddpoints(testpoints) {
    for (let i = 0; i < muentitys.length; i++) {
      viewer.entities.remove(muentitys[i])
    }
    muentitys = []
    for (let i = 0; i < testpoints.length; i++) {
      let testpoint = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(testpoints[i].cood[0], testpoints[i].cood[1], 100),
        ellipsoid: {
          radii: new Cesium.Cartesian3(5.0, 5.0, 5.0),
          material: Cesium.Color.BLUE
        },
      });
      muentitys.push(this.testpoint);
    }
  }
</script>

</html>