radio切换控制div显示_【ArcGIS for JS】图层的控制（4）

最新推荐文章于 2023-07-22 21:22:56 发布

weixin_39866963

最新推荐文章于 2023-07-22 21:22:56 发布

阅读量97

点赞数

文章标签： radio切换控制div显示

本文链接：https://blog.csdn.net/weixin_39866963/article/details/111295754

版权

1、首先了解，什么叫图层的控制如图：
上图中的复选框控制图层的显示与隐藏。
2、实现原理：
通过加载ArcGISDynamicMapServiceLayer，给ArcGISDynamicMapServiceLayer绑定onLoad事件，然后获取ArcGISDynamicMapServiceLayer对象，通过layerInfos方法获取所有子图层，然后循环加载自定义复选框。

3、完整代码：

  <html>  <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>      <title>LayerControltitle>     <link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">    <script src="https://js.arcgis.com/3.24/">script>    <script src="../Scripts/jsapi_vsdoc12_v38.js">script>    <style>          html, body, #map {              height: 100%;              margin: 0;              padding: 0;          }          body {              background-color: #FFF;              overflow: hidden;              font-family: "Trebuchet MS";          }  style>      <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js">script>      <script>        var map, mapCenter;        var visible = [], setLayerVisibility;;        require([            "esri/map",            "esri/layers/FeatureLayer",            "esri/layers/GraphicsLayer",            "esri/geometry/Point",            "esri/symbols/PictureMarkerSymbol",            "esri/symbols/SimpleLineSymbol",            "esri/renderers/SimpleRenderer",            "dojo/_base/Color",            "dojox/charting/Chart2D",            "dojo/dom-construct",            "dojo/domReady!"],        function (Map,             FeatureLayer,             GraphicsLayer,             Point,             PictureMarkerSymbol,             SimpleLineSymbol,             SimpleRenderer,             Color,             Chart2D,             domConstruct) {            map = new Map("map", { logo: false, slider: true });            var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/Qingdao/MapServer");            map.addLayer(dynamicMapServiceLayer, 1);            var chartLayer = new GraphicsLayer({ "id": "chartLayer" });            map.addLayer(chartLayer, 2);            mapCenter = new Point(103.847, 36.0473, map.spatialReference);            map.centerAndZoom(mapCenter, 4);             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 + "

+ (info.defaultVisibility ? "checked" : "") + " />" + info.name + "

"; } //设置可视图层  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); } });script> head>  <body> <div id="map">  <div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;">div> div> body> html>

4、效果图：

【ArcGIS for JS】 API 部署到本地Tomcat (1)

【ArcGIS for JS】地图初始化(2)

【ArcGIS for JS】Layers图层的理解(3)

openalyer

【OpenLayers】OpenLayers概述

【OpenLayers】实现简单的地图显示

【OpenLayers】地图控件之缩放控件

【OpenLayers】归属控件与全屏控件

【OpenLayers】地图控件之坐标拾取控件和鹰眼控件

【OpenLayers】地图控件之旋转控件与比例尺控件

【OpenLayers】实现图层切换控件

【OpenLayers】多源数据加载之数据组织

【OpenLayers】多源数据加载之瓦片地图原理一

【OpenLayers】多源数据加载之瓦片地图原理二

【OpenLayers】多源数据加载之用最简单的方式加载瓦片地图

【OpenLayers】多源数据加载之使用XYZ的方式加载瓦片地图

【OpenLayers】多源数据加载之详解OpenLayers的瓦片坐标系

【OpenLayers】多源数据加载之离线瓦片地图

【OpenLayers】多源数据加载之矢量地图

【OpenLayers】多源数据加载之WMS(一)

【OpenLayers】多源数据加载之WMS(二)

【OpenLayers】多源数据加载之矢量切片

【OpenLayers】多源数据加载之WMTS

【OpenLayers】图形绘制之设置图形的样式

【OpenLayers】图形绘制之编辑图形

【OpenLayers】使用GeoJSON数据渲染热力图

【OpenLayers】实现“上一视图”、“下一视图”的视图切换功能

【OpenLayers】图文标注

【OpenLayers】聚合标注

【OpenLayers】图层卷帘(Layer Swipe)

【OpenLayers】Drag-and-Drop Image Vector

【OpenLayer 实战】实现克里金插值渲染图-Kriging

【OpenLayer 实战】请求Geoserver带Filter的WFS查询

【OpenLayer 实战】使用GeoJSON进行行政区划剪裁(clip, not mask or filter)

END

请：右下点在看，右上点【···】分享

关注我

发现更多精彩

weixin_39866963

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
radio切换控制div显示_【ArcGIS for JS】图层的控制（4）

1、首先了解，什么叫图层的控制如图：上图中的复选框控制图层的显示与隐藏。2、实现原理：通过加载ArcGISDynamicMapServiceLayer，给ArcGISDynamicMapServiceLayer绑定onLoad事件，然后获取ArcGISDynamicMapServiceLayer对象，通过layerInfos方法获取所有子图层，然后循环加载自定义复选框。3、完整代码： ...
复制链接

扫一扫