cesium-d3kit/examples/flyto.html

<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: zhangti
 * @Date: 2020-03-05 03:58:30
 * @LastEditors: zhangti
 * @LastEditTime: 2020-07-23 21:08:38
 -->
<div id="viewer-container"></div>
<script>

  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';


  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });

  let d3kit = new Cesium.D3Kit(viewer)

  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
    // temp_url: 'http://172.16.77.103:8219/tile?x={x}&y={y}&z={z}',
    style: 'dark'
  }));

  // viewer.imageryLayers.addImageryProvider(new Cesium.MapboxImageryProvider({
  //   mapId: 'mapbox.dark'
  // }))
  viewer.scene.skyBox = d3kit.setTwoGroundSkyBox()
  viewer.scene.sun.show = false;
  // viewer.scene.sunColor = new Cesium.Color(1.8, 1.85, 5.0)
  viewer.scene.moon.show = false;
  viewer.scene.skyAtmosphere.show = false;
  viewer.scene.fxaa = true;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewer.scene.undergroundMode = false;
  viewer.scene.terrainProvider.isCreateSkirt = false;
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10000;
  viewer.scene.highDynamicRange = true;
  viewer.scene.gamma = 0.9;
  let tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: '/beijingshp2/tileset.json'
  }))


  let colors = [
    new Cesium.Color(77 / 255, 201 / 255, 255 / 255, 1),
    new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 1),
    new Cesium.Color(221 / 255, 221 / 255, 221 / 255, 1)
  ];
  // 自定义材质线
  let MaterialLineImage = [
    'data/images/Textures/ArrowOpacity.png',
    'data/images/Textures/ArrowTransparent.png',
    'data/images/Textures/DataTransLine.png',
    'data/images/Textures/DotTransparent.png',
    'data/images/Textures/LinkPulse.png',
    'data/images/Textures/meteor_01.png',
    'data/images/Textures/Trail.png',
    'data/images/Textures/Trail1.png',
  ]

  let getDefCustomMaterialLine = (image, color) => {
    return d3kit.getCustomMaterialLine({
      image: image,
      color: color,
      duration: 1500
    })
  }
  // 创建光锥
  let createTetrahedrod = () => {

    let Tetrahedrod =
      viewer.scene.primitives.add(new Cesium.TetrahedronPrimitive({
        position: Cesium.Cartesian3.fromDegrees(116.32669032008344, 39.96775346965087, 180.0),
        color: Cesium.Color.BLUE,
        distance: 10.0,
        speed: 2.0,
        scale: new Cesium.Cartesian3(30, 30, 50)
      }));
    Tetrahedrod.startAnimate()


    let Tetrahedrod2 =
      viewer.scene.primitives.add(new Cesium.TetrahedronPrimitive({
        position: Cesium.Cartesian3.fromDegrees(116.3399086564082, 39.99606929716693, 180.0),
        color: Cesium.Color.BLUE,
        distance: 10.0,
        speed: 2.0,
        scale: new Cesium.Cartesian3(30, 30, 50)
      }));
    Tetrahedrod2.startAnimate()

  }

  // 创建飞线
  let createFlyLine = (positions) => {

    let startPoint = { lng: 116.32669032008344, lat: 39.96775346965087, alt: 140.0 }
    let lines = [
      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.33154263102534, lat: 39.96117826766343, alt: 107.41160361468306 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.32028605475644, lat: 39.9584739417466, alt: 35.36961514450832 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.31258984725199, lat: 39.970035111340714, alt: 131.06627747559673 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.30677811423965, lat: 39.97827645538983, alt: 106.82987908776786 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.3286147671444, lat: 39.97467916585302, alt: 161.09797960139747 }]
      ),

      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.33377489333093, lat: 39.970667874765255, alt: 143.2253832930117 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [startPoint, { lng: 116.33651958705512, lat: 39.976608723199014, alt: 53.09172756180144 }]
      )
    ]
    for (let i in lines) {

      var positions = d3kit.getLinkedPointList(lines[i][0], lines[i][1], 30000, 50);
      viewer.entities.add({
        polyline: {
          positions: positions,
          width: 8,
          material: new Cesium.PolylineCityLinkMaterialProperty({
            color: Cesium.Color.GREEN,
            duration: 2000
          }),
        }
      });
      // 圆底
      d3kit.createPointsGraphics({
        positions: [lines[i][1]],
        billboard: {
          b_img: 'data/images/Textures/poi2.png',
          b_width: 20,
          b_height: 60,
          b_scale: 3
        }
      })
    }
  }

  // 创建动态圆
  let createDynamicCricle = () => {

    d3kit.craeteDynamicCricleGraphics({
      center: { lng: 116.32669032008344, lat: 39.96775346965087, alt: 1.0 },
      radius: 400,
      scale: 800
    })
  }

  // 创建射线
  let createHeightLine = () => {

    let lines = [
      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.28146125319128, lat: 39.99908216553361, alt: 1.0 }, { lng: 116.28146125319128, lat: 39.99908216553361, alt: 10000 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.35470272579064, lat: 39.989831151249106, alt: 1.0 }, { lng: 116.35470272579064, lat: 39.989831151249106, alt: 10000 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.322050604779, lat: 39.97001536572826, alt: 1.0 }, { lng: 116.322050604779, lat: 39.97001536572826, alt: 10000 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.31247288668037, lat: 39.95836503415772, alt: 1.0 }, { lng: 116.31247288668037, lat: 39.95836503415772, alt: 10000 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.34760483514621, lat: 39.96139095695356, alt: 1.0 }, { lng: 116.34760483514621, lat: 39.96139095695356, alt: 10000 }]
      ),

      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.35298388900677, lat: 39.974985113274975, alt: 1.0 }, { lng: 116.35298388900677, lat: 39.974985113274975, alt: 10000 }]
      ),
      d3kit.transformWGS84ArrayToCartesianArray(
        [{ lng: 116.3321640099797, lat: 39.99882512011435, alt: 1.0 }, { lng: 116.3321640099797, lat: 39.99882512011435, alt: 10000 }]
      )
    ]

    lines.forEach((line, index) => {

      viewer.entities.add({
        polyline: {
          positions: line,
          width: 4,
          material: getDefCustomMaterialLine(MaterialLineImage[5], colors[index % 3])
        }
      });
    })
  }

  // 创建圆形扫描
  let createCircleScanEffect = () => {

    d3kit.setCircleScanEffect({
      position: Cesium.Cartesian3.fromDegrees(116.32669032008344, 39.96775346965087, 5.0),
      color: Cesium.Color.MEDIUMTURQUOISE.withAlpha(0.5),
      duration: 5000,
      border: 50,
      radius: 8000
    })
  }

  // 创建标牌
  let createBillboard = () => {

    let entity = d3kit.createGraphics()
    entity.position = Cesium.Cartesian3.fromDegrees(116.32669032008344, 39.96775346965087, 400.0)
    entity.plane = d3kit.getPlaneGraphics({
      plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0.0),
      material: new Cesium.ImageMaterialProperty({
        image: 'data/images/Textures/billboard2.png',
        transparent: true
      })
    })

    viewer.entities.add(entity)
  }

  // 加载道路面
  let createRordLine = () => {

    var promise = Cesium.GeoJsonDataSource.load('data/file/road.geojson');
    promise.then(function (dataSource) {
      viewer.dataSources.add(dataSource);
      var entities = dataSource.entities.values;
      for (var o = 0; o < entities.length; o++) {
        var r = entities[o];
        r.nameID = o;
        r.polygon.width = 3;
        r.polygon.extrudedHeight = 0.1
        r.polygon.material = Cesium.Color.MEDIUMTURQUOISE.withAlpha(0.5)
      }
    })
  }

  // 创建poi点
  let createPoiData = () => {
    let positions = [
      Cesium.Cartesian3.fromDegrees(116.29900603542943, 39.96976486650886, 0),
      Cesium.Cartesian3.fromDegrees(116.32909806411666, 39.9576322491703, 0),
      Cesium.Cartesian3.fromDegrees(116.3356308946873, 39.96208766092512, 0),
      Cesium.Cartesian3.fromDegrees(116.33794011297483, 39.96625467368985, 0),
      Cesium.Cartesian3.fromDegrees(116.33832799058237, 39.96932788851325, 0),
      Cesium.Cartesian3.fromDegrees(116.33708344442097, 39.97530293950722, 0),
      Cesium.Cartesian3.fromDegrees(116.3349183540067, 39.978734989355445, 0),
      Cesium.Cartesian3.fromDegrees(116.32692705550099, 39.97851264961627, 0),
      Cesium.Cartesian3.fromDegrees(116.31543285646232, 39.973452266756766, 0),
      Cesium.Cartesian3.fromDegrees(116.31141527213342, 39.96864433082615, 0)
    ]
    d3kit.createPointsGraphics({
      positions: positions,
      billboard: {
        b_img: 'data/images/Textures/poi.png',
        b_width: 20,
        b_height: 80,
        b_scale: 3
      }
    })
  }

  // 加载雷达
  let createRadarModel = () => {

    let material = d3kit.getCustomMaterialWall({
      image: 'data/images/Textures/test1.png',
      freely: 'cross',
      direction: '+',
      count: 1.0,
      color: Cesium.Color.BLUE,
      duration: 2000
    })
    var ellipsoid = new Cesium.EllipsoidGraphics({
      radii: new Cesium.Cartesian3(500, 500, 500), //单位 米
      material: material,
      maximumCone: Cesium.Math.PI_OVER_TWO,
    })
    var position = Cesium.Cartesian3.fromDegrees(116.28146125319128, 39.99908216553361)
    let three1 = viewer.entities.add({
      name: 'aaaaa',
      position: position,
      ellipsoid: ellipsoid
    })
  }

  // 创建围栏
  let createWallModel = () => {

    let material = d3kit.getCustomMaterialWall({
      image: 'data/images/Textures/b2.png',
      freely: 'vertical',
      direction: '+',
      count: 2,
      color: Cesium.Color.RED,
      duration: 2000
    })
    let three = viewer.entities.add({
      name: 'aaaaa',
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          116.34713010655757, 39.99226979250184, 150.0,
          116.3319615150461, 39.99162755705992, 150.0,
          116.3322080335777, 39.99908652636848, 150.0,
          116.34672687835422, 39.99936091832157, 150.0,
          116.34713010655757, 39.99226979250184, 150.0,
        ]),
        material: material
      }
    })
  }

  tilesets.readyPromise.then(function (tileset) {

    tileset.style = new Cesium.Cesium3DTileStyle({
      color: {
        conditions: [
          ["${floor} >= 300", "rgba(0, 149, 251, 0.3)"],
          ["${floor} >= 200", "rgb(0, 149, 251, 0.3)"],
          ["${floor} >= 100", "rgb(0, 149, 251, 0.3)"],
          ["${floor} >= 50", "rgb(0, 149, 251, 0.3)"],
          ["${floor} >= 25", "rgb(0, 149, 251, 0.3)"],
          ["${floor} >= 10", "rgb(0, 149, 251, 0.3)"],
          ["${floor} >= 5", "rgb(0, 149, 251, 0.3)"],
          ["true", "rgb(0, 149, 251, 0.3)"]
        ]
      }
    });

    createTetrahedrod()
    createDynamicCricle()
    createFlyLine()
    createHeightLine()
    createCircleScanEffect()
    createBillboard()
    // createRordLine()
    createRadarModel()
    createWallModel()
    createPoiData()

    // var ellipse = d3kit.computeEllipseEdgePositions({
    //   semiMinorAxis: 80,
    //   semiMajorAxis: 80,
    //   rotation: 0,
    //   center: Cesium.Cartesian3.fromDegrees(116.30544331774857, 39.96399873686899, 100.0),
    //   granularity: Math.PI / 150.0//间隔
    // })

    // let positions = [], index = 0
    // for (let i = 0; i < ellipse.outerPositions.length; i += 3) {
    //   let cartesian = new Cesium.Cartesian3(ellipse.outerPositions[i], ellipse.outerPositions[i + 1], ellipse.outerPositions[i + 2]);
    //   positions.push(cartesian)
    // }

    d3kit.setView({
      position: { x: -2172934.5706393262, y: 4389011.902432475, z: 4073679.2481707376 },
      orientation: {
        heading: Cesium.Math.toRadians(339.4926617087031),
        pitch: Cesium.Math.toRadians(-10.888859456945687),
        roll: Cesium.Math.toRadians(359.9324191953588)
      }
    })
    // handle
    viewer.scene.camera.moveEnd.addEventListener((move) => {

      console.log(d3kit.getCameraPosition())
    });
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction((movement) => {

      console.log(d3kit.transformCartesianToWGS84(viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid)))

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  })





</script>
<style>
  .layui-card {
    position: absolute;
    top: 10px;
    left: 5px;
    background-color: #ffffff6b;
    box-shadow: inset 1px 2px 2px 0 #f2f6fc;
    color: white
  }
</style>