Earth3d-sdk NPM

description

Custom Material-Property based on Cesium.MaterialProperty interface, maybe you could get more information from this article Cesium:自定义MaterialProperty..

installation

npm i earth3d-sdk

or

yarn add earth3d-sdk

example

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link href="./Cesium/Widgets/widgets.css" /> -->
  <title>Document</title>
  <style>
    @import url("./Cesium/Widgets/widgets.css");

    *,
    body,
    html {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html,
    body,
    #viewerContainer {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="viewerContainer"></div>
  <script src="./Cesium/Cesium.js"></script>
  <script type="module">
    import earth3DSdk from './node_modules/earth3d-sdk/earth3DSdk.js'

    console.log(earth3DSdk)

    Cesium.Ion.defaultAccessToken = "YOUR_ACCESS_TOKEN";
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
      73.55,
      3.85,
      135.083,
      53.55
    );
    //初始化三维场景
    function initViewer(_viewerContainer, _options = {}) {
      const viewer = new Cesium.Viewer(_viewerContainer, {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        clockViewModel: new Cesium.ClockViewModel(new Cesium.Clock()),
        terrainProvider:
          new Cesium.EllipsoidTerrainProvider({
            ellipsoid: Cesium.Ellipsoid.WGS84,
          }),
        skyBox: false,
        fullscreenElement: document.body,
        useDefaultRenderLoop: true,
        targetFrameRate: undefined,
        showRenderLoopErrors: true,
        automaticallyTrackDataSourceClocks: true,
        contextOptions: undefined,
        mapProjection: new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84),
        dataSources: new Cesium.DataSourceCollection(),
        skyAtmosphere: false,
        shouldAnimate: true,
      })
      viewer.scene.globe.baseColor = Cesium.Color.BLACK;
      _options._hideGlobe
        ? ((viewer.scene.globe.translucency.enabled = true), //此属性设置为true-下面的设置才能生效
          (viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT),
          (viewer.scene.globe.undergroundColor = Cesium.Color.TRANSPARENT))
        : ''
      _options._defineBgImage
        ? (viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT)
        : ''
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        const pixelRatio = window.devicePixelRatio
        viewer.resolutionScale = pixelRatio //window.devicePixelRatio
      }
      viewer.scene.fxaa = true
      viewer.scene.postProcessStages.fxaa.enabled = true
      viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 1)
      viewer._cesiumWidget._creditContainer.style.display = 'none'
      !!_options.removeAll ? viewer.scene.imageryLayers.removeAll(true) : "";
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      )
      viewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
      ]
      viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.PINCH,
        Cesium.CameraEventType.RIGHT_DRAG,
      ]
      return viewer
    }
    const viewer = initViewer("viewerContainer", { removeAll: false });
    viewer.scene.debugShowFramesPerSecond = true;// 显示帧率
    //飞到目标点
    viewer.camera.flyTo({
      destination: Cesium.Rectangle.fromDegrees(121.4525737, 30.8452557, 121.97325117, 31.39091161),//Cesium.Cartesian3.fromDegrees(121.47, 31.23, 1500),// Cesium.Rectangle.fromDegrees(118.0, 32.0, 118.1, 32.1),
      duration: 0,
    });

    //测试代码
    const positions = [
      {
        lng: 119.0,
        lat: 31.0,
      },
      {
        lng: 119.0,
        lat: 31.2,
      },
      {
        lng: 119.1,
        lat: 31.2,
      },
      {
        lng: 119.15,
        lat: 31.1,
      },
      {
        lng: 119.1,
        lat: 31.0,
      },
    ].map(({ lng, lat }) => Cesium.Cartesian3.fromDegrees(lng, lat));


    //半透明蓝色
    const entity = new Cesium.Entity({
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(positions, []),
        material: //Cesium.Color.fromCssColorString("#30ECFF").withAlpha(0.3),
          new earth3DSdk.FadeMaterialProperty({
            color: Cesium.Color.fromCssColorString("#30ECFF").withAlpha(0.5),
            center: {
              x: 0.5,
              y: 0.5
            },
            power: 1.0,
            stretch: 0
          })
      },
      polyline: {
        positions,
        width: 2.5,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.fromCssColorString("#30ECFF"),
          dashLength: 12.0,
        }),
      }
    });

    const flowLine = new Cesium.Entity({
      polyline: {
        positions: positions,
        material: new earth3DSdk.FlowlineMaterialProperty(
          {
            // color: Cesium.Color.GREEN.withAlpha(0.8)
            color: Cesium.Color.fromCssColorString("#00b0f0").withAlpha(0.6),
          }
        ),
        width: 2,
      }
    })
    viewer.entities.add(flowLine)

    const circle = new Cesium.Entity({
      position: Cesium.Cartesian3.fromDegrees(121.64, 31.01),
      ellipse: {
        semiMajorAxis: 5000,
        semiMinorAxis: 5000,
        material:
          new earth3DSdk.RadarDiffuseCircleMaterialProperty({
            color: Cesium.Color.PURPLE.withAlpha(1.0),
            speed: 25.0,
            power: 0.35,
            borderColor: Cesium.Color.RED.withAlpha(0.5),
          })
      }
    })
    viewer.entities.add(circle);

    //双面纹理墙体/渐变墙
    const wall = viewer.entities.add({
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          120.0,
          31.0,
          800.0,
          118.5,
          31.0,
          800.0,
          118.5,
          31.2,
          800.0,
          120.0,
          31.2,
          800.0,
          120.0,
          31.0,
          800.0,
        ]),
        material:
          new earth3DSdk.HloopWallMaterialProperty({
            color: Cesium.Color.ORANGE,
            // image:'./materialProperty/assets/h_wall_img.png',
            repeat: new Cesium.Cartesian2(4, 1),
            emission: new Cesium.Cartesian3(0.12)
          }),
        // new earth3DSdk.VloopWallMaterialProperty({
        //   repeat:new Cesium.Cartesian2(1,3),
        //   speed:30.0,
        // }),
      }
    })

    // console.log(new earth3DSdk.HloopMaterialProperty())

    viewer.zoomTo(wall)

  </script>
</body>

</html>