skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="" />
    <title>scene 场景参数 </title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,jquery.minicolors,font-awesome,bootstrap,bootstrap-checkbox,bootstrap-slider,layer,haoutil,turf,mars3d"
    ></script>

    <link href="css/style.css" rel="stylesheet" />
    <style>
      .sceneMode {
        border-radius: 4px;
        background-color: rgba(63, 72, 84, 0.7);
        color: #fff;
      }

      /* 表格css样式 */
      .mars-table tr td {
        padding: 5px 5px 5px 10px;
        text-align: left;
        border: 1px solid #cde1de;
        max-width: 150px;
        word-wrap: break-word;
      }
    </style>
  </head>

  <body class="dark">
    <div id="mars3dContainer" class="mars3d-container"></div>

    <!-- 面板 -->
    <div class="infoview">
      <table class="mars-table">
        <tbody>
          <tr>
            <td rowspan="9">场景Scene</td>
            <td class="nametd">场景模式</td>
            <td>
              <select id="sceneMode" class="sceneMode">
                <option value="3">三维视图</option>
                <option value="2">二维视图</option>
                <option value="1">哥伦布视图</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="nametd">高动态渲染</td>
            <td>
              <input type="radio" name="high" checked onclick="setSceneOptions('highDynamicRange',true)" />是
              <input type="radio" name="high" onclick="setSceneOptions('highDynamicRange',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">快速抗锯齿</td>
            <td>
              <input type="radio" name="fxaa" checked onclick="setSceneOptions('fxaa',true)" />是
              <input type="radio" name="fxaa" onclick="setSceneOptions('fxaa',false)" />否
            </td>
          </tr>

          <tr>
            <td class="nametd">显示太阳</td>
            <td>
              <input type="radio" name="sun" checked onclick="setSceneOptions('showSun',true)" />是
              <input type="radio" name="sun" onclick="setSceneOptions('showSun',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">显示月亮</td>
            <td data-name="moon">
              <input type="radio" name="moon" checked onclick="setSceneOptions('showMoon',true)" />是
              <input type="radio" name="moon" onclick="setSceneOptions('showMoon',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">显示天空盒</td>
            <td>
              <input type="radio" name="skyBox" checked onclick="setSceneOptions('showSkyBox',true)" />是
              <input type="radio" name="skyBox" onclick="setSceneOptions('showSkyBox',false)" />否
            </td>
          </tr>
          <tr title="请关闭天空盒看效果">
            <td class="nametd">空间背景颜色</td>
            <td>
              <input type="text" id="colorStyle" style="width: 100px" />
            </td>
          </tr>
          <tr>
            <td class="nametd">大气外光圈</td>
            <td>
              <input type="radio" name="skyAt" checked onclick="setSceneOptions('showSkyAtmosphere', true)" />是
              <input type="radio" name="skyAt" onclick="setSceneOptions('showSkyAtmosphere',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">雾化效果</td>
            <td>
              <input type="radio" name="fog" checked onclick="setSceneOptions('fog',true)" />是
              <input type="radio" name="fog" onclick="setSceneOptions('fog',false)" />否
            </td>
          </tr>

          <!-- 地球属性 -->
          <tr>
            <td rowspan="6">地球Globe</td>
            <td class="nametd">地形夸张倍数</td>
            <td>
              <input id="terrain" style="width: 80px" />
            </td>
          </tr>
          <tr>
            <td class="nametd">昼夜区域</td>
            <td data-name="lighting">
              <input type="radio" name="light" onclick="setSceneGlobeOptions('enableLighting',true)" />是
              <input type="radio" name="light" checked onclick="setSceneGlobeOptions('enableLighting',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">绘制地面大气</td>
            <td>
              <input type="radio" name="atmosphere" checked onclick="setSceneGlobeOptions('showGroundAtmosphere',true)" />是
              <input type="radio" name="atmosphere" onclick="setSceneGlobeOptions('showGroundAtmosphere',false)" />否
            </td>
          </tr>

          <tr>
            <td class="nametd">深度监测</td>
            <td>
              <input type="radio" name="depthTest" onclick="setSceneGlobeOptions('depthTestAgainstTerrain',true)" />是
              <input type="radio" name="depthTest" checked onclick="setSceneGlobeOptions('depthTestAgainstTerrain',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">显示底图</td>
            <td>
              <input type="radio" name="depthTest" checked onclick="map.basemap=2021" />是
              <input type="radio" name="depthTest" onclick="map.basemap=undefined" />否
            </td>
          </tr>
          <tr title="请关闭底图后看效果">
            <td class="nametd">地球背景色</td>
            <td>
              <input type="text" id="baseColor" style="width: 100px" />
            </td>
          </tr>

          <tr>
            <td rowspan="10">鼠标交互</td>
            <td class="nametd">缩放地图</td>
            <td>
              <input type="radio" name="zooms" checked onclick="setSceneCameraControllerOptions('enableZoom',true)" />是
              <input type="radio" name="zooms" onclick="setSceneCameraControllerOptions('enableZoom',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">倾斜相机(3D和2.5D)</td>
            <td>
              <input type="radio" name="tilt" checked onclick="setSceneCameraControllerOptions('enableTilt',true)" />是
              <input type="radio" name="tilt" onclick="setSceneCameraControllerOptions('enableTilt',false)" />否
            </td>
          </tr>

          <tr>
            <td class="nametd">旋转转换位置(3D和2D)</td>
            <td>
              <input type="radio" name="rotate" checked onclick="setSceneCameraControllerOptions('enableRotate',true)" />是
              <input type="radio" name="rotate" onclick="setSceneCameraControllerOptions('enableRotate',false)" />否
            </td>
          </tr>

          <tr>
            <td class="nametd">平移地图(2D和2.5D)</td>
            <td>
              <input type="radio" name="translate" checked onclick="setSceneCameraControllerOptions('enableTranslate',true)" />是
              <input type="radio" name="translate" onclick="setSceneCameraControllerOptions('enableTranslate',false)" />否
            </td>
          </tr>

          <tr>
            <td class="nametd">可操作南北极</td>
            <td>
              <input type="radio" name="axis" onclick="setSceneCameraControllerOptions('constrainedAxis',true)" />是
              <input type="radio" name="axis" checked onclick="setSceneCameraControllerOptions('constrainedAxis',false)" />否
            </td>
          </tr>

          <tr>
            <td class="nametd">可否进入地下</td>
            <td>
              <input type="radio" name="detection" onclick="setSceneCameraControllerOptions('enableCollisionDetection',true)" />是
              <input type="radio" name="detection" checked onclick="setSceneCameraControllerOptions('enableCollisionDetection',false)" />否
            </td>
          </tr>
          <tr>
            <td class="nametd">最小碰撞高度(米)</td>
            <td>
              <input id="minimumCollision" data-name="minimumCollisionTerrainHeight" style="width: 80px" />
            </td>
          </tr>

          <tr>
            <td class="nametd">相机最近视距(米)</td>
            <td>
              <input id="minimumZoom" data-name="minimumZoomDistance" style="width: 80px" />
            </td>
          </tr>
          <tr>
            <td class="nametd">相机最远视距(米)</td>
            <td>
              <input id="maximumZoom" data-name="maximumZoomDistance" style="width: 80px" />
            </td>
          </tr>

          <tr>
            <td class="nametd">滚轮放大倍数</td>
            <td>
              <input id="zoomFactor" style="width: 80px" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script type="text/javascript">
      "use script"; //开发环境建议开启严格模式

      var map;

      $(document).ready(function () {
        if (!mars3d.Util.webglreport()) {
          mars3d.Util.webglerror();
          return;
        }

        //读取 config.json 配置文件
        mars3d.Resource.fetchJson({
          url: "config/config.json",
        }).then(function (json) {
          //构建地图
          initMap(json.map3d);
        });
      });

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 43.260076, lng: 59.511019, alt: 28590990, heading: 0, pitch: -90 },
          },
        });

        console.log("地图构建参数", mapOptions);

        //创建三维地球场景
        map = new mars3d.Map("mars3dContainer", mapOptions);

        //空间背景颜色
        $("#colorStyle").minicolors({
          position: "bottom left",
          control: "saturation",
          format: "rgb",
          change: function (color, opacity) {
            setSceneOptions("backgroundColor", color);
          },
        });

        //地球背景颜色
        $("#baseColor").minicolors({
          position: "bottom left",
          control: "saturation",
          format: "rgb",
          value: "#546a53",
          change: function (color, opacity) {
            setSceneGlobeOptions("baseColor", color);
          },
        });

        $("#sceneMode").change(function () {
          let name = Number($(this).val());
          setSceneOptions("sceneMode", name);
        });

        //地形夸张倍数
        $("#terrain")
          .slider({
            min: 1,
            max: 80,
            value: 1,
          })
          .on("change", (e) => {
            if (e && e.value) {
              setSceneGlobeOptions("terrainExaggeration", e.value.newValue);
            }
          });

        // 鼠标滚轮放大步长参数
        $("#zoomFactor")
          .slider({
            min: 1,
            max: 10,
            value: 1,
          })
          .on("change", (e) => {
            let keys = $("#zoomFactor").attr("data-name");
            if (e && e.value) {
              setSceneCameraControllerOptions(keys, e.value.newValue);
            }
          });

        //变焦时相机位置的最小量级
        $("#minimumZoom")
          .slider({
            min: 1,
            max: 10000,
            value: 1,
            step: 100,
          })
          .on("change", (e) => {
            let keys = $("#minimumZoom").attr("data-name");
            if (e && e.value) {
              setSceneCameraControllerOptions(keys, e.value.newValue);
            }
          });

        //变焦时相机位置的最大量级
        $("#maximumZoom")
          .slider({
            min: 10000,
            max: 90000000,
            value: 50000000,
            step: 1000,
          })
          .on("change", (e) => {
            let key = $("#maximumZoom").attr("data-name");
            if (e && e.value) {
              setSceneCameraControllerOptions(key, e.value.newValue);
            }
          });

        // 低于此高度时绕鼠标键绕圈，大于时绕视图中心点绕圈 默认值为80000
        $("#minimumCollision")
          .slider({
            min: 1,
            max: 500000,
            value: 15000,
            step: 100,
          })
          .on("change", (e) => {
            let num = $("#minimumCollision").attr("data-name");
            if (e && e.value) {
              setSceneCameraControllerOptions(num, e.value.newValue);
            }
          });
      }

      function setSceneOptions(name, value) {
        var options = {};
        options[name] = value;
        map.setSceneOptions(options);
      }

      function setSceneGlobeOptions(name, value) {
        var options = { globe: {} };
        options.globe[name] = value;
        map.setSceneOptions(options);
      }

      function setSceneCameraControllerOptions(name, value) {
        var options = { cameraController: {} };
        options.cameraController[name] = value;
        map.setSceneOptions(options);
      }
    </script>
  </body>
</html>