Skip to content

Commit 1fb45ec

Browse files
jinnanyangjinnanyang
committed
[update]新增maplibre例子 review by qiwei
1 parent 7fabc60 commit 1fb45ec

File tree

87 files changed

+13837
-388
lines changed

Some content is hidden

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

87 files changed

+13837
-388
lines changed

‎examples/maplibregl/config.js

Lines changed: 658 additions & 388 deletions
Large diffs are not rendered by default.

‎examples/maplibregl/control_attributionControl.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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_attribution"></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+
<span id="show"></span>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
17+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
18+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© Maplibre </a>" +
19+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
20+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
21+
var map = new maplibregl.Map({
22+
container: 'map',
23+
attributionControl: false,
24+
style: {
25+
"version": 8,
26+
"sources": {
27+
"raster-tiles": {
28+
"attribution": attribution,
29+
"type": "raster",
30+
"tiles": [url],
31+
"tileSize": 256,
32+
},
33+
},
34+
"layers": [{
35+
"id": "simple-tiles",
36+
"type": "raster",
37+
"source": "raster-tiles",
38+
"minzoom": 0,
39+
"maxzoom": 22
40+
}]
41+
},
42+
center: [-74.50, 40],
43+
maxZoom: 18,
44+
zoom: 2,
45+
});
46+
47+
//maplibre默认 Attribution控件
48+
map.addControl(new maplibregl.AttributionControl({compact: true}));
49+
50+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
51+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
52+
</script>
53+
54+
</body>
55+
</html>

‎examples/maplibregl/control_drawControl.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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_drawControl"></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" include="draw" src="../../dist/maplibregl/include-maplibregl.js"></script>
14+
<span id="show"></span>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
17+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
18+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© Maplibre </a>" +
19+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
20+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
21+
var map = new maplibregl.Map({
22+
container: 'map',
23+
attributionControl: false,
24+
style: {
25+
"version": 8,
26+
"sources": {
27+
"raster-tiles": {
28+
"attribution": attribution,
29+
"type": "raster",
30+
"tiles": [url],
31+
"tileSize": 256,
32+
},
33+
},
34+
"layers": [{
35+
"id": "simple-tiles",
36+
"type": "raster",
37+
"source": "raster-tiles",
38+
"minzoom": 0,
39+
"maxzoom": 22
40+
}]
41+
},
42+
center: [-74.50, 40],
43+
maxZoom: 18,
44+
zoom: 2,
45+
});
46+
47+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
48+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
49+
//maplibre 绘制要素图形控件
50+
var Draw = new MapboxDraw();
51+
map.addControl(Draw,'top-left')
52+
53+
</script>
54+
55+
</body>
56+
</html>

‎examples/maplibregl/control_fullscreenControl.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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_fullscreenControl"></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+
<span id="show"></span>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
17+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
18+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
19+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
20+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
21+
var map = new maplibregl.Map({
22+
container: 'map',
23+
style: {
24+
"version": 8,
25+
"sources": {
26+
"raster-tiles": {
27+
"attribution": attribution,
28+
"type": "raster",
29+
"tiles": [url],
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: [-74.50, 40],
42+
maxZoom: 18,
43+
zoom: 2,
44+
});
45+
46+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
47+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
48+
// mapliber全屏控件
49+
map.addControl(new maplibregl.FullscreenControl(),'top-left');
50+
51+
</script>
52+
53+
</body>
54+
</html>

‎examples/maplibregl/control_geolocateControl.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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_geolocateControl"></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+
<span id="show"></span>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
17+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
18+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
19+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
20+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
21+
var map = new maplibregl.Map({
22+
container: 'map',
23+
style: {
24+
"version": 8,
25+
"sources": {
26+
"raster-tiles": {
27+
"attribution": attribution,
28+
"type": "raster",
29+
"tiles": [url],
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: [-74.50, 40],
42+
maxZoom: 18,
43+
zoom: 2,
44+
});
45+
46+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
47+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
48+
49+
//maplibre 定位控件，当浏览器禁用定位后，该控件不再显示
50+
map.addControl(new maplibregl.GeolocateControl({
51+
positionOptions: {
52+
enableHighAccuracy: true
53+
},
54+
trackUserLocation: true
55+
}),'top-left');
56+
57+
</script>
58+
59+
</body>
60+
</html>

‎examples/maplibregl/control_navigationControl.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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_geolocateControl"></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+
<span id="show"></span>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
17+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
18+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
19+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
20+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
21+
var map = new maplibregl.Map({
22+
container: 'map',
23+
style: {
24+
"version": 8,
25+
"sources": {
26+
"raster-tiles": {
27+
"attribution": attribution,
28+
"type": "raster",
29+
"tiles": [url],
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: [-74.50, 40],
42+
maxZoom: 18,
43+
zoom: 2,
44+
});
45+
46+
// maplibre导航及放大缩小控件
47+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
48+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
49+
50+
</script>
51+
52+
</body>
53+
</html>

‎examples/maplibregl/control_scaleControl.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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_scaleline"></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+
<span id="show"></span>
15+
<script type="text/javascript">
16+
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
17+
var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
18+
var attribution = "<a href='https://maplibre.org/' target='_blank'>© MapLibre </a>" +
19+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
20+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
21+
var map = new maplibregl.Map({
22+
container: 'map',
23+
style: {
24+
"version": 8,
25+
"sources": {
26+
"raster-tiles": {
27+
"attribution": attribution,
28+
"type": "raster",
29+
"tiles": [url],
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: [-74.50, 40],
42+
maxZoom: 18,
43+
zoom: 2,
44+
});
45+
46+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
47+
map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
48+
// mapliber比例尺控件
49+
map.addControl(new maplibregl.ScaleControl({}));
50+
51+
</script>
52+
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)