• WEBGIS控制图层的显示


    看别人搞的GIS应用,常常有勾选、取消某个图层的操作,然后地图上就有相应的图形显隐,觉得好酷。

    咋实现的?

    其实说起来好像也不是特别复杂。在WEB端,实现该功能的原理和步骤是:

    1、WEB端加载地图服务的时候,可以拿到图层信息,包括名称,ID,父ID,子图层数组,默认可见性,等等。
    这里写图片描述

    2、如此,即可以在WEB端列出图层信息矣

    3、在列出图层的同时,可根据图层的默认可见性来控制图层的显隐,这是初始化阶段

    4、之后,手动勾选每个图层前面的复选框,每勾选一次,则遍历图层列表,凡checked=true的,都将该图层ID放入某个数组,然后该数组作为参数,调用设置函数,如此,可相应控制图层显隐矣。

    由4可知,控制任一图层的显示或隐藏,策略都是重绘地图。

    代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>zt</title>
        <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.15/3.15/dijit/themes/tundra/tundra.css"/>
        <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.15/3.15/esri/css/esri.css" />
        <style type="text/css">
          .block{
            border:1px solid #999;
            height:600px;
          }
          .list_item{
    
          }
        </style>
      </head>
      <body class="tundra">
        <div id="mapDiv" style="float:right;85%;" class="block"></div>
        <div id="layer_list" style="float:right;13%;margin-right:10px;" class="block"></div>
      </body>
    </html>
    
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.15/3.15/init.js"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      var map,visible = [];  
      var layer;  
      function init() {
        map = new esri.Map("mapDiv", {logo:false});
    
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://WIN-NH9JATPNTFA:6080/arcgis/rest/services/ZT/MapServer");
    
        if (layer.loaded) {  
            buildLayerList(layer);  
        }  
        else {  
            dojo.connect(layer, "onLoad", buildLayerList);  
        } 
      }
      function buildLayerList(layer) {  
        var items = dojo.map(   // 适用于回调到给定数组中的每个元素,并返回一个数组的结果。  
            layer.layerInfos,   // 在服务返回可见的图层的数组,默认是可见的  
            function(info,index){  
                if(info.parentLayerId != -1){
                  if (info.defaultVisibility) {  
                      visible.push(info.id);  // 将id编号放入数组中  
                  }  
                  return "<div><input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "(" + info.parentLayerId + ")</label></div>";  
                }
            }  
        );  
        dojo.byId("layer_list").innerHTML = items.join(' ');  
        layer.setVisibleLayers(visible,true);   // setVisibleLayers(ids, doNotRefresh?)  默认为false(及时刷新)  
        map.addLayer(layer);    // 将图层加入到地图中  
      }  
      function updateLayerVisibility() {  
        var inputs = dojo.query(".list_item"), input;   // 使用dojo.query()方法查询  
    
        visible = [];  
    
        // 遍历每一个文本框  
        dojo.forEach(inputs,function(input){  
          if (input.checked) {  
              visible.push(input.id);   // 填充数组值  
          }
        });  
        // 如果它们中有任何一个不显示的图层将 设置数组为 -1  
        if(visible.length === 0){  
          visible.push(-1);  
        }  
        layer.setVisibleLayers(visible); 
      }  
      dojo.addOnLoad(init);
    </script>

    这里写图片描述

    有个东西忘了讲,如果父层默认显示,并且选中,则子层的勾选没有意义,任你怎么点,都没啥反应,全部都是可见。所以我在代码中,并没有将根层列出来。

  • 相关阅读:
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:Attention模型--测试
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:Attention模型--训练
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:Seq2Seq模型--测试
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:Seq2Seq模型--训练
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:PTB 语言模型
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:文本数据预处理--生成训练文件
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:文本数据预处理--生成词汇表
    吴裕雄--天生自然 pythonTensorFlow自然语言处理:交叉熵损失函数
    HihoCoder 1097 kruscal
    HihoCoder 1097 Prim算法
  • 原文地址:https://www.cnblogs.com/leftfist/p/6808665.html
Copyright © 2020-2023  润新知