skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
							<!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>Div文本点</title>

    <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" />
    <link href="css/divGraphic.css" rel="stylesheet" />
  </head>

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

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

    <div class="infoview">
      <div>
        图层状态：
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkShow" class="styled" type="checkbox" checked />
          <label for="chkShow"> 显示隐藏 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkPopup" class="styled" type="checkbox" />
          <label for="chkPopup"> Popup绑定 </label>
        </div>
        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkTooltip" class="styled" type="checkbox" />
          <label for="chkTooltip"> Tooltip绑定 </label>
        </div>
        <!-- <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkContextMenu" class="styled" type="checkbox" checked>
        <label for="chkContextMenu">
          右键菜单绑定
        </label>
      </div> -->
      </div>
      <div>
        数据维护：
        <input id="btnStartDraw" type="button" class="btn btn-primary" value="图上标绘" title="在图上绘制新增一个矢量数据" />

        <div class="checkbox checkbox-primary checkbox-inline">
          <input id="chkHasEdit" class="styled" type="checkbox" />
          <label for="chkHasEdit"> 是否编辑 </label>
        </div>
      </div>
      <div>
        数据管理：
        <input id="btnClear" type="button" class="btn btn-danger" value="清除" />
        <input id="btnExpFile" type="button" class="btn btn-primary" value="保存GeoJSON" title="保存为GeoJSON文件" />
        <input id="btnImpFile" type="button" class="btn btn-primary" value="打开GeoJSON" title="打开之前保存的GeoJSON文件" />

        <input id="input_draw_file" type="file" accept=".json,.geojson" style="display: none" />
      </div>
    </div>

    <!-- 切换视角到模型或地形（山区）的快捷按钮 -->
    <script type="text/javascript" src="js/center_terrain_3dtiles.js"></script>

    <!-- 图层管理相关处理js -->
    <script type="text/javascript" src="./js/graphicManager.js"></script>

    <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: 30.468743, lng: 116.499464, alt: 67446, heading: 0, pitch: -45 },
          },
        });

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

        //创建DIV数据图层
        var graphicLayer = new mars3d.layer.DivLayer();
        map.addLayer(graphicLayer);

        //图层管理的相关处理，代码在\js\graphicManager.js
        initLayerManager(graphicLayer);

        graphicLayer.unbindPopup();

        $("#btnStartDraw").click(function () {
          graphicLayer.startDraw({
            type: "div",
            style: {
              html: `<div class="marsImgPanel2">
                            <div class="title">测试DIV点</div>
                            <div class="content">此处可以绑定任意Html代码和css效果</div>
                        </div >`,
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            },
            success: function (graphic) {
              console.log("绘制完成", graphic);
            },
          });
        });

        //加一些演示数据
        addGraphic_01(graphicLayer);
        addGraphic_02(graphicLayer);
        addGraphic_03(graphicLayer);
        addGraphic_04(graphicLayer);
        addGraphic_05(graphicLayer);
        addGraphic_06(graphicLayer);
        addGraphic_07(graphicLayer);
        addGraphic_08(graphicLayer);
        addGraphic_09(graphicLayer);
        addGraphic_10(graphicLayer);
        addGraphic_11(graphicLayer);
      }

      //一个黑色面板，指向左下角黄色连线
      function addGraphic_01(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: [116.741611, 31.408068, 75.5],
          style: {
            html: `<div class="marsBlackPanel  animation-spaceInDown">
                    <div class="marsBlackPanel-text">大湖名城,创新高地</div>
                </div>`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), //按视距距离显示

            //高亮时的样式
            highlight: {
              // type: mars3d.EventType.click,
              className: "marsBlackPanel-highlight",
            },
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //一个渐变的文本面板,中间竖直连线
      function addGraphic_02(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: [116.510732, 31.403786, 176.4],
          style: {
            html: `<div class="marsBlueGradientPnl">
                    <div>合肥火星科技有限公司</div>
                </div>`,
            offsetY: -60,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), //按视距距离显示

            //高亮时的样式
            highlight: {
              type: mars3d.EventType.click,
              className: "marsBlueGradientPnl-highlight",
            },
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //
      function addGraphic_03(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: [116.960075, 31.19609, 237.4],
          style: {
            html: `<div class="marsGreenGradientPnl" >安徽欢迎您</div>`,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

            //高亮时的样式
            highlight: {
              type: mars3d.EventType.click,
              className: "marsGreenGradientPnl-highlight",
            },
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //添加GIF图标，DIV方式
      function addGraphic_04(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: [116.79013, 31.164872, 289],
          style: {
            html: '<img src="img/marker/tf.gif" style="width:50px;height:50px;" ></img>',
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
          },
          pointerEvents: false, //false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        });
        graphicLayer.addGraphic(graphic);
      }

      //加css动画的扩散点 DivLightPoint
      function addGraphic_05(graphicLayer) {
        var graphic = new mars3d.graphic.DivLightPoint({
          position: [116.630276, 31.213813],
          style: {
            color: "#f33349",
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          },
          popup: "测试popup",
        });
        graphicLayer.addGraphic(graphic);
      }

      //内置扩展的动态文本 DivBoderLabel
      function addGraphic_06(graphicLayer) {
        var graphic = new mars3d.graphic.DivBoderLabel({
          position: [116.460722, 31.140888, 781],
          style: {
            text: "火星科技Mars3D平台",
            font_size: 15,
            font_family: "微软雅黑",
            color: "#ccc",
            boderColor: "#15d1f2",
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //内置扩展的竖立文本 DivBoderLabel
      function addGraphic_07(graphicLayer) {
        var graphic = new mars3d.graphic.DivUpLabel({
          position: [116.327136, 30.99723, 914.6],
          style: {
            text: "我是竖立的文本",
            color: "#fff",
            font_size: 16,
            font_family: "微软雅黑",
            lineHeight: 60,
            circleSize: 8,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000), //按视距距离显示
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //类似popup/toolitp的自定义html
      function addGraphic_08(graphicLayer) {
        var graphic = new mars3d.graphic.Popup({
          position: [116.146461, 31.380152, 395.1],
          style: {
            html: `这里可以放入任意html代码<br /> Popup和Tooltip也是继承自DivGraphic`,
            closeButton: false,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示

            //高亮时的样式
            highlight: {
              type: mars3d.EventType.click,
              className: "mars-popup-highlight",
            },
          },
        });
        graphicLayer.addGraphic(graphic);
      }

      //倾斜指向左下角的面板样式
      function addGraphic_09(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: [116.138686, 31.101009, 1230],
          style: {
            html: `<div class="marsTiltPanel marsTiltPanel-theme-red">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">火星水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span id="lablLiuliang" class="label-num">39</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span id="lablYeWei"  class="label-num">10.22</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value">
                                      <span id="lablSBZT1"  class="label-tag data-value-status-1" alt="中间状态">1号</span>
                                      <span id="lablSBZT2"  class="label-tag data-value-status-0" alt="关闭状态">2号</span>
                                     </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">出水阀门：</div>
                                    <div class="data-value">
                                      <span id="lablCSFM1"   class="label-tag data-value-status-1" alt="中间状态">1号</span>
                                      <span id="lablCSFM2"   class="label-tag data-value-status-2" alt="打开状态">2号</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
            clampToGround: true,
          },
          pointerEvents: false, //false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        });
        graphicLayer.addGraphic(graphic);

        //刷新局部DOM,不影响面板的其他控件操作
        //[建议读取到后端接口数据后主动去修改DOM，比下面演示的实时刷新效率高些]
        graphic.on(mars3d.EventType.postRender, function (event) {
          let container = event.container; //popup对应的DOM

          let lablLiuliang = container.querySelector("#lablLiuliang");
          if (lablLiuliang) {
            lablLiuliang.innerHTML = (Math.random() * 100).toFixed(0); //测试的随机数
          }

          let lablYeWei = container.querySelector("#lablYeWei");
          if (lablYeWei) {
            lablYeWei.innerHTML = Number(new Date().format("ss.S")).toFixed(2); //测试的随机数
          }
        });

        //演示绑定单击事件
        $("#lablSBZT1").click(function () {
          haoutil.msg("单击了1号水泵");
        });
        $("#lablSBZT2").click(function () {
          haoutil.msg("单击了2号水泵");
        });
        $("#lablCSFM1").click(function () {
          haoutil.msg("单击了1号出水阀门");
        });
        $("#lablCSFM2").click(function () {
          haoutil.msg("单击了2号出水阀门");
        });
      }

      //倾斜指向左下角的面板样式
      function addGraphic_10(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: [116.228043, 30.882207],
          style: {
            html: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">大别山水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span class="label-num">99</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span class="label-num">20.02</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-0" alt="关闭状态">2号</span></div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">出水阀门：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-2" alt="打开状态">2号</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示
            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
            clampToGround: true,
          },
          //可以传入自定义测试点样式
          // testPoint: {
          //   color: '#ff0000',
          //   pixelSize: 8,
          // },
          pointerEvents: false, //false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        });
        graphicLayer.addGraphic(graphic);

        graphic.testPoint = true; //打开测试点，与DIV点进行对比位置调整css
      }

      //倾斜指向左下角的面板样式
      function addGraphic_11(graphicLayer) {
        var graphic = new mars3d.graphic.DivGraphic({
          position: Cesium.Cartesian3.fromDegrees(116.706926, 30.945346, 457.5),
          style: {
            html: `<div class="marsTiltPanel marsTiltPanel-theme-blue">
                <div class="marsTiltPanel-wrap">
                    <div class="area">
                        <div class="arrow-lt"></div>
                        <div class="b-t"></div>
                        <div class="b-r"></div>
                        <div class="b-b"></div>
                        <div class="b-l"></div>
                        <div class="arrow-rb"></div>
                        <div class="label-wrap">
                            <div class="title">岳西水厂</div>
                            <div class="label-content">
                                <div class="data-li">
                                    <div class="data-label">实时流量：</div>
                                    <div class="data-value"><span class="label-num">98</span><span class="label-unit">m³/s</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水池液位：</div>
                                    <div class="data-value"><span class="label-num">13.14</span><span class="label-unit">m</span>
                                    </div>
                                </div>
                                <div class="data-li">
                                    <div class="data-label">水泵状态：</div>
                                    <div class="data-value"><span class="label-tag data-value-status-1" alt="中间状态">1号</span><span
                                            class="label-tag data-value-status-0" alt="关闭状态">2号</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b-t-l"></div>
                    <div class="b-b-r"></div>
                </div>
                <div class="arrow" ></div>
            </div>`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 200000), //按视距距离显示
          },
        });
        graphicLayer.addGraphic(graphic);

        movePoint(graphic); //动画移动示例
      }

      //
      function movePoint(graphic) {
        map.clock.shouldAnimate = true;

        //动画移动
        var property = new Cesium.SampledPositionProperty();
        var time = 20; //移动的时长 ，秒
        var tempTime;

        //起点
        var startPoint = Cesium.Cartesian3.fromDegrees(116.706926, 30.945346, 457.5);
        tempTime = map.clock.currentTime; //飞行开始时间
        property.addSample(tempTime, startPoint);

        //移动到的第1个目标点
        var point1 = Cesium.Cartesian3.fromDegrees(116.311439, 30.76485, 423.7);
        tempTime = Cesium.JulianDate.addSeconds(tempTime, time, new Cesium.JulianDate());
        property.addSample(tempTime, point1);

        //移动到的第2个目标点
        var point2 = Cesium.Cartesian3.fromDegrees(116.63081, 30.786585, 85);
        tempTime = Cesium.JulianDate.addSeconds(tempTime, time, new Cesium.JulianDate());
        property.addSample(tempTime, point2);

        //移动到的第3个目标点
        var point3 = Cesium.Cartesian3.fromDegrees(116.706926, 30.945346, 457.5);
        tempTime = Cesium.JulianDate.addSeconds(tempTime, time, new Cesium.JulianDate());
        property.addSample(tempTime, point3);

        //为了保证到结束时间了，一直停留在那，所以加个很远的时间
        tempTime = Cesium.JulianDate.addDays(tempTime, 365, new Cesium.JulianDate());
        property.addSample(tempTime, point3);

        graphic.position = property;
      }
    </script>
  </body>
</html>