站点图标 GIS开发者

通过Easy-UI 树插件实现ArcGIS多个服务图层的图层控制

       项目上要一个图层控制功能,当时也找到一些别人分享的,但是只能实现对一个动态服务图层的控制,然而项目上叠加了好几个图层,需要实现对多个服务图层的控制。一开始想简单了,觉得有几个图层构建几次树不就完事了,这肯定是不行的,你会发现最后构建完成之后只有一个图层(最后构建的那个)。仔细想想其实就是在原来的图层之上再加一个层级关系。要把图层控制树显示出来问题不大,关键在于如何通过勾选框实现各个图层的显示与隐藏,代码写的有点乱。

效果图:

 

 

详细代码:

<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <title>TOC</title>
        <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.25/3.25/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />

        <link rel="stylesheet" href="easyui/themes/default/easyui.css">
        <script type="text/javascript" src="easyui/jquery.min.js "></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js "></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js "></script>
        <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.25/3.25/init.js"></script>
        <style type="text/css">
            *{
                margin:0px;
                padding:0px;
            }
            html,body{
                height:100%;
                width:100%;
                position: relative;
                overflow: hidden;
            }
        </style>

    </head>
    <body class="tundra">
        <div id="mapDiv" style="float:left;width: 70%;height: 100%;"></div>
        <div id="toc" style="float:left;width: 30%;height: 100%;"></div>
        <script type="text/javascript">
          require([
            'dojo/on',
            'esri/map',
            'esri/layers/ArcGISDynamicMapServiceLayer'
          ],function(
            on,
            Map,
            ArcGISDynamicMapServiceLayer
          ){
            var map=new Map('mapDiv');
            var layer1 = new ArcGISDynamicMapServiceLayer("http://10.200.223.191:6080/arcgis/rest/services/SDKD/MapServer", {id:"DynamicLayer1"});
            var layer2 = new ArcGISDynamicMapServiceLayer("http://10.200.223.191:6080/arcgis/rest/services/SDKD2/MapServer", {id:"DynamicLayer2"});
            var layers = [];
            layers.push(layer1);
            layers.push(layer2);
            map.addLayer(layer2);
            map.addLayer(layer1);
            map.on('load', function () {
              buildLayerList(layers);
            });

            /**
             * 构建图层树形结构
             */
            function buildLayerList(layers) {
              var treeList = [];//jquery-easyui的tree用到的tree_data.json数组

              var root = { "id": "rootnode", "text": "所有图层", "children": [] };//增加一个根节点
              var root2 = {};//二级根节点,对应动态地图服务图层个数
              let me = this;
              dojo.forEach(layers,function (layer) {
                root2  = {
                  "id": layer.id,
                  "text": layer.id,
                  "pid":-1,
                  "checked": layer.visible ? true : false,
                  "children": []
                };
                root.children.push(root2);
                var layerinfos = layer.layerInfos;
                var parentnodes = [];//保存所有的父亲节点
                var node = {};
                if (layerinfos != null && layerinfos.length > 0) {
                  for (var i = 0; i < layerinfos.length; i++) {
                    var info = layerinfos[i];
                    //node为tree用到的json数据
                    node = {
                      "id": info.id,
                      "text": info.name,
                      "pid": info.parentLayerId,
                      "checked": info.defaultVisibility ? true : false,
                      "children": []
                    };
                    if (info.parentLayerId == -1) {
                      parentnodes.push(node);
                      root2.children.push(node);
                    } else {
                      getChildrenNodes(parentnodes, node);
                      parentnodes.push(node);
                    }
                  }
                }
              });
              treeList.push(root);
              //jquery-easyui的树
              $('#toc').tree({
                data: treeList,
                checkbox: true, //使节点增加选择框
                lines:true,
                onCheck: function (node, checked) {//更新显示选择的图层
                  var visible = [];
                  var tempVisible = [];
                  for(var i=0; i<layers.length; i++){
                    visible[i] = tempVisible;   //二维数组
                  }
                  var nodes = $('#toc').tree("getChecked");
                  dojo.forEach(nodes, function (node) {
                    if (!isNaN(node.id)){
                      var tempNode = $('#toc').tree('getParent',node.target);
                      //只找叶子结点,
                      if(node.pid != -1){
                        for(var i=0; i<layers.length; i++){  //判断属于哪个图层服务
                          var layerId = $('#toc').tree('getParent',tempNode.target).id;
                          if(layerId === layers[i].id){
                            visible[i].push(node.id);

                          }
                        }
                      }

                    }

                  });
                  for(var i=0; i<layers.length; i++){
                    layers[i].setVisibleLayers(visible[i]);
                  }
                }
              });
            }


            function getChildrenNodes(parentnodes, node) {
              for (var i = parentnodes.length - 1; i >= 0; i--) {
                var pnode = parentnodes[i];
                //如果是父子关系,为父节点增加子节点,退出for循环  
                if (pnode.id == node.pid) {
                  pnode.state = "closed";//关闭二级树  
                  pnode.children.push(node);
                  return;
                } else {
                  //如果不是父子关系,删除父节点栈里当前的节点,  
                  //继续此次循环,直到确定父子关系或不存在退出for循环  
                  parentnodes.pop();
                }
              }
            }
          })
        </script>
    </body>
</html>

 

 

      如果遇到树结构显示不全问题,可能是图层未加载完成,获取不到LayerInfo信息,可以把构建树的操作放在ArcGIS JS API  里面的状态监听事件。

 if(layer.loaded){
    buildLayerList(layers);
 }else{
    layer.on('load', function () {
              buildLayerList(layers);
            });
}

转载自:https://blog.csdn.net/wml00000/article/details/82957538

退出移动版