skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!-- 2017-12-4 14:24:12 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!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="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>旋转的地球 </title>

  <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
    include="jquery,font-awesome,bootstrap,layer,haoutil,turf,mars3d"></script>

  <link href="css/style.css" rel="stylesheet" />

  <!--btnbar-->
  <link href="js/btnbar/btnbar.css" rel="stylesheet" />
  <script src="js/btnbar/btnbar.js"></script>
</head>

<body class="dark">
  <!--加载前进行操作提示，优化用户体验-->
  <div id="mask" class="signmask" onclick="removeMask()"></div>

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

  <div class="infoview">
    <input id="btnStart" type="button" class="btn btn-primary" value="开始" />
    <input id="btnStop" type="button" class="btn btn-primary" value="停止" />
  </div>

  <div class="infoview infoview-js">
    <div class="infoview_panel">
      <div class="infoview_panel_scroll">
        <div class="title">合肥火星科技有限公司</div>
        <div>
          <label>公司简介:</label>
          <span>合肥火星科技有限公司（简称：火星科技），于2017年在安徽合肥成立，自成立以来，公司致力于三维可视化技术和GIS地理信息技术的研究与探索，公司耕耘在军工、航天、仿真、智慧城市等行业领域，主营业务模式围绕Mars2D、Mars3D系列平台级产品展开，持续为客户提供着自主可控、专业高效、具备可视化行业前沿科技的产品解决方案与服务。</span>
        </div>
        <div>
          <label>公司资质:</label>
          <span></span>
          公司围绕三维可视化领域已取得软件著作权和专利30多项，属于国家高新技术企业、“双软”认定企业、合肥市大数据企业、中国软件协会认定的AAA
          信用企业、已通过ISO9001质量管理体系认证。</span>
        </div>
        <div>
          <label>主要产品:</label>
          <span>Mars3D是火星科技研发的一款基于 WebGL
            技术实现的三维客户端开发平台，基于Cesium优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。</span>
        </div>
      </div>
    </div>
  </div>

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

    var map;

    function initMap(options) {
      //合并属性参数，可覆盖config.json中的对应配置
      var mapOptions = mars3d.Util.merge(options, {
        scene: {
          center: { lat: 26.520735, lng: 120.914959, alt: 23891502.7, heading: 92.1, pitch: -76.8, roll: 267.9 },
          clock: {
            multiplier: 200, //速度
          },
        },
      });

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

      //按shift键+鼠标左键 拖拽 地球到合适区域，通过下面代码获取视角参数，拷贝到mapOptions的center参数中。
      let center = map.getCameraView({ simplify: false });

      $("#btnStart").click(function () {
        startRotate();
      });

      $("#btnStop").click(function () {
        stopRotate();
      });

      startRotate();

      //加点演示的矢量数据
      addGraphics();

      //下侧的按钮
      btnbar.init([
        {
          name: "公司简介",
          click: function () {
            haoutil.msg("你单击了功能按钮-公司简介");
          },
        },
        {
          name: "公司产品",
          click: function () {
            haoutil.msg("你单击了功能按钮-公司产品");
          },
        },

        {
          name: "公司项目",
          click: function () {
            haoutil.msg("你单击了功能按钮-公司项目");
          },
        },
      ]);
    }

    function startRotate() {
      stopRotate();

      previousTime = map.clock.currentTime.secondsOfDay;
      map.on(mars3d.EventType.clockTick, map_onClockTick);
    }

    function stopRotate() {
      map.off(mars3d.EventType.clockTick, map_onClockTick);
    }

    var previousTime;

    // 地球旋转
    function map_onClockTick(clock) {
      var spinRate = 1;

      var currentTime = map.clock.currentTime.secondsOfDay;
      var delta = (currentTime - previousTime) / 1000;
      previousTime = currentTime;
      map.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }

    function addGraphics() {
      var center = Cesium.Cartesian3.fromDegrees(117.203932, 31.856794, 31.8);
      //公司位置 矢量对象标记
      var lightCone = new mars3d.graphic.LightCone({
        position: center,
        style: {
          color: "rgba(0,255,255,0.9)",
          radius: 80000, //底部半径
          height: 1000000, //椎体高度
        },
        show: true,
      });
      map.graphicLayer.addGraphic(lightCone);

      queryAreasData().then(function (geojson) {
        let arr = mars3d.Util.geoJsonToGraphics(geojson); //解析geojson
        var lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
          image: "img/textures/lineClr.png",
          color: new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 0.5),
          speed: 9,
        });
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i].attr;
          if (item.name) {
            var thisPoint = Cesium.Cartesian3.fromDegrees(item.center[0], item.center[1]);
            var positions = mars3d.PolyUtil.getLinkedPointList(center, thisPoint, 40000, 100); //计算曲线点
            var primitive = new mars3d.graphic.PolylinePrimitive({
              positions: positions,
              style: {
                width: 2,
                material: lineMaterial, //动画线材质
              },
              attr: item,
            });
            primitive.bindTooltip(`合肥 - ${item.name}`);
            map.graphicLayer.addGraphic(primitive);
          }
        }
      });
    }

    function queryAreasData() {
      return new Promise(function (resolve, reject) {
        $.ajax({
          url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
          type: "get",
          dataType: "json",
          success: function (geojson) {
            resolve(geojson);
          },
          error: function (data) {
            reject(data);
          },
        });
      });
    }
  </script>
</body>

</html>