Skip to content

Commit 3f10abe

Browse files
chenxianhuiichenxianhuii
committed
[ICL-1522] iclient图例示例对于图层组的情况处理不对 review by luox
1 parent 8f9a6a5 commit 3f10abe

File tree

4 files changed

+704
-380
lines changed

4 files changed

+704
-380
lines changed

‎examples/leaflet/01_layersLegend.html

Lines changed: 158 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -4,111 +4,190 @@
44
<!DOCTYPE html>
55
<html>
66
<head>
7-
<meta charset="UTF-8">
8-
<title data-i18n="resources.title_layerService"></title>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_layerService"></title>
9+
<style>
10+
#layersList,
11+
#mapLegend {
12+
max-height: 40vh;
13+
overflow: auto;
14+
font-size: 12px;
15+
}
16+
17+
#layersList label {
18+
font-weight: 400;
19+
}
20+
21+
.layer-group {
22+
padding: 4px 0;
23+
}
24+
25+
.layer-group::before {
26+
width: 10px;
27+
height: 10px;
28+
display: inline-block;
29+
margin-right: 6px;
30+
background: url(../img/arrowDown.png) no-repeat center center / contain;
31+
content: '';
32+
}
33+
34+
.layer-group[aria-expanded='true']::before {
35+
rotate: 180deg;
36+
}
37+
38+
.legend-wrapper {
39+
padding-left: 12px;
40+
}
41+
42+
</style>
943
</head>
44+
1045
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
11-
<div id="map" style="width: 100%;height:100%">
12-
<div style="z-index: 999;position: relative;width: 250px;float:right">
46+
<div id="map" style="width: 100%;height:100%"></div>
47+
<div style="z-index: 999;position: absolute;width:250px;top:0;right:0">
1348
<div class="panel panel-primary" style="width:250px;margin-top: 20px;position: absolute;float:right">
1449
<div class="panel-heading">
1550
<h5 class='panel-title text-center'>
16-
<span data-i18n="resources.text_layerList"></span>
51+
<span data-i18n="resources.text_layerList"></span>
1752
</h5>
1853
</div>
1954
<div class="panel-body" id="layersList"></div>
2055

2156
</div>
22-
<div class="panel panel-primary legend" style="width:250px;margin-top: 400px;position: absolute;float:right;max-height: 500px;overflow: auto;">
57+
<div class="panel panel-primary legend" style="width:250px;margin-top: 50vh;position: absolute;float:right;">
2358
<div class="panel-heading">
24-
<h5 class='panel-title text-center'>
25-
<span data-i18n="resources.text_legend"></span>
26-
</h5>
59+
<h5 class='panel-title text-center'>
60+
<span data-i18n="resources.text_legend"></span>
61+
</h5>
2762
</div>
2863
<div class="panel-body" id="mapLegend"></div>
2964
</div>
3065
</div>
31-
</div>
66+
</div>
3267

33-
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
34-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
35-
<script type="text/javascript">
36-
var url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-jingjin/rest/maps/京津地区土地利用现状图";
68+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
69+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
70+
<script type="text/javascript">
71+
var url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-jingjin/rest/maps/京津地区土地利用现状图";
3772
var map = L.map('map', {
38-
preferCanvas: true,
39-
crs: L.CRS.EPSG4326,
40-
center: [40.04, 117.08],
41-
maxZoom: 18,
42-
zoom: 7
73+
preferCanvas: true,
74+
crs: L.CRS.EPSG4326,
75+
center: [40.04, 117.08],
76+
maxZoom: 18,
77+
zoom: 7
4378
});
4479
new L.supermap.TiledMapLayer(url).addTo(map);
4580
getLayers();
4681

82+
function createLayersDom(layers, parentDom, layerName) {
83+
layers.map(function (layer) {
84+
var fullLayerName = layerName || '';
85+
if (Object.keys(layer.subLayers).length) {
86+
fullLayerName = '@@' + layer.name + fullLayerName;
87+
var groupWrapper = document.createElement('div');
88+
var layerGroup = document.createElement('div');
89+
layerGroup.innerHTML = layer.name;
90+
layerGroup.className = 'layer-group';
91+
layerGroup.setAttribute('data-toggle', 'collapse');
92+
layerGroup.setAttribute('data-target', '#' + layer.name);
93+
groupWrapper.appendChild(layerGroup);
94+
95+
parentDom.appendChild(groupWrapper);
96+
var collapse = document.createElement('div');
97+
collapse.id = layer.name;
98+
collapse.className = 'collapse';
99+
collapse.style.paddingLeft = '18px';
100+
groupWrapper.appendChild(collapse);
101+
createLayersDom(layer.subLayers.layers, collapse, fullLayerName);
102+
} else {
103+
var checkbox = document.createElement('input');
104+
checkbox.id = layer.name;
105+
checkbox.type = 'checkbox';
106+
checkbox.value = layer.name + fullLayerName;
107+
var label = document.createElement('label');
108+
label.textContent = layer.name;
109+
label.style.marginLeft = "8px"
110+
label.setAttribute('for', checkbox.id);
111+
parentDom.appendChild(checkbox);
112+
parentDom.appendChild(label);
113+
// 初始化，默认获取土地利用图层图例
114+
if (checkbox.value === "Landuse_R@Jingjin#1@@京津地区土地利用现状图") {
115+
checkbox.checked = true;
116+
createLegend();
117+
}
118+
var brElement = document.createElement('br');
119+
parentDom.appendChild(brElement);
120+
}
121+
});
122+
}
123+
47124
function getLayers() {
48-
new L.supermap.LayerInfoService(url).getLayersInfo(function (serviceResult) {
49-
serviceResult.result.subLayers.layers.map(function (layer) {
50-
var checkbox = document.createElement('input');
51-
checkbox.type = 'checkbox';
52-
checkbox.value = layer.name;
53-
var label = document.createElement('label');
54-
label.textContent = layer.name;
55-
label.style.marginLeft = "15px"
56-
layersList.appendChild(checkbox);
57-
layersList.appendChild(label);
58-
// 初始化，默认获取土地利用图层图例
59-
if(checkbox.value === "Landuse_R@Jingjin#1"){
60-
checkbox.checked = true;
61-
createLegend();
62-
}
63-
var brElement = document.createElement('br');
64-
layersList.appendChild(brElement);
65-
});
66-
var submitBtn = document.createElement('input');
67-
submitBtn.type = 'button';
68-
submitBtn.classList ='btn btn-default';
69-
submitBtn.value = resources.btn_getLegend;
70-
submitBtn.addEventListener('click', createLegend);
71-
layersList.appendChild(submitBtn);
125+
new L.supermap.LayerInfoService(url).getLayersInfo(function (serviceResult) {
126+
var layers = serviceResult.result.subLayers.layers;
127+
var parentDom = document.getElementById('layersList');
128+
var layerName = '@@' + serviceResult.result.name;
129+
createLayersDom(layers, parentDom, layerName);
130+
var submitBtn = document.createElement('input');
131+
submitBtn.type = 'button';
132+
submitBtn.classList = 'btn btn-default';
133+
submitBtn.value = resources.btn_getLegend;
134+
submitBtn.addEventListener('click', createLegend);
135+
layersList.appendChild(submitBtn);
136+
});
137+
}
138+
139+
function createLegendDom(layerLegends, parentDom) {
140+
layerLegends.forEach(function (layerLegend) {
141+
var legendWrapper = document.createElement('div');
142+
legendWrapper.className = 'legend-wrapper';
143+
var layerName = document.createElement('div');
144+
layerName.innerHTML = layerLegend.layerName;
145+
parentDom.appendChild(layerName);
146+
parentDom.appendChild(legendWrapper);
147+
layerLegend.legends.forEach(function (legend) {
148+
var legendItem = document.createElement('div');
149+
var legendPic = document.createElement('img');
150+
var legendLabel = document.createElement('label');
151+
legendLabel.innerHTML = legend.label;
152+
legendLabel.style.marginLeft = "4px"
153+
// legendPic.src = legend.url;
154+
legendPic.src = 'data:image/png;base64,' + legend.imageData;
155+
legendItem.appendChild(legendPic);
156+
legendItem.appendChild(legendLabel);
157+
legendWrapper.appendChild(legendItem);
72158
});
159+
if (layerLegend.subLayerLegends) {
160+
createLegendDom(layerLegend.subLayerLegends, legendWrapper);
161+
}
162+
})
73163
}
74164

75165
function createLegend() {
76-
var legendContainer = document.getElementById("mapLegend");
77-
legendContainer.innerHTML = ''
78-
// 获取所有被选中的图层，并拼接成参数
79-
var checkboxes = document.querySelectorAll('#layersList input[type="checkbox"]')
80-
var layers = "";
81-
checkboxes.forEach((checkbox) => {
82-
if (checkbox.checked) {
83-
layers += checkbox.value + "@@京津地区土地利用现状图,"
84-
}
85-
});
166+
var legendContainer = document.getElementById("mapLegend");
167+
legendContainer.innerHTML = ''
168+
// 获取所有被选中的图层，并拼接成参数
169+
var checkboxes = document.querySelectorAll('#layersList input[type="checkbox"]')
170+
var layers = "";
171+
checkboxes.forEach((checkbox) => {
172+
if (checkbox.checked) {
173+
layers += checkbox.value + ","
174+
}
175+
});
86176

87-
// 发起请求，获取图例
88-
var getLayersLegendInfoParams = new L.supermap.GetLayersLegendInfoParameters({
89-
// bbox 或 layers 参数必须至少设置一个参数
90-
// bbox: "114.59,37.76,119.51,42.31",
91-
layers: "show:" + layers,
92-
width: 18,
93-
height: 18
94-
})
95-
new L.supermap.LayerInfoService(url).getLayersLegendInfo(getLayersLegendInfoParams,function (serviceResult) {
96-
serviceResult.result.layerLegends.map(function (layerLegend) {
97-
layerLegend.legends.map(function (legend) {
98-
var legendPic = document.createElement('img');
99-
var legendLabel = document.createElement('span');
100-
legendLabel.innerHTML = legend.label;
101-
legendLabel.style.marginLeft = "15px"
102-
// legendPic.src = legend.url;
103-
legendPic.src = 'data:image/png;base64,' + legend.imageData;
104-
legendContainer.appendChild(legendPic);
105-
legendContainer.appendChild(legendLabel);
106-
var brElement = document.createElement('br');
107-
legendContainer.appendChild(brElement);
108-
})
109-
})
110-
});
177+
// 发起请求，获取图例
178+
var getLayersLegendInfoParams = new L.supermap.GetLayersLegendInfoParameters({
179+
// bbox 或 layers 参数必须至少设置一个参数
180+
// bbox: "114.59,37.76,119.51,42.31",
181+
layers: "show:" + layers,
182+
width: 18,
183+
height: 18
184+
})
185+
new L.supermap.LayerInfoService(url).getLayersLegendInfo(getLayersLegendInfoParams, function (serviceResult) {
186+
createLegendDom(serviceResult.result.layerLegends, legendContainer);
187+
});
111188
}
112-
</script>
189+
190+
</script>
113191
</body>
114-
</html>
192+
193+
</html>

0 commit comments

Comments
 (0)