skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
							<!-- 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>CzmGeoJson图层(Cesium原生加载) </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">
      <div>
        示例：
        <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="showGuihuaDemo()" />
        <input type="button" class="btn btn-primary" value="安徽区域面" onclick="showAnhuiDemo()" />
      </div>
    </div>

    <div class="infoview" style="overflow: auto; left: 10px; top: 78px; max-height: calc(100% - 120px)">
      <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: 31.291758, lng: 117.333025, alt: 61430, heading: 0, pitch: -46 },
          },
          control: {
            infoBox: false,
          },
        });

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

        showPointDemo();
      }

      var geoJsonLayer;

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

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

        geoJsonLayer = new mars3d.layer.CzmGeoJsonLayer({
          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,
              label: {
                text: "{项目名称}",
                font_size: 25,
                color: "#ffffff",
                outline: true,
                outlineColor: "#000000",
                pixelOffsetY: -45,
                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.CzmGeoJsonLayer({
          name: "全国省界",
          url: "//data.mars3d.cn/file/geojson/areas/100000_full.json",
          symbol: {
            styleOptions: {
              fill: false,
              outline: true,
              outlineStyle: {
                color: "#ffffff",
                width: 2,
                opacity: 0.8,
              },
            },
          },
          flyTo: true,
        });
        map.addLayer(geoJsonLayer);

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

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

        geoJsonLayer = new mars3d.layer.CzmGeoJsonLayer({
          id: 1987,
          name: "用地规划",
          url: "//data.mars3d.cn/file/geojson/guihua.json",
          symbol: {
            styleOptions: {
              opacity: 0.6,
              color: "#0000FF",
              width: 3,
              clampToGround: true,
            },
            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);

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

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

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

        geoJsonLayer = new mars3d.layer.CzmGeoJsonLayer({
          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,
              },
              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);
        });

        var lastEntity;

        //清除高亮面
        function clearLastHighlightedEntity() {
          if (lastEntity == null) {
            return;
          }

          var color = lastEntity.polygon.material.color;
          var newclr = color.getValue().withAlpha(0.3);
          color.setValue(newclr);

          lastEntity = null;
        }

        //高亮面
        function highlightedEntity(entity) {
          if (!entity || !entity.polygon) {
            return;
          }

          var color = entity.polygon.material.color;
          var newclr = color.getValue().withAlpha(1);
          color.setValue(newclr);

          lastEntity = entity;
        }

        //绑定事件
        geoJsonLayer.on(mars3d.EventType.mouseOver, function (event) {
          console.log("鼠标移入图层", event);

          var entity = event.czmObject;
          if (entity && entity.polygon) {
            highlightedEntity(entity);
          }
        });
        geoJsonLayer.on(mars3d.EventType.mouseOut, function (event) {
          console.log("鼠标移出图层", event);

          var entity = event.czmObject;
          if (entity && entity.polygon) {
            clearLastHighlightedEntity();
          }
        });
      }

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

      function initTree(arr, nameColum = "name") {
        //初始化树
        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._entity;
        }

        $.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();
        for (var i = 0; i < changedNodes.length; i++) {
          var treeNode = changedNodes[i];
          treeNode.checkedOld = treeNode.checked;
          var entity = layersObj[treeNode.id];
          if (entity == null) {
            continue;
          }
          let show = treeNode.checked;
          //处理图层显示隐藏
          entity.show = show;
          if (entity._labelEx) {
            entity._labelEx.show = show;
          }
          if (entity._outlineEx) {
            entity._outlineEx.forEach((element) => {
              element.show = show;
            });
          }
        }
      }

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

        map.flyTo(entity);
      }
    </script>
  </body>
</html>