光源-源代码示例 运行 重置

                    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
      rel="stylesheet"
    />
    <script src="http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
    #toolbox {
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
  <body>
    <div id="container"></div>
    <select name="guanyuan" id="toolbox" onchange="aa()">
      <option value="Fixed lighting" onclick="aa()" onselect="selectFixed()">
        固定照明
      </option>
      <option value="Moonlight" onselect="selectMoonlight()">夜晚</option>
      <option value="Sunlight" onselect="selectSunlight()">白天</option>
      <option value="Customcolor" onselect="selectCustomcolor()">黄昏</option>
    </select>
    <script>
      bmgl.Config.HTTP_URL = "http://www.bigemap.com:9000";
      var viewer = new bmgl.Viewer("container", {
        mapId: "bigemap.arcgis-satellite",
        timeline: true,
      });

      function aa() {
        let val = document.querySelector("#toolbox").value;
        switch (val) {
          case "Fixed lighting":
            selectFixed();
            break;
          case "Flashlight":
            selectFlashlight();
            break;
          case "Moonlight":
            selectMoonlight();
            break;
          case "Sunlight":
            selectSunlight();
            break;
          case "Customcolor":
            selectCustomcolor();
            break;
        }
      }

      var scene = viewer.scene;
      scene.globe.enableLighting = true;

      var scratchIcrfToFixed = new bmgl.Matrix3();
      var scratchMoonPosition = new bmgl.Cartesian3();
      var scratchMoonDirection = new bmgl.Cartesian3();

      function getMoonDirection(result) {
        result = bmgl.defined(result) ? result : new bmgl.Cartesian3();
        var icrfToFixed = scratchIcrfToFixed;
        var date = viewer.clock.currentTime;
        if (
          !bmgl.defined(
            bmgl.Transforms.computeIcrfToFixedMatrix(date, icrfToFixed)
          )
        ) {
          bmgl.Transforms.computeTemeToPseudoFixedMatrix(date, icrfToFixed);
        }
        var moonPosition = bmgl.Simon1994PlanetaryPositions.computeMoonPositionInEarthInertialFrame(
          date,
          scratchMoonPosition
        );
        bmgl.Matrix3.multiplyByVector(icrfToFixed, moonPosition, moonPosition);
        var moonDirection = bmgl.Cartesian3.normalize(
          moonPosition,
          scratchMoonDirection
        );
        return bmgl.Cartesian3.negate(moonDirection, result);
      }

      var directionalLight = new bmgl.DirectionalLight({
        direction: new bmgl.Cartesian3(
          0.2454278300540191,
          0.8842635425193919,
          0.39729481195458805
        ),
      });

      var flashlight = new bmgl.DirectionalLight({
        direction: scene.camera.directionWC, // Updated every frame
      });

      var moonLight = new bmgl.DirectionalLight({
        direction: getMoonDirection(), // Updated every frame
        color: new bmgl.Color(0.9, 0.925, 1.0),
        intensity: 0.5,
      });

      var sunLight = new bmgl.SunLight();

      var customColorLight = new bmgl.DirectionalLight({
        direction: new bmgl.Cartesian3(
          -0.2454278300540191,
          0.8842635425193919,
          0.39729481195458805
        ),
        color: bmgl.Color.fromCssColorString("#deca7c"),
      });

      scene.preRender.addEventListener(function (scene, time) {
        if (scene.light === flashlight) {
          scene.light.direction = bmgl.Cartesian3.clone(
            scene.camera.directionWC,
            scene.light.direction
          );
        } else if (scene.light === moonLight) {
          scene.light.direction = getMoonDirection(scene.light.direction);
        }
      });

      viewer.entities.add({
        position: bmgl.Cartesian3.fromRadians(
          -2.1463338399937277,
          0.6677959688982861,
          32.18991401746337
        ),
        model: {
          uri: "./model/bmglBalloon.glb",
          scale: 7.0,
        },
      });

      viewer.entities.add({
        position: bmgl.Cartesian3.fromRadians(
          -2.14633449752228,
          0.667796065242357,
          24.47647034111423
        ),
        cylinder: {
          length: 8.0,
          topRadius: 2.0,
          bottomRadius: 2.0,
          material: bmgl.Color.WHITE,
        },
      });

      viewer.entities.add({
        position: bmgl.Cartesian3.fromRadians(
          -2.1463332294173365,
          0.6677959755384729,
          26.2876064083145
        ),
        ellipsoid: {
          radii: new bmgl.Cartesian3(2.5, 2.5, 2.5),
          material: bmgl.Color.WHITE.withAlpha(0.5),
        },
      });

      function setTime(iso8601) {
        var currentTime = bmgl.JulianDate.fromIso8601(iso8601);
        var endTime = bmgl.JulianDate.addDays(
          currentTime,
          2,
          new bmgl.JulianDate()
        );

        viewer.clock.currentTime = currentTime;
        viewer.timeline.zoomTo(currentTime, endTime);
      }

      function reset() {
        // Set scene defaults
        scene.light = sunLight;
        scene.globe.dynamicAtmosphereLighting = true;
        scene.globe.dynamicAtmosphereLightingFromSun = false;
        setTime("2020-01-09T23:00:39.018261982600961346Z");
      }

      viewer.scene.camera.setView({
        destination: new bmgl.Cartesian3(
          -2729490.8390059783,
          -4206389.878855597,
          3928671.2763356343
        ),
        orientation: new bmgl.HeadingPitchRoll(
          2.2482480507178426,
          -0.20084951548781982,
          0.002593933673552762
        ),
        endTransform: bmgl.Matrix4.IDENTITY,
      });

      function selectFixed() {
        reset();
        scene.light = directionalLight;
        console.log(1);
      }
      function selectFlashlight() {
        reset();
        scene.light = flashlight;
        scene.globe.dynamicAtmosphereLighting = false;
      }

      function selectMoonlight() {
        reset();
        scene.light = moonLight;
        scene.globe.dynamicAtmosphereLightingFromSun = true;
        setTime("2020-01-10T05:29:41.17946898164518643Z");
      }

      function selectSunlight() {
        reset();
      }
      function selectCustomcolor() {
        reset();
        scene.light = customColorLight;
      }
    </script>
  </body>
</html>
                                                                                                                                                                    
源码