ArcGIS api for javascript-图层控制

最新推荐文章于 2020-09-12 21:55:19 发布

Allen-Y

最新推荐文章于 2020-09-12 21:55:19 发布

阅读量755

点赞数 1

分类专栏：前端文章标签： arcgis-htm

本文链接：https://blog.csdn.net/youxia918/article/details/50966488

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图层控制

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

<title>图层控制</title>
<link rel="stylesheet" type="text/css"
    href="http://localhost:8080/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"
    href="http://localhost:8080/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />
<script type="text/javascript">
    dojoConfig = {
        parseOnLoad : true
    };
</script>
<script type="text/javascript"
    src="http://localhost:8080/arcgis_js_api/library/3.2/jsapi/init.js"></script>

    <script type="text/javascript" src='../resources/jquery/jquery-1.7.2.min.js'></script>
    <link rel="stylesheet" type="text/css" href='../resources/jquery/themes/gray/easyui.css'>    
    <link rel="stylesheet" type="text/css" href="../resources/jquery/themes/icon.css">    
    <script type="text/javascript" src='../resources/jquery/jquery.easyui.min.js'></script>
    <script type="text/javascript" src='../resources/jquery/locale/easyui-lang-zh_CN.js' charset="utf-8"></script>
    <script>
        dojo.require("esri.map");

    var layer, map, visible = [];

    function init() {
        map = new esri.Map("map");
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.10.200:8399/arcgis/rest/services/toctree/MapServer");

        if (layer.loaded) {
            buildLayerList(layer);
        } else {
            dojo.connect(layer, "onLoad", buildLayerList);
        }
    }

    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() ;
            }
        }
    }

    function buildLayerList(layer) {
　　　　//构建图层树形结构
　　　　 var layerinfos = layer.layerInfos ;
        var treeList = [] ;//jquery-easyui的tree用到的tree_data.json数组
        var parentnodes = [] ;//保存所有的父亲节点
        var root = {"id":"rootnode","text":"所有图层","children":[]} ;//增加一个根节点
        var node = {} ;
        if (layerinfos != null && layerinfos.length > 0) {

            for(var i=0,j=layerinfos.length;i<j;i++){
                var info = layerinfos[i] ;
                if (info.defaultVisibility) {
                    visible.push(info.id);
                }
　　　　　　　　　//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) ;
                    root.children.push(node) ;
                }else{
                     getChildrenNodes(parentnodes, node);
                      parentnodes.push(node) ;
                }
            }
        }
        treeList.push(root) ;
        //jquery-easyui的树        
        $('#toc').tree({   
            data:treeList ,
            checkbox :true, //使节点增加选择框
            onCheck:function (node,checked){//更新显示选择的图层
                var visible = [];

                var nodes = $('#toc').tree("getChecked") ;
                dojo.forEach(nodes, function(node) {
                    visible.push(node.id);
                });
                //if there aren't any layers visible set the array to be -1
                if (visible.length === 0) {
                    visible.push(-1);
                }
                layer.setVisibleLayers(visible);
            }
        }); 


        layer.setVisibleLayers(visible);
        map.addLayer(layer);
    }

    dojo.ready(init);
    </script>

</head>
<body class="easyui-layout">

    <div data-options="region:'west',split:true,title:'菜单'" style="width:200px;padding:10px;">
        <div id="panelHeader"
            style="width: 100%; height: 100%;">
            图层控制：<br /> 
            <ul id="toc" class="easyui-tree"></ul>
        </div>
    </div>
    <div data-options="region:'center',title:'地图'">
        <div id="map"
        style="width: 100%; height: 100%; "></div>
    </div>
</body>
</html>