ArcGIS API For Javascript之多图层显示与隐藏,图层要素选框查询

以前的ArcGIS API For Javascript之地图基本加载与显示工做见上篇博客<ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现>
css

五、多图层的加载与隐藏html

利用Html+Javascript前端编程实现上传到服务端的地图服务中的多图层的加载与隐藏。本实验中除了底图以外,添加了共10个图层,分别为前端

宾馆酒店_point (0)编程

餐饮_point (1)数组

超市商城_point (2)dom

地级市_font_point (3)spa

省会_font_point (4).net

学校_point (5)3d

医疗_point (6)rest

银行_point (7)

省界_region (8)

市界_region (9)

地址为:http://localhost:6080/arcgis/rest/services/MyMapService/MapServer

以下所示:

 

代码以下:

/********************************************************/
             dojo.connect(dynamicMapServiceLayer, "onLoad", loadLayerList);
             function loadLayerList(layers) {
                 var html = ""
                 var infos = layers.layerInfos;
                 for (var i = 0, length = infos.length; i < length; i++) {
                     var info = infos[i];
                     //图层默认显示的话就把图层id添加到visible
                     if (info.defaultVisibility) {
                         visible.push(info.id);
                     }
                     //输出图层列表的html
                     html = html + "<div><input id='" + info.id + "' name='layerList' class='listCss' type='checkbox' value='checkbox' οnclick='setLayerVisibility()' " + (info.defaultVisibility ? "checked" : "") + " />" + info.name + "</div>";
                 }
                 //设置可视图层
                 dynamicMapServiceLayer.setVisibleLayers(visible);
                 //在右边显示图层名列表
                 dojo.byId("toc").innerHTML = html;
             }
             setLayerVisibility = function () {
                 //用dojo.query获取css为listCss的元素数组
                 var inputs = dojo.query(".listCss");
                 visible = [];
                 //对checkbox数组进行变量把选中的id添加到visible
                 for (var i = 0; i < inputs.length; i++) {
                     if (inputs[i].checked) {
                         visible.push(inputs[i].id);
                     }
                 }
                 //设置可视图层
                 dynamicMapServiceLayer.setVisibleLayers(visible);
             }
             /******************************************************************/

六、选框查询某图层要素点

最后,利用Html+Javascript前端编程实现学校_point (5)要素(学校)的选框查询

/********************************************************/
             map.on("load", initSelectToolbar);
           
             var fieldsSelectionSymbol =
             new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
             new Color([0, 255, 0]), 1),
             new Color([255, 0, 0, 5]));

             featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/5");
             map.addLayer(featureLayer);
             featureLayer.setSelectionSymbol(fieldsSelectionSymbol);

             on(dom.byId("selectFieldsButton"), "click", function () {
                 selectionToolbar.activate(Draw.EXTENT);
             });

             on(dom.byId("clearSelectionButton"), "click", function () {
                 featureLayer.clearSelection();
             });

             function initSelectToolbar(event) {
                 selectionToolbar = new Draw(event.map);
                 var selectQuery = new Query();

                 on(selectionToolbar, "DrawEnd", function (geometry) {
                     selectionToolbar.deactivate();
                     selectQuery.geometry = geometry;
                     featureLayer.selectFeatures(selectQuery,
                       FeatureLayer.SELECTION_NEW);
                 });
             }
     

         });
    </script>
</head>
        /******************************************************************/


结果展现: