您的位置：首页 > Web前端 > JavaScript

ArcGIS For JavaScript API Dynamically create layer list(动态创建图层列表)

2015-06-06 10:37 846 查看

描述：

此示例遍历所有的地图服务中的图层，并添加到每一个复选框到列表中，可以切换和关闭的图层。参考示例Toggle layer visibility.

buildLayerList（）函数：遍历每一层，并把它添加一个HTML复选框。这将生成图层列表。保存在列表中的每一层的默认可见性。

updateLayerVisibility（）函数：更新显示层

引用联接：http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_dynamiclayerlist/index.html

Dojo在线帮助API：http://dojotoolkit.org/api/

ArcGIS For JavaScript API ：http://help.arcgis.com/en/webapi/javascript/arcgis/index.html

代码如下：

[html] view
plaincopy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />



<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

<title>Dynamically Create Map Service Layer List</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" />

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>

<script type="text/javascript">

      //类似导入包

      dojo.require("esri.map");



      var layer, map, visible = [];     // 创建图层，地图和显示数组

      /**

        * 初始化函数

        */

      function init() {

        map = new esri.Map("map");



        // 创建一个动态服务图层

        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/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.defaultVisibility) {

                    visible.push(info.id);  // 将id编号放入数组中

                }

                return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";

            }

        );

        dojo.byId("layer_list").innerHTML = items.join(' ');

        alert(items);

        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>

</head>



<body>

这个例子中加载一个  ArcGISDynamicMapServiceLayer.<br />

它决定了层在地图服务中，并将其显示为复选框，可以用来切换他们的显示。

<br />

图层列表 : <span id="layer_list"></span><br />

<br />

<div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>

</body>

</html>

显示结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webgis arcgis server

相关文章推荐

新的分享

章节导航