Skip to content

Commit 7ab3917

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
优化创建临时图层示例
1 parent 2fe2994 commit 7ab3917

File tree

4 files changed

+134
-64
lines changed

4 files changed

+134
-64
lines changed

‎examples/leaflet/createTempLayer.html

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
3838
type="button"
3939
class="btn btn-default"
4040
data-i18n="[value]resources.text_create"
41-
onclick="createTempLayer()"
41+
onclick="updateTempLayer()"
4242
/>
4343
</div>
4444
</div>
@@ -47,8 +47,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
4747
<script type="text/javascript">
4848
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
4949
var map,
50+
layerInfoService,
5051
tempLayer,
51-
url = host + '/iserver/services/map-World/rest/maps/World';
52+
newResourceID,
53+
result,
54+
url = host + '/iserver/services/map-world/rest/maps/World';
5255
map = L.map('map', {
5356
preferCanvas: true,
5457
crs: L.CRS.EPSG4326,
@@ -60,30 +63,44 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
6063

6164
function createTempLayer() {
6265
new L.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
63-
var result = serviceResult.result;
64-
result.subLayers.layers.map(function (layer, index) {
65-
if (index === 15) {
66-
layer.gamma = document.getElementById("gammaParam").value || 1;
67-
result.subLayers.layers = [layer];
68-
new L.supermap.LayerInfoService(url)
69-
.setLayersInfo(
66+
result = serviceResult.result;
67+
var layer = result.subLayers.layers[15];
68+
layer.gamma = document.getElementById("gammaParam").value || 1;
69+
result.subLayers.layers = [layer];
70+
layerInfoService = new L.supermap.LayerInfoService(url);
71+
layerInfoService.setLayersInfo(
72+
new L.supermap.SetLayersInfoParameters({
73+
layersInfo: result
74+
})
75+
)
76+
.then((res) => {
77+
newResourceID = res.result.newResourceID;
78+
tempLayer = new L.supermap.TiledMapLayer(url, {
79+
noWrap: true,
80+
cacheEnabled: false,
81+
transparent: true,
82+
layersID: res.result.newResourceID
83+
})
84+
tempLayer.addTo(map);
85+
});
86+
});
87+
}
88+
89+
function updateTempLayer() {
90+
if (!newResourceID) {
91+
return;
92+
}
93+
var layer = result.subLayers.layers[0];
94+
layer.gamma = document.getElementById("gammaParam").value || 1;
95+
layerInfoService.setLayersInfo(
7096
new L.supermap.SetLayersInfoParameters({
71-
layersInfo: result
97+
layersInfo: result,
98+
resourceID: newResourceID,
99+
isTempLayers: true
72100
})
73-
)
74-
.then((res) => {
75-
tempLayer && tempLayer.remove();
76-
tempLayer = new L.supermap.TiledMapLayer(url, {
77-
noWrap: true,
78-
cacheEnabled: false,
79-
transparent: true,
80-
layersID: res.result.newResourceID
81-
})
82-
tempLayer.addTo(map);
101+
).then((res) => {
102+
tempLayer.updateParams();
83103
});
84-
}
85-
});
86-
});
87104
}
88105
</script>
89106
</body>

‎examples/mapboxgl/createTempLayer.html

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
3838
type="button"
3939
class="btn btn-default"
4040
data-i18n="[value]resources.text_create"
41-
onclick="createTempLayer()"
41+
onclick="updateTempLayer()"
4242
/>
4343
</div>
4444
</div>
@@ -47,8 +47,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
4747
<span id="show"></span>
4848
<script type="text/javascript">
4949
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
50-
var infowin,
51-
url = host + '/iserver/services/map-World/rest/maps/World';
50+
var layerInfoService,
51+
tempLayer,
52+
newResourceID,
53+
result,
54+
url = host + '/iserver/services/map-world/rest/maps/World';
5255
var map = new mapboxgl.Map({
5356
container: 'map',
5457
style: {
@@ -65,24 +68,20 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
6568

6669
function createTempLayer() {
6770
new mapboxgl.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
68-
var result = serviceResult.result;
69-
result.subLayers.layers.map(function (layer, index) {
70-
if (index === 15) {
71+
result = serviceResult.result;
72+
layer = result.subLayers.layers[15]
7173
layer.gamma = document.getElementById('gammaParam').value || 1;
7274
result.subLayers.layers = [layer];
73-
new mapboxgl.supermap.LayerInfoService(url)
74-
.setLayersInfo(
75+
layerInfoService = new mapboxgl.supermap.LayerInfoService(url)
76+
layerInfoService.setLayersInfo(
7577
new mapboxgl.supermap.SetLayersInfoParameters({
7678
layersInfo: result
7779
})
7880
)
7981
.then((res) => {
8082
var result = res.result;
83+
newResourceID = result.newResourceID;
8184
if (result && result.newResourceID) {
82-
if (map.getLayer('layer')) {
83-
map.removeLayer('layer');
84-
map.removeSource('layer');
85-
}
8685
map.addLayer({
8786
id: 'layer',
8887
type: 'raster',
@@ -97,10 +96,27 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
9796
});
9897
}
9998
});
100-
}
101-
});
10299
});
103100
}
101+
102+
function updateTempLayer() {
103+
if (!newResourceID) {
104+
return;
105+
}
106+
var layer = result.subLayers.layers[0];
107+
layer.gamma = document.getElementById("gammaParam").value || 1;
108+
layerInfoService.setLayersInfo(
109+
new mapboxgl.supermap.SetLayersInfoParameters({
110+
layersInfo: result,
111+
resourceID: newResourceID,
112+
isTempLayers: true
113+
})
114+
).then((res) => {
115+
map.style.sourceCaches['layer'].clearTiles();
116+
map.style.sourceCaches['layer'].update(map.transform);
117+
map.triggerRepaint();
118+
});
119+
}
104120
</script>
105121
</body>
106122
</html>

‎examples/maplibregl/createTempLayer.html

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,19 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
3838
type="button"
3939
class="btn btn-default"
4040
data-i18n="[value]resources.text_create"
41-
onclick="createTempLayer()"
41+
onclick="updateTempLayer()"
4242
/>
4343
</div>
4444
</div>
4545
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
4646
<script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
4747
<script type="text/javascript">
4848
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
49-
var url = host + '/iserver/services/map-World/rest/maps/World';
49+
var layerInfoService,
50+
tempLayer,
51+
newResourceID,
52+
result,
53+
url = host + '/iserver/services/map-world/rest/maps/World';
5054
var map = new maplibregl.Map({
5155
container: 'map',
5256
style: {
@@ -57,28 +61,26 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
5761
center: [0, 0],
5862
zoom: 2
5963
});
60-
createTempLayer();
64+
map.on('load', function () {
65+
createTempLayer();
66+
});
6167

6268
function createTempLayer() {
6369
new maplibregl.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
64-
var result = serviceResult.result;
65-
result.subLayers.layers.map(function (layer, index) {
66-
if (index === 15) {
67-
layer.gamma = document.getElementById("gammaParam").value || 1;
70+
result = serviceResult.result;
71+
layer = result.subLayers.layers[15]
72+
layer.gamma = document.getElementById('gammaParam').value || 1;
6873
result.subLayers.layers = [layer];
69-
new maplibregl.supermap.LayerInfoService(url)
70-
.setLayersInfo(
74+
layerInfoService = new maplibregl.supermap.LayerInfoService(url)
75+
layerInfoService.setLayersInfo(
7176
new maplibregl.supermap.SetLayersInfoParameters({
7277
layersInfo: result
7378
})
7479
)
7580
.then((res) => {
7681
var result = res.result;
82+
newResourceID = result.newResourceID;
7783
if (result && result.newResourceID) {
78-
if (map.getLayer('layer')) {
79-
map.removeLayer('layer');
80-
map.removeSource('layer');
81-
}
8284
map.addLayer({
8385
id: 'layer',
8486
type: 'raster',
@@ -93,10 +95,27 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
9395
});
9496
}
9597
});
96-
}
97-
});
9898
});
9999
}
100+
101+
function updateTempLayer() {
102+
if (!newResourceID) {
103+
return;
104+
}
105+
var layer = result.subLayers.layers[0];
106+
layer.gamma = document.getElementById("gammaParam").value || 1;
107+
layerInfoService.setLayersInfo(
108+
new maplibregl.supermap.SetLayersInfoParameters({
109+
layersInfo: result,
110+
resourceID: newResourceID,
111+
isTempLayers: true
112+
})
113+
).then((res) => {
114+
map.style.sourceCaches['layer'].clearTiles();
115+
map.style.sourceCaches['layer'].update(map.transform);
116+
map.triggerRepaint();
117+
});
118+
}
100119
</script>
101120
</body>
102121
</html>

‎examples/openlayers/createTempLayer.html

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
3838
type="button"
3939
class="btn btn-default"
4040
data-i18n="[value]resources.text_create"
41-
onclick="createTempLayer()"
41+
onclick="updateTempLayer()"
4242
/>
4343
</div>
4444
</div>
@@ -49,8 +49,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
4949
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
5050
<script type="text/javascript">
5151
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
52-
var tempLayer;
53-
var url = host + '/iserver/services/map-World/rest/maps/World';
52+
var tempLayer,
53+
layerInfoService,
54+
newResourceID,
55+
result;
56+
var url = host + '/iserver/services/map-world/rest/maps/World';
5457
var map = new ol.Map({
5558
target: 'map',
5659
controls: ol.control.defaults
@@ -67,19 +70,19 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
6770

6871
function createTempLayer() {
6972
new ol.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
70-
serviceResult.result.subLayers.layers.map(function (layer, index) {
71-
if (index === 15) {
73+
result = serviceResult.result;
74+
layer = serviceResult.result.subLayers.layers[15];
7275
layer.gamma = document.getElementById("gammaParam").value || 1;
73-
serviceResult.result.subLayers.layers = [layer];
74-
new ol.supermap.LayerInfoService(url)
75-
.setLayersInfo(
76+
result.subLayers.layers = [layer];
77+
layerInfoService = new ol.supermap.LayerInfoService(url);
78+
layerInfoService.setLayersInfo(
7679
new ol.supermap.SetLayersInfoParameters({
77-
layersInfo: serviceResult.result
80+
layersInfo: result
7881
})
7982
)
8083
.then((res) => {
8184
if (res.result && res.result.newResourceID) {
82-
map.removeLayer(tempLayer);
85+
newResourceID = res.result.newResourceID;
8386
tempLayer = new ol.layer.Tile({
8487
source: new ol.source.TileSuperMapRest({
8588
url: url,
@@ -93,10 +96,25 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
9396
map.addLayer(tempLayer);
9497
}
9598
});
96-
}
97-
});
9899
});
99100
}
101+
102+
function updateTempLayer() {
103+
if (!newResourceID) {
104+
return;
105+
}
106+
var layer = result.subLayers.layers[0];
107+
layer.gamma = document.getElementById("gammaParam").value || 1;
108+
layerInfoService.setLayersInfo(
109+
new ol.supermap.SetLayersInfoParameters({
110+
layersInfo: result,
111+
resourceID: newResourceID,
112+
isTempLayers: true
113+
})
114+
).then((res) => {
115+
tempLayer.getSource().updateParams();
116+
});
117+
}
100118
</script>
101119
</body>
102120
</html>

0 commit comments

Comments
 (0)