skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
							<!-- 2017-12-7 14:56:03 | 修改 木遥（微信:  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>GeoJson图层 </title>

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

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

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

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

    <div id="viewSL" class="infoview">
      示例：
      <input type="button" class="btn btn-primary" value="标绘数据" onclick="showDrawDemo(true)" />
      <input type="button" class="btn btn-primary" value="体育设施点" onclick="showPointDemo()" />
      <input type="button" class="btn btn-primary" value="省界线" onclick="showChinaLineDemo()" />
      <!-- <input type="button" class="btn btn-primary" value="合肥区域面" onclick="showAnhuiDemo()" />
      <input type="button" class="btn btn-primary" value="合肥边界墙" onclick="showAnhui2Demo()" /> -->
      <input type="button" class="btn btn-primary" value="规划面" onclick="showGuihuaDemo()" />
      <input type="button" class="btn btn-primary" value="世界各国" onclick="showWorldDemo()" />

      <br />
      <input type="button" class="btn btn-primary" value="立体建筑物" onclick="showJianzhuwuDemo()" />
      <input type="button" class="btn btn-primary" value="分层分户楼栋" onclick="showJianzhuwuFcDemo()" />
      <input type="button" class="btn btn-primary" value="单体化面" onclick="showDantihuaDemo()" />
    </div>

    <div class="infoview" style="overflow: auto; right: 5px; left: auto; top: 50px; max-height: 90%">
      <ul id="treeOverlays" class="ztree"></ul>
    </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: 30.402686, lng: 116.303632, alt: 48692, heading: 3, pitch: -43 },
          },
        });

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

        showDrawDemo();
      }

      var geoJsonLayer;

      function removeLayer() {
        if (geoJsonLayer) {
          map.removeLayer(geoJsonLayer, true);
          geoJsonLayer = null;
        }
      }

      //示例：平台通过draw标绘后保存的geojosn数据（已经内置style了，无需配置symbol）
      function showDrawDemo(flyTo) {
        removeLayer();

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "标绘示例数据",
          url: "//data.mars3d.cn/file/geojson/mars3d-draw.json",
          popup: "{type} {name}",
          queryParameters: {
            token: "mars3d", //可以传自定义url参数，如token等
          },
          symbol: {
            merge: true,
            styleOptions: {
              //高亮时的样式
              highlight: {
                type: "click",
                opacity: 0.9,
              },
            },
          },
          flyTo: flyTo,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
        geoJsonLayer.on(mars3d.EventType.click, function (event) {
          console.log("单击了图层", event);
        });
      }

      //示例：显示点数据
      function showPointDemo() {
        removeLayer();

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "体育设施点",
          url: "//data.mars3d.cn/file/geojson/hfty-point.json",
          symbol: {
            styleOptions: {
              image: "img/marker/mark1.png",
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              scale: 1,
              scaleByDistance: true,
              scaleByDistance_far: 20000,
              scaleByDistance_farValue: 0.5,
              scaleByDistance_near: 1000,
              scaleByDistance_nearValue: 1,
              // setHeight: 5000, //指定高度
              label: {
                text: "{项目名称}",
                font_size: 25,
                color: "#ffffff",
                outline: true,
                outlineColor: "#000000",
                pixelOffsetY: -25,
                scaleByDistance: true,
                scaleByDistance_far: 80000,
                scaleByDistance_farValue: 0.5,
                scaleByDistance_near: 1000,
                scaleByDistance_nearValue: 1,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 80000,
                distanceDisplayCondition_near: 0,
              },
            },
          },
          popup: [
            { field: "项目名称", name: "项目名称" },
            { field: "建设性质", name: "建设性质" },
            { field: "设施级别", name: "设施级别" },
            { field: "所属区县", name: "所属区县" },
            { field: "建筑内容及", name: "建筑内容" },
            { field: "新增用地（", name: "新增用地" },
            { field: "开工", name: "开工" },
            { field: "总投资（万", name: "总投资" },
            { field: "资金来源", name: "资金来源" },
            { field: "初步选址", name: "初步选址" },
            { field: "设施类型", name: "设施类型" },
            { field: "设施等级", name: "设施等级" },
            { field: "所在区县", name: "所在区县" },
            { field: "具体位置", name: "具体位置" },
            { field: "建设内容（", name: "建设内容" },
            { field: "用地面积（", name: "用地面积", format: "mars3d.MeasureUtil.formatArea" },
            { field: "设施规模（", name: "设施规模" },
            { field: "举办者类型", name: "举办者类型" },
            { field: "开工时间", name: "开工时间" },
            { field: "总投资额（", name: "总投资额", unit: "亿元" },
            { field: "项目推进主", name: "项目推进主体" },
            { field: "项目进度", name: "项目进度" },
            { field: "项目来源", name: "项目来源" },
            { field: "备注", name: "备注" },
          ],
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list, "项目名称");
        });
        geoJsonLayer.on(mars3d.EventType.click, function (event) {
          console.log("单击了图层", event);
        });
      }

      //示例：显示线数据
      function showChinaLineDemo() {
        removeLayer();

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "全国省界",
          url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
          symbol: {
            type: "polylineCombine",
            styleOptions: {
              width: 2,
              material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
                color: "#00ffff",
                image: "img/textures/fenceline.png",
                speed: 10,
                repeat_x: 10,
              }),
              label: {
                text: "{name}",
                font_size: 30,
                color: "#ffffff",
                outline: true,
                outlineColor: "#000000",
                scaleByDistance: true,
                scaleByDistance_far: 60000000,
                scaleByDistance_farValue: 0.2,
                scaleByDistance_near: 1000000,
                scaleByDistance_nearValue: 1,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 12000000,
                distanceDisplayCondition_near: 0,

                position: "{center}", //省会位置center
                setHeight: 10000,
              },
            },
          },
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
      }

      //示例：显示面数据（规划面）
      function showGuihuaDemo() {
        removeLayer();

        map.setCameraView({ lat: 31.591382, lng: 120.718945, alt: 784, heading: 279, pitch: -67 });

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          id: 1987,
          name: "用地规划",
          url: "//data.mars3d.cn/file/geojson/guihua.json",
          symbol: {
            type: "polygonCombine",
            styleOptions: {
              opacity: 0.6,
              color: "#0000FF",
              outline: true,
              outlineWidth: 3,
              outlineColor: "#ffffff",
            },
            styleField: "类型",
            styleFieldOptions: {
              一类居住用地: { color: "#FFDF7F" },
              二类居住用地: { color: "#FFFF00" },
              社区服务用地: { color: "#FF6A38" },
              幼托用地: { color: "#FF6A38" },
              商住混合用地: { color: "#FF850A" },
              行政办公用地: { color: "#FF00FF" },
              文化设施用地: { color: "#FF00FF" },
              小学用地: { color: "#FF7FFF" },
              初中用地: { color: "#FF7FFF" },
              体育场用地: { color: "#00A57C" },
              医院用地: { color: "#A5527C" },
              社会福利用地: { color: "#FF7F9F" },
              商业用地: { color: "#FF0000" },
              商务用地: { color: "#7F0000" },
              营业网点用地: { color: "#FF7F7F" },
              一类工业用地: { color: "#A57C52" },
              社会停车场用地: { color: "#C0C0C0" },
              通信用地: { color: "#007CA5" },
              排水用地: { color: "#00BFFF" },
              公园绿地: { color: "#00FF00" },
              防护绿地: { color: "#007F00" },
              河流水域: { color: "#7FFFFF" },
              配建停车场: { color: "#ffffff" },
              道路用地: { color: "#ffffff" },
            },
          },
          popup: "类型:{类型}",
          // flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //下面代码演示如果再config.json中配置的图层，如何绑定额外事件方法
        // 绑定config.json中对应图层配置的"id"值图层的单击事件（比如下面是id:1987对应图层）
        var layerTest = map.getLayer(1987, "id");
        //绑定事件
        layerTest.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list, "类型");
        });

        layerTest.on(mars3d.EventType.click, function (event) {
          //单击事件
          console.log("单击了图层", event);
        });
      }

      //示例： 立体建筑物
      function showJianzhuwuDemo() {
        removeLayer();

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "建筑物面",
          url: "//data.mars3d.cn/file/geojson/buildings-demo.json",
          symbol: {
            styleOptions: {
              color: "#0d3685",
              outlineColor: "#0d3685",
              opacity: 0.8,
            },
            callback: function (attr, styleOpt) {
              var diffHeight = Number(attr.floors || 1) * Number(attr.flo_height);
              return { height: 0, diffHeight: diffHeight };
            },
          },
          center: { lat: 31.928659, lng: 120.420654, alt: 838, heading: 344, pitch: -42 },
          popup: "all",
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
      }

      //示例： 分层分户立体建筑物
      function showJianzhuwuFcDemo() {
        removeLayer();

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "分层分户建筑物面",
          url: "//data.mars3d.cn/file/geojson/huxing.json",
          symbol: {
            styleOptions: {
              color: "#ffffff",
              opacity: 0.2,
              outline: true,
              outlineColor: "#63AEFF",
              outlineOpacity: 0.3,

              highlight: {
                type: "click",
                color: "#00ffff",
                opacity: 0.6,
              },
            },
            callback: function (attr, styleOpt) {
              var flrH = attr.floorh || 0; //底面高度
              var lyrH = attr.layerh || 0; //楼层高度

              return { height: flrH, diffHeight: lyrH };
            },
          },
          // popup: "all",
          center: { lat: 31.821524, lng: 117.179329, alt: 255, heading: 25, pitch: -48 },
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
      }

      //示例：显示面数据（安徽行政区划），鼠标高亮处理
      function showAnhuiDemo() {
        removeLayer();

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "合肥市",
          url: "//data.mars3d.cn/file/geojson/areas/340100_full.json",
          symbol: {
            styleOptions: {
              fill: true,
              randomColor: true, //随机色
              opacity: 0.3,
              outline: true,
              outlineStyle: {
                color: "#FED976",
                width: 3,
                opacity: 1,
              },
              //高亮时的样式
              highlight: {
                opacity: 0.9,
              },
              label: {
                //面中心点，显示文字的配置
                text: "{name}", //对应的属性名称
                opacity: 1,
                font_size: 40,
                color: "#ffffff",

                font_family: "楷体",
                outline: true,
                outlineColor: "#000000",
                outlineWidth: 3,

                background: false,
                backgroundColor: "#000000",
                backgroundOpacity: 0.1,

                font_weight: "normal",
                font_style: "normal",

                scaleByDistance: true,
                scaleByDistance_far: 20000000,
                scaleByDistance_farValue: 0.1,
                scaleByDistance_near: 1000,
                scaleByDistance_nearValue: 1,

                distanceDisplayCondition: false,
                distanceDisplayCondition_far: 10000,
                distanceDisplayCondition_near: 0,
                visibleDepth: false,
              },
            },
          },
          popup: "{name}",
          // "tooltip": "{name}",
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
        geoJsonLayer.on(mars3d.EventType.click, function (event) {
          console.log("单击了图层", event);
        });
      }

      //示例： 行政区划 ，转为wall显示
      function showAnhui2Demo() {
        removeLayer();

        map.setCameraView({ lat: 30.561661, lng: 117.663884, alt: 113078, heading: 346, pitch: -43 });

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "合肥市",
          url: "//data.mars3d.cn/file/geojson/areas/340100_full.json",
          symbol: {
            type: "wall",
            styleOptions: {
              diffHeight: 5000, //墙高
              materialType: mars3d.MaterialType.LineFlow,
              speed: 10, //速度
              image: "img/textures/fence.png", //图片
              repeatX: 1, //重复数量
              axisY: true, //竖直方向
              color: "#00ffff", //颜色
              opacity: 0.6, //透明度
              //高亮时的样式
              highlight: {
                type: "click",
                color: "#ffff00",
              },
            },
          },
          popup: "{name}",
          // "tooltip": "{name}",
          // flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
        geoJsonLayer.on(mars3d.EventType.click, function (event) {
          console.log("单击了图层", event);
        });
      }

      //示例：显示特殊面数据（单体化）
      var tilesetLayer;
      function showDantihuaDemo() {
        removeLayer();

        //三维模型
        if (!tilesetLayer) {
          tilesetLayer = new mars3d.layer.TilesetLayer({
            name: "文庙",
            type: "3dtiles",
            url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
            position: { alt: 80.6 },
            maximumScreenSpaceError: 1,
            maximumMemoryUsage: 1024,
            show: true,
          });
          map.addLayer(tilesetLayer);
        }

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "文庙-单体化",
          url: " //data.mars3d.cn/file/geojson/dth-wm.json",
          symbol: {
            type: "polygonP",
            styleOptions: {
              //单体化默认显示样式
              color: "rgba(255, 255, 255, 0.01)",
              clampToGround: true,
              classification: true,
              //单体化鼠标移入或单击后高亮的样式
              highlight: {
                // type: mars3d.EventType.click,
                color: "rgba(255,255,0,0.4)",
              },
            },
          },
          popup: [
            { field: "name", name: "房屋名称" },
            { field: "jznf", name: "建造年份" },
            { field: "ssdw", name: "所属单位" },
            { field: "remark", name: "备注信息" },
          ],
          center: { lat: 33.589442, lng: 119.031613, alt: 254, heading: 5, pitch: -37 },
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list, "房屋名称");
        });
      }

      //示例：显示世界各国
      function showWorldDemo() {
        removeLayer();

        map.setCameraView({ lat: 22.564341, lng: 89.44688, alt: 10817167, heading: 356, pitch: -87 });

        geoJsonLayer = new mars3d.layer.GeoJsonLayer({
          name: "国界线",
          url: "//data.mars3d.cn/file/geojson/world.json",
          symbol: {
            type: "polygonP",
            styleOptions: {
              fill: true,
              // color: '#ffffff',
              // opacity: 0.01,
              randomColor: true,
              opacity: 0.5,

              //高亮时的样式
              highlight: {
                type: "click",
                color: "#ffff00",
              },
            },
            styleField: "name",
            styleFieldOptions: {
              Russia: { clampToGround: true },
            },
          },
          popup: "{name} {name_cn}",
        });
        map.addLayer(geoJsonLayer);

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.load, function (event) {
          console.log("数据加载完成", event);
          initTree(event.list);
        });
        geoJsonLayer.on(mars3d.EventType.click, function (event) {
          console.log("单击了图层", event);
        });
      }

      //===========================树控件处理============================
      var layersObj = {};

      function initTree(arr, nameColum = "name") {
        if (!arr || arr.length == 0) {
          return;
        }

        //初始化树
        var setting = {
          check: {
            enable: true,
          },
          data: {
            simpleData: {
              enable: true,
            },
          },
          callback: {
            onCheck: treeOverlays_onCheck,
            onClick: treeOverlays_onClick,
          },
        };

        var zNodes = [];
        var pnode = {
          id: -1,
          name: "全部",
          type: "group",
          open: false,
          checked: true,
          icon: "../lib/jquery/ztree/css/mars/images/folder.png",
        };
        zNodes.push(pnode);

        for (var i = 0, len = arr.length; i < len; i++) {
          var item = arr[i];
          var name = item[nameColum] || "未命名";

          var node = {
            id: i,
            pId: pnode.id,
            name: name,
            checked: true,
            icon: "../lib/jquery/ztree/css/mars/images/layer.png",
          };
          zNodes.push(node);

          layersObj[i] = item.graphic;
        }

        $.fn.zTree.destroy();
        $.fn.zTree.init($("#treeOverlays"), setting, zNodes);
      }

      function treeOverlays_onCheck(e, treeId) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);

        //获得所有改变check状态的节点
        var changedNodes = zTree.getChangeCheckedNodes();
        if (changedNodes) {
          for (var i = 0; i < changedNodes.length; i++) {
            var treeNode = changedNodes[i];
            treeNode.checkedOld = treeNode.checked;
            var graphic = layersObj[treeNode.id];
            if (graphic == null) {
              continue;
            }
            let show = treeNode.checked;
            //处理图层显示隐藏
            graphic.show = show;
          }
        }
      }

      function treeOverlays_onClick(event, treeId, treeNode) {
        var graphic = layersObj[treeNode.id];
        if (graphic == null) {
          return;
        }

        map.flyToGraphic(graphic);
      }
    </script>
  </body>
</html>