以前的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> /******************************************************************/