skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
							<!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>坐标拾取和转换 </title>

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

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

  <body class="dark">
    <div id="mars3dContainer" class="mars3d-container"></div>
    <div class="infoview">
      <div>
        <!-- radio 按钮 -->
        <div>
          <span>范围：</span>
          <div class="radio radio-info radio-inline">
            <input type="radio" id="rdoType1" name="rdoType" value="1" checked />
            <label for="rdoType1">十进制</label>
          </div>
          <div class="radio radio-info radio-inline">
            <input type="radio" id="rdoType2" name="rdoType" value="2" />
            <label for="rdoType2">度分秒</label>
          </div>
          <div class="radio radio-info radio-inline" title="2000平面坐标">
            <input type="radio" id="rdoType3" name="rdoType" value="3" />
            <label for="rdoType3">平面坐标</label>
          </div>
        </div>

        <!--十进制 经纬度坐标 高程 表单 -->
        <form id="decimalSystemForm" class="form-horizontal" autocomplete="off">
          <div class="viewTen">
            <div title="请输入-180至180之间的数字">
              <label>经度：</label>
              <input type="text" id="txtLngTen" step="0.000001" onchange="changeTen()" />
            </div>
            <div title="请输入-90至90之间的数字">
              <label>纬度：</label>
              <input type="text" id="txtLatTen" step="0.000001" onchange="changeTen()" />
            </div>
            <div>
              <label>高程：</label>
              <input type="text" id="txtLatAlt" step="0.1" onchange="changeTen()" />
            </div>
          </div>
        </form>

        <!-- 度分秒 经纬度 高程表单 -->
        <form id="coordinateForm" autocomplete="off">
          <div class="viewDms" style="display: none">
            <div>
              <label>经度：</label>
              <input type="text" style="width: 80px" id="txtLngDegree" onchange="changeDfm()" /><label>&nbsp;° </label>
              <input type="text" style="width: 80px" id="txtLngMinute" onchange="changeDfm()" /><label>&nbsp;′ </label>
              <input type="text" style="width: 80px" id="txtLngSecond" onchange="changeDfm()" /><label>&nbsp;″ </label>
            </div>
            <div>
              <label>纬度：</label>
              <input type="text" style="width: 80px" id="txtLatDegree" onchange="changeDfm()" /><label>&nbsp;° </label>
              <input type="text" style="width: 80px" id="txtLatMinute" onchange="changeDfm()" /><label>&nbsp;′ </label>
              <input type="text" style="width: 80px" id="txtLatSecond" onchange="changeDfm()" /><label>&nbsp;″ </label>
            </div>
            <div>
              <label>高程：</label>
              <input type="text" name="txtDmsAlt" id="txtDmsAlt" step="0.1" onchange="changeDfm()" />
            </div>
          </div>
        </form>

        <!-- 2000平面坐标 表单-->
        <form class="planeForm" autocomplete="off">
          <div class="viewGk" style="display: none">
            <div>
              <span>分带：</span>
              <div class="radio radio-info radio-inline">
                <input type="radio" id="rdoGkType1" name="rdoGkType" value="1" checked />
                <label for="rdoGkType1">三度带</label>
              </div>
              <div class="radio radio-info radio-inline">
                <input type="radio" id="rdoGkType2" name="rdoGkType" value="2" checked />
                <label for="rdoGkType2">六度带</label>
              </div>
            </div>

            <div class="viewGk3" style="display: none">
              <div>
                <label>纵坐标：</label>
                <input type="text" id="txtGk3X" onchange="change3GKZone()" />
              </div>
              <div>
                <label>横坐标：</label>
                <input type="text" id="txtGk3Y" onchange="change3GKZone()" />
              </div>
              <div>
                <label>高度值：</label>
                <input type="text" id="txtGk3Alt" step="0.1" onchange="change3GKZone()" />
              </div>
            </div>

            <div class="viewGk6">
              <div>
                <label>纵坐标：</label>
                <input type="text" id="txtGk6X" onchange="change6GKZone()" />
              </div>
              <div>
                <label>横坐标：</label>
                <input type="text" id="txtGk6Y" onchange="change6GKZone()" />
              </div>
              <div>
                <label>高度值：</label>
                <input type="text" id="txtGk6Alt" step="0.1" onchange="change6GKZone()" />
              </div>
            </div>
          </div>
        </form>
      </div>
      <!-- "坐标定位" button按钮 -->
      <div style="text-align: center">
        <input type="button" class="btn btn-primary" value="图上拾取" onclick="bindMourseClick()" />
        <input type="button" class="btn btn-primary" value="坐标定位" onclick="submitCenter()" />
      </div>
    </div>

    <!--业务代码-->
    <script src="./js/common.js"></script>
    <script>
      "use script"; //开发环境建议开启严格模式

      var map;

      //全局中间变量
      let currJD;
      let currWD;
      let currGD;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 31.728284, lng: 117.274164, alt: 25061, heading: 358, pitch: -69 },
            fxaa: true,
          },
        });

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

        //默认显示地图中心点坐标
        var point = map.getCenter();
        point.format();
        currJD = point.lng;
        currWD = point.lat;
        currGD = point.alt;
        updateTen();

        $('input:radio[name="rdoType"]').change(function () {
          var selectType = $(this).val();

          switch (selectType) {
            default:
              //十进制
              $(".viewTen").show();
              $(".viewDms").hide();
              $(".viewGk").hide();
              updateTen();
              break;
            case "2": //度分秒
              $(".viewDms").show();
              $(".viewTen").hide();
              $(".viewGk").hide();
              updataDfm();
              break;
            case "3": //CGCS2000
              $(".viewTen").hide();
              $(".viewDms").hide();
              $(".viewGk").show();
              updata3GKZone();
              updata6GKZone();
              break;
          }
        });

        $('input:radio[name="rdoGkType"]').change(function () {
          var selectType2 = $(this).val();
          switch (selectType2) {
            default:
              $(".viewGk3").show();
              $(".viewGk6").hide();
              updata3GKZone();
              break;
            case "2": //当前视角范围
              $(".viewGk3").hide();
              $(".viewGk6").show();
              updata6GKZone();
              break;
          }
        });
      }

      //修改了：十进制
      function changeTen() {
        currJD = Number($("#txtLngTen").val() || 0); //获取经度
        currWD = Number($("#txtLatTen").val() || 0); //获取纬度
        currGD = Number($("#txtLatAlt").val() || 0); //高度
      }
      //更新：十进制
      function updateTen() {
        $("#txtLngTen").val(mars3d.Util.formatNum(currJD, 6));
        $("#txtLatTen").val(mars3d.Util.formatNum(currWD, 6));
        $("#txtLatAlt").val(mars3d.Util.formatNum(currGD, 1));
      }

      //修改了：度分秒
      function changeDfm() {
        let jd_du = Number($("#txtLngDegree").val() || 0); //获取
        let jd_fen = Number($("#txtLngMinute").val() || 0);
        let jd_miao = Number($("#txtLngSecond").val() || 0);
        currJD = mars3d.PointTrans.dms2degree(jd_du, jd_fen, jd_miao);

        let wd_du = Number($("#txtLatDegree").val() || 0); //获取
        let wd_fen = Number($("#txtLatMinute").val() || 0);
        let wd_miao = Number($("#txtLatSecond").val() || 0);
        currWD = mars3d.PointTrans.dms2degree(wd_du, wd_fen, wd_miao);

        currGD = Number($("#txtDmsAlt").val() || 0); //高度
      }
      //更新：度分秒
      function updataDfm() {
        let tenJD = mars3d.PointTrans.degree2dms(currJD);
        $("#txtLngDegree").val(tenJD.degree);
        $("#txtLngMinute").val(tenJD.minute);
        $("#txtLngSecond").val(tenJD.second);

        let tenWD = mars3d.PointTrans.degree2dms(currWD);
        $("#txtLatDegree").val(tenWD.degree);
        $("#txtLatMinute").val(tenWD.minute);
        $("#txtLatSecond").val(tenWD.second);

        $("#txtDmsAlt").val(currGD);
      }

      //修改了：2000平面坐标三分度
      function change3GKZone() {
        let jd = Number($("#txtGk3X").val()); //获取
        let wd = Number($("#txtGk3Y").val());

        var gk3 = mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_3, mars3d.CRS.EPSG4326);
        currJD = gk3[0];
        currWD = gk3[1];

        currGD = Number($("#txtGk3Alt").val() || 0); //高度
      }
      //更新：2000平面坐标三分度
      function updata3GKZone() {
        var zone3 = mars3d.PointTrans.proj4Trans([currJD, currWD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_3); //十进制转2000平面三分度
        $("#txtGk3X").val(mars3d.Util.formatNum(zone3[0], 1));
        $("#txtGk3Y").val(mars3d.Util.formatNum(zone3[1], 1));
        $("#txtGk3Alt").val(currGD);
      }

      //修改了：2000平面坐标六分度
      function change6GKZone() {
        let jd = Number($("#txtGk6X").val()); //获取
        let wd = Number($("#txtGk6Y").val());
        var gk6 = mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_6, mars3d.CRS.EPSG4326);

        currJD = gk6[0];
        currWD = gk6[1];
        currGD = Number($("#txtGk6Alt").val() || 0); //高度
      }
      //更新：2000平面坐标六分度
      function updata6GKZone() {
        var zoon6 = mars3d.PointTrans.proj4Trans([currJD, currWD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_6); //十进制转2000平面六分度
        $("#txtGk6X").val(mars3d.Util.formatNum(zoon6[0], 1));
        $("#txtGk6Y").val(mars3d.Util.formatNum(zoon6[1], 1));
        $("#txtGk6Alt").val(currGD);
      }

      //图上拾取
      function bindMourseClick() {
        map.setCursor(true);
        map.once(mars3d.EventType.click, function (event) {
          map.setCursor(false);
          var cartesian = event.cartesian;
          var point = mars3d.LatLngPoint.fromCartesian(cartesian);
          point.format(); //经度、纬度、高度

          currJD = point.lng;
          currWD = point.lat;
          currGD = point.alt;

          //更新面板
          let selectType = $('input:radio[name="rdoType"]:checked').val();
          switch (selectType) {
            default:
              //十进制
              updateTen();
              break;
            case "2": //度分秒
              updataDfm();
              break;
            case "3": //CGCS2000
              var selectType2 = $('input:radio[name="rdoGkType"]:checked').val();
              if (selectType2 == "2") {
                updata6GKZone();
              } else {
                updata3GKZone();
              }
              break;
          }
          //end
          updateMarker();
        });
      }

      function submitCenter() {
        if (currJD > 180 || currJD < -180) {
          haoutil.alert("请输入有效的经度值！");
          return;
        }
        if (currWD > 90 || currWD < -90) {
          haoutil.alert("请输入有效的纬度值！");
          return;
        }

        updateMarker(true); //更新点
      }

      var pointEntity;
      function updateMarker(hasCenter) {
        var position = [currJD, currWD, currGD];
        if (pointEntity == null) {
          pointEntity = new mars3d.graphic.PointEntity({
            position: position,
            style: {
              color: "#3388ff",
              pixelSize: 10,
              outlineColor: "#ffffff",
              outlineWidth: 2,
            },
          });
          map.graphicLayer.addGraphic(pointEntity);
        } else {
          pointEntity.position = position;
        }

        if (hasCenter) {
          pointEntity.flyTo({ radius: 1000 });
        }
      }
    </script>
  </body>
</html>