Skip to content

Commit a552191

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
update mapliregl example
1 parent 86dbf03 commit a552191

35 files changed

Lines changed: 954 additions & 428 deletions

‎examples/locales/en-US/resources.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,8 @@ window.examplesResources = {
453453
"title_examplesLeaflet": "iClient for Leaflet Examples",
454454
"title_editorMBGL": "iClient for MapboxGL Sample Code",
455455
"title_examplesMBGL": "iClient for MapboxGL Examples",
456+
"title_editorMLBGL": "iClient for MapLibreGL Sample Code",
457+
"title_examplesMLBGL": "iClient for MapLibreGL Examples",
456458
"title_examplesComponent": "Component Examples",
457459
"title_editorComponent": "Component Sample Code",
458460
"title_editorClassic": "iClient Classic Sample Code",

‎examples/locales/zh-CN/resources.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,8 @@ window.examplesResources = {
406406
"title_examplesLeaflet": "iClient for Leaflet 示范程序",
407407
"title_editorMBGL": "iClient for MapboxGL 示例代码",
408408
"title_examplesMBGL": "iClient for MapboxGL 示范程序",
409+
"title_editorMLBGL": "iClient for MapLibreGL 示例代码",
410+
"title_examplesMLBGL": "iClient for MapLibreGL 示范程序",
409411
"title_examplesComponent": "组件示范程序",
410412
"title_editorComponent": "组件示例代码",
411413
"title_editorClassic": "iClient Classic 示例代码",

‎examples/maplibregl/01_mapQueryBySQL_FGB.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 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_mapQueryBySQL_FGB"></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/maplibregl/include-maplibregl.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/rest/maps/World";
17+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
18+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
19+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
20+
var map = new maplibregl.Map({
21+
container: 'map',
22+
renderWorldCopies: false,
23+
style: {
24+
"version": 8,
25+
"sources": {
26+
"raster-tiles": {
27+
"attribution": attribution,
28+
"type": "raster",
29+
"tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}'],
30+
"tileSize": 256,
31+
},
32+
},
33+
"layers": [{
34+
"id": "simple-tiles",
35+
"type": "raster",
36+
"source": "raster-tiles",
37+
"minzoom": 0,
38+
"maxzoom": 22
39+
}],
40+
},
41+
center: [0, 0],
42+
maxZoom: 18,
43+
zoom: 2
44+
});
45+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
46+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
47+
48+
map.on('load', function () {
49+
query();
50+
});
51+
52+
function query() {
53+
var param = new maplibregl.supermap.QueryBySQLParameters({
54+
queryParams: {
55+
name: "Countries@World.1",
56+
attributeFilter: "SMID > 0"
57+
}
58+
});
59+
60+
queryService = new maplibregl.supermap.QueryService(url).queryBySQL(param, function (serviceResult) {
61+
var FGBLayer = new maplibregl.supermap.FGBLayer({
62+
url: serviceResult.result.newResourceLocation,
63+
layerID: 'points',
64+
strategy: 'all',
65+
paint: {
66+
'fill-color': '#FF3300' /* 填充的颜色 */,
67+
'fill-opacity': 0.6 /* 透明度 */
68+
}
69+
});
70+
map.addLayer(FGBLayer);
71+
}, 'FGB');
72+
}
73+
74+
</script>
75+
</body>
76+
</html>

‎examples/maplibregl/02_getFeatureBySQL_FGB.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
9+
<title data-i18n="resources.title_getFeatureBySQL_FGB"></title>
10+
<script type="text/javascript" src="../js/include-web.js"></script>
11+
<script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
12+
<style>
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
#map {
19+
position: absolute;
20+
top: 0;
21+
bottom: 0;
22+
width: 100%;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div id="map"></div>
28+
<script>
29+
var attribution =
30+
"<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
31+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
32+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>";
33+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
34+
var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';
35+
var dataUrl = host + '/iserver/services/data-world/rest/data';
36+
37+
var map = new maplibregl.Map({
38+
container: 'map', //div id
39+
renderWorldCopies: false,
40+
style: {
41+
version: 8,
42+
sources: {
43+
'raster-tiles': {
44+
attribution: attribution,
45+
type: 'raster',
46+
tiles: [baseUrl],
47+
tileSize: 256
48+
}
49+
},
50+
layers: [
51+
{
52+
id: 'simple-tiles',
53+
type: 'raster',
54+
source: 'raster-tiles',
55+
maxzoom: 18
56+
}
57+
]
58+
},
59+
center: [0, 0],
60+
zoom: 2
61+
});
62+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
63+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
64+
65+
map.on('load', function () {
66+
query();
67+
});
68+
69+
function query() {
70+
var sqlParam = new maplibregl.supermap.GetFeaturesBySQLParameters({
71+
queryParameter: {
72+
name: 'world@World',
73+
attributeFilter: 'SMID > 0'
74+
},
75+
datasetNames: ['World:world']
76+
});
77+
78+
new maplibregl.supermap.FeatureService(dataUrl).getFeaturesBySQL(
79+
sqlParam,
80+
function (serviceResult) {
81+
var FGBLayer = new maplibregl.supermap.FGBLayer({
82+
url: serviceResult.result.newResourceLocation,
83+
layerId: 'queryDatas',
84+
strategy: 'all',
85+
paint: {
86+
'fill-color': '#FF3300' /* 填充的颜色 */,
87+
'fill-opacity': 0.6 /* 透明度 */
88+
}
89+
});
90+
map.addLayer(FGBLayer);
91+
map.on('click', 'queryDatas', function (e) {
92+
new maplibregl.Popup()
93+
.setLngLat(e.lngLat)
94+
.setHTML(
95+
e.features[0].properties.SMID +
96+
'<br>' +
97+
resources.text_country +
98+
'：' +
99+
e.features[0].properties.COUNTRY
100+
)
101+
.addTo(map);
102+
});
103+
},
104+
'FGB'
105+
);
106+
}
107+
</script>
108+
</body>
109+
</html>

‎examples/maplibregl/04_bufferAnalystService_FGB.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8">
8+
<title data-i18n="resources.title_bufferAnalystService_FGB"></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/maplibregl/include-maplibregl.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16+
var map,
17+
attribution = "<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
18+
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
19+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ",
20+
baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}",
21+
serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
22+
map = new maplibregl.Map({
23+
container: 'map',
24+
style: {
25+
"version": 8,
26+
"sources": {
27+
"raster-tiles": {
28+
"attribution": attribution,
29+
"type": "raster",
30+
"tiles": [baseUrl],
31+
"tileSize": 256
32+
}
33+
},
34+
"layers": [{
35+
"id": "simple-tiles",
36+
"type": "raster",
37+
"source": "raster-tiles",
38+
"minzoom": 2,
39+
"maxzoom": 18
40+
}]
41+
},
42+
center: [116.28094998209556, 39.897168019388474],
43+
zoom: 12
44+
});
45+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
46+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
47+
48+
map.on("load", function () {
49+
bufferAnalystProcess();
50+
});
51+
52+
function bufferAnalystProcess() {
53+
map.addLayer({
54+
"id": "route",
55+
"type": "line",
56+
"source": {
57+
"type": "geojson",
58+
"data": {
59+
"type": "Feature",
60+
"geometry": {
61+
"type": "LineString",
62+
"coordinates": [
63+
[116.2143386597, 39.8959419733],
64+
[116.2156351162, 39.8963250173],
65+
[116.2182280292, 39.8968111885],
66+
[116.2740019864, 39.8970124079],
67+
[116.3103285499, 39.8970574832],
68+
[116.3321510064, 39.8970392162],
69+
[116.3377051439, 39.8973437531],
70+
[116.3463089006, 39.8978391816],
71+
]
72+
}
73+
}
74+
},
75+
"layout": {
76+
"line-join": "round",
77+
"line-cap": "round"
78+
},
79+
"paint": {
80+
"line-color": "#888",
81+
"line-width": 8
82+
}
83+
});
84+
//缓冲区分析参数
85+
var dsBufferAnalystParameters = new maplibregl.supermap.DatasetBufferAnalystParameters({
86+
dataset: "Road_L@Jingjin",
87+
filterQueryParameter: new maplibregl.supermap.FilterParameter({
88+
attributeFilter: "NAME='莲花池东路'"
89+
}),
90+
bufferSetting: new maplibregl.supermap.BufferSetting({
91+
endType: maplibregl.supermap.BufferEndType.ROUND,
92+
leftDistance: {value: 300},
93+
rightDistance: {value: 300},
94+
semicircleLineSegment: 10,
95+
radiusUnit: 'METER'
96+
})
97+
});
98+
//缓冲区分析服务 使用 FGB 格式
99+
new maplibregl.supermap.SpatialAnalystService(serviceUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
100+
var FGBLayer = new maplibregl.supermap.FGBLayer({
101+
url: serviceResult.result.newResourceLocation,
102+
strategy: 'all',
103+
paint: {
104+
"fill-color": "red", /* 填充的颜色 */
105+
"fill-opacity": 0.4 /* 透明度 */
106+
}
107+
});
108+
map.addLayer(FGBLayer);
109+
}, 'FGB')
110+
}
111+
</script>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)