Skip to content

Commit e6b6157

Browse files
liuchenyunliuchenyun
committed
[feature] 新增en下leaflet、openlayers、mapboxgl部分示例demo
AI-GEN: 30% MiNiMax
1 parent 4296f2c commit e6b6157

248 files changed

Lines changed: 19896 additions & 32 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/en/leaflet/01_chartService.html‎

Lines changed: 1190 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/en/leaflet/01_imageMapLayer3857.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_imageMapLayer3857"></title>
9+
<script type="text/javascript" src="../../js/include-web.js" ></script>
10+
</head>
11+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13+
<script type="text/javascript" src="../../../dist/leaflet/include-leaflet.js" ></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16+
var map, url = host + "/iserver/services/map-World_en_3857/rest/maps/World%20Map_VEC_3857";
17+
map = L.map('map', {
18+
center: [0, 0],
19+
maxZoom: 18,
20+
minZoom: 1,
21+
zoom: 2,
22+
});
23+
new L.supermap.ImageMapLayer(url, {transparent: false}).addTo(map);
24+
</script>
25+
</body>
26+
</html>

‎examples/en/leaflet/01_imageMapLayer4326.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_imageMapLayer4326"></title>
9+
<script type="text/javascript" src="../../js/include-web.js"></script>
10+
</head>
11+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13+
<script type="text/javascript" src="../../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16+
var url = host + "/iserver/services/map-World_en/rest/maps/World%20Map_IMG",
17+
map = L.map('map', {
18+
crs: L.CRS.EPSG4326,
19+
center: [0, 0],
20+
maxZoom: 18,
21+
minZoom: 1,
22+
zoom: 1,
23+
});
24+
new L.supermap.ImageMapLayer(url).addTo(map);
25+
</script>
26+
</body>
27+
</html>

‎examples/en/leaflet/01_layerService.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_layerService"></title>
9+
<script type="text/javascript" src="../../js/include-web.js"></script>
10+
</head>
11+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13+
<script type="text/javascript" src="../../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16+
var map, infowin, url = host + "/iserver/services/map-World_en/rest/maps/World%20Map_VEC";
17+
map = L.map('map', {
18+
preferCanvas: true,
19+
crs: L.CRS.EPSG4326,
20+
center: {lon: 0, lat: 0},
21+
maxZoom: 18,
22+
zoom: 2
23+
});
24+
new L.supermap.TiledMapLayer(url).addTo(map);
25+
layerService();
26+
27+
function layerService() {
28+
new L.supermap
29+
.LayerInfoService(url)
30+
.getLayersInfo().then((serviceResult) => {
31+
var result = serviceResult.result;
32+
var innerHTML = "";
33+
var firstGroup = result.subLayers.layers[0];
34+
innerHTML += firstGroup.name + "<br>";
35+
firstGroup.subLayers.layers.map(function (layer) {
36+
innerHTML += '&nbsp;&nbsp;&nbsp;&nbsp;' + layer.name + "<br>";
37+
});
38+
infowin = L.popup({maxWidth: 400, closeOnClick:false})
39+
.setLatLng(map.getCenter())
40+
.setContent(innerHTML)
41+
.openOn(map);
42+
});
43+
}
44+
</script>
45+
</body>
46+
</html>
47+
48+

‎examples/en/leaflet/01_layersLegend.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_layerService"></title>
9+
<style>
10+
#layersList,
11+
#mapLegend {
12+
max-height: calc(40vh - 55px);
13+
overflow: auto;
14+
font-size: 12px;
15+
text-wrap: nowrap;
16+
}
17+
18+
#layersList label {
19+
font-weight: 400;
20+
}
21+
22+
.layer-group {
23+
padding: 4px 0;
24+
}
25+
26+
.layer-group::before {
27+
width: 10px;
28+
height: 10px;
29+
display: inline-block;
30+
margin-right: 6px;
31+
background: url(../img/arrowDown.png) no-repeat center center / contain;
32+
content: '';
33+
}
34+
35+
.layer-group[aria-expanded='true']::before {
36+
rotate: 180deg;
37+
}
38+
39+
.legend-wrapper {
40+
padding-left: 12px;
41+
}
42+
43+
</style>
44+
</head>
45+
46+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
47+
<div id="map" style="width: 100%;height:100%"></div>
48+
<div style="z-index: 999;position: absolute;width:250px;top:0;right:0">
49+
<div class="panel panel-primary" style="width:250px;margin-top: 20px;position: absolute;float:right">
50+
<div class="panel-heading">
51+
<h5 class='panel-title text-center'>
52+
<span data-i18n="resources.text_layerList"></span>
53+
</h5>
54+
</div>
55+
<div class="panel-body" id="layersList"></div>
56+
<div class="panel-footer">
57+
<input class="btn btn-default" type="button" onclick="createLegend()" data-i18n="[value]resources.btn_getLegend"/>
58+
</div>
59+
</div>
60+
<div class="panel panel-primary legend" style="width:250px;margin-top: 50vh;position: absolute;float:right;">
61+
<div class="panel-heading">
62+
<h5 class='panel-title text-center'>
63+
<span data-i18n="resources.text_legend"></span>
64+
</h5>
65+
</div>
66+
<div class="panel-body" id="mapLegend"></div>
67+
</div>
68+
</div>
69+
70+
<script type="text/javascript" include="bootstrap" src="../../js/include-web.js" ></script>
71+
<script type="text/javascript" src="../../../dist/leaflet/include-leaflet.js" ></script>
72+
<script type="text/javascript">
73+
var url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-London/rest/maps/London%20Map";
74+
var map = L.map('map', {
75+
preferCanvas: true,
76+
center: [51.5, -0.1],
77+
maxZoom: 18,
78+
zoom: 11
79+
});
80+
new L.supermap.TiledMapLayer(url).addTo(map);
81+
getLayers();
82+
83+
function createLayersDom(layers, parentDom, layerName, depth) {
84+
depth = depth || 0;
85+
layers.map(function (layer) {
86+
var fullLayerName = layerName || '';
87+
if (Object.keys(layer.subLayers).length) {
88+
fullLayerName = '@@' + layer.name + fullLayerName;
89+
var groupWrapper = document.createElement('div');
90+
var layerGroup = document.createElement('div');
91+
layerGroup.innerHTML = layer.name;
92+
layerGroup.className = 'layer-group';
93+
layerGroup.setAttribute('data-toggle', 'collapse');
94+
layerGroup.setAttribute('data-target', '#' + layer.name.replace(/#/g, '_'));
95+
groupWrapper.appendChild(layerGroup);
96+
97+
parentDom.appendChild(groupWrapper);
98+
var collapse = document.createElement('div');
99+
collapse.id = layer.name.replace(/#/g, '_');
100+
collapse.className = depth === 0 ? 'collapse in' : 'collapse';
101+
collapse.style.paddingLeft = '18px';
102+
groupWrapper.appendChild(collapse);
103+
createLayersDom(layer.subLayers.layers, collapse, fullLayerName, depth + 1);
104+
} else {
105+
var checkbox = document.createElement('input');
106+
checkbox.id = layer.name;
107+
checkbox.type = 'checkbox';
108+
checkbox.value = layer.name + fullLayerName;
109+
var label = document.createElement('label');
110+
label.textContent = layer.name;
111+
label.style.marginLeft = "8px"
112+
label.setAttribute('for', checkbox.id);
113+
parentDom.appendChild(checkbox);
114+
parentDom.appendChild(label);
115+
// Initialize, default get Motorway, Trunk, Park, River layer legend
116+
if (checkbox.value === "Motorway_L@London@@LayerGroup#1@@London Map" ||
117+
checkbox.value === "Trunk_L@London@@LayerGroup#1@@London Map" ||
118+
checkbox.value === "Park_R@London@@LayerGroup#1@@London Map" ||
119+
checkbox.value === "River_R@London@@LayerGroup#1@@London Map") {
120+
checkbox.checked = true;
121+
}
122+
var brElement = document.createElement('br');
123+
parentDom.appendChild(brElement);
124+
}
125+
});
126+
}
127+
128+
function getLayers() {
129+
new L.supermap.LayerInfoService(url).getLayersInfo(function (serviceResult) {
130+
var layers = serviceResult.result.subLayers.layers;
131+
var parentDom = document.getElementById('layersList');
132+
var layerName = '@@' + serviceResult.result.name;
133+
createLayersDom(layers, parentDom, layerName);
134+
createLegend();
135+
});
136+
}
137+
138+
function createLegendDom(layerLegends, parentDom) {
139+
layerLegends.forEach(function (layerLegend) {
140+
var legendWrapper = document.createElement('div');
141+
legendWrapper.className = 'legend-wrapper';
142+
var layerName = document.createElement('div');
143+
layerName.innerHTML = layerLegend.layerName;
144+
parentDom.appendChild(layerName);
145+
parentDom.appendChild(legendWrapper);
146+
layerLegend.legends.forEach(function (legend) {
147+
var legendItem = document.createElement('div');
148+
var legendPic = document.createElement('img');
149+
var legendLabel = document.createElement('label');
150+
legendLabel.innerHTML = legend.label;
151+
legendLabel.style.marginLeft = "4px"
152+
// legendPic.src = legend.url;
153+
legendPic.src = 'data:image/png;base64,' + legend.imageData;
154+
legendItem.appendChild(legendPic);
155+
legendItem.appendChild(legendLabel);
156+
legendWrapper.appendChild(legendItem);
157+
});
158+
if (layerLegend.subLayerLegends) {
159+
createLegendDom(layerLegend.subLayerLegends, legendWrapper);
160+
}
161+
})
162+
}
163+
164+
function createLegend() {
165+
var legendContainer = document.getElementById("mapLegend");
166+
legendContainer.innerHTML = ''
167+
// Get all selected layers and concatenate into parameters
168+
var checkboxes = document.querySelectorAll('#layersList input[type="checkbox"]')
169+
var layers = "";
170+
checkboxes.forEach((checkbox) => {
171+
if (checkbox.checked) {
172+
layers += checkbox.value + ","
173+
}
174+
});
175+
176+
// Send request to get legend
177+
var getLayersLegendInfoParams = new L.supermap.GetLayersLegendInfoParameters({
178+
// bbox or layers parameter must be set at least one
179+
// bbox: "114.59,37.76,119.51,42.31",
180+
layers: "show:" + layers,
181+
width: 18,
182+
height: 18
183+
})
184+
new L.supermap.LayerInfoService(url).getLayersLegendInfo(getLayersLegendInfoParams, function (serviceResult) {
185+
createLegendDom(serviceResult.result.layerLegends, legendContainer);
186+
});
187+
}
188+
189+
</script>
190+
</body>
191+
192+
</html>

‎examples/en/leaflet/01_mapQueryByBounds.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_mapQueryByBounds"></title>
9+
<style>
10+
#toolbar {
11+
position: absolute;
12+
top: 50px;
13+
right: 10px;
14+
text-align: center;
15+
z-index: 1000;
16+
border-radius: 4px;
17+
}
18+
</style>
19+
</head>
20+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="toolbar" class="panel panel-primary">
22+
<div class='panel-heading'>
23+
<h5 class='panel-title text-center' data-i18n="resources.title_queryByBounds"></h5></div>
24+
<div class='panel-body content'>
25+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_query"
26+
onclick="query()"/>&nbsp;
27+
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear"
28+
onclick="clearElements()"/>
29+
</div>
30+
</div>
31+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
32+
<script type="text/javascript" include="bootstrap" src="../../js/include-web.js"></script>
33+
<script type="text/javascript" include="leaflet-geoman" src="../../../dist/leaflet/include-leaflet.js"></script>
34+
<script type="text/javascript">
35+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
36+
var map, resultLayer, polygon,
37+
url = host + '/iserver/services/map-World_en/rest/maps/World%20Map_VEC';
38+
map = L.map('map', {
39+
preferCanvas: true,
40+
crs: L.CRS.EPSG4326,
41+
center: {lon: 0, lat: 0},
42+
maxZoom: 18,
43+
zoom: 2
44+
});
45+
new L.supermap.TiledMapLayer(url).addTo(map);
46+
47+
function query() {
48+
clearElements();
49+
map.pm.enableDraw('Rectangle');
50+
map.on('pm:create', function(e) {
51+
polygon = e.layer;
52+
var param = new L.supermap.QueryByBoundsParameters({
53+
queryParams: {name: "Capital_P@World.1"},
54+
bounds: polygon.getBounds()
55+
});
56+
new L.supermap
57+
.QueryService(url)
58+
.queryByBounds(param).then(function (serviceResult) {
59+
var result = serviceResult.result;
60+
resultLayer = L.geoJSON(result.recordsets[0].features, {color: 'red'}).addTo(map);
61+
});
62+
});
63+
}
64+
65+
function clearElements() {
66+
map.off('pm:create');
67+
if (polygon) {
68+
polygon.pm.remove();
69+
polygon = null;
70+
}
71+
resultLayer && map.removeLayer(resultLayer);
72+
}
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)