Skip to content

Commit c89f68d

Browse files
chenxianhuiichenxianhuii
committed
add 新增maplibregl多投影例子
1 parent a55234b commit c89f68d

23 files changed

+2829
-1
lines changed

‎dist/maplibregl/include-maplibregl.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
inputCSS(libsurl + '/maplibre-gl-js/4.3.2/maplibre-gl.min.css');
5959
inputScript(libsurl + '/maplibre-gl-js/4.3.2/maplibre-gl.min.js');
6060
}
61+
if (inArray(includes, 'maplibre-gl-enhance')) {
62+
inputCSS(libsurl + '/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.css');
63+
inputScript(libsurl + '/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.js');
64+
}
6165
if (inArray(includes, 'L7')) {
6266
inputScript(libsurl + '/maplibregl-l7-render/0.0.1/maplibregl-l7-render.js');
6367
}

‎examples/maplibregl/01_tiledMapLayer_4214.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* maplibre-gl-enhance (https://iclient.supermap.io/web/libs/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.js)
7+
*********************************************************************-->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
13+
<title data-i18n="resources.title_tiledMapLayer_Beijing54"></title>
14+
<script type="text/javascript" src="../js/include-web.js"></script>
15+
<script
16+
type="text/javascript"
17+
include="maplibre-gl-enhance"
18+
src="../../dist/maplibregl/include-maplibregl.js"
19+
></script>
20+
<style>
21+
body {
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
#map {
27+
position: absolute;
28+
top: 0;
29+
bottom: 0;
30+
width: 100%;
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
<div id="map"></div>
37+
<script type="text/javascript">
38+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
39+
var url = host + '/iserver/services/map-china400/rest/maps/China_4214';
40+
var map = new maplibregl.Map({
41+
container: 'map', // container id
42+
style: {
43+
version: 8,
44+
sources: {
45+
'raster-tiles': {
46+
type: 'raster',
47+
tileSize: 256,
48+
//xyz形式，原生支持
49+
//"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
50+
51+
//iserver image资源模板；扩展支持
52+
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
53+
54+
//iserver tileimage资源模板；扩展支持
55+
//"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
56+
57+
//推荐； iserver tileimage资源；扩展支持
58+
//参数列表：
59+
//地图服务地址（到地图名)必填 ；
60+
//rasterSource为"iserver"；必填；
61+
//transparent:可选，默认为true；
62+
//cacheEnabled: 是否使用缓存，默认为true；
63+
//redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
64+
//layersID:要显示的图层id字符串；
65+
//tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
66+
//rasterfunction: 栅格分析参数,类型为maplibregl.supermap.NDVIParameter或maplibregl.supermap.HillshadeParameter；
67+
//format:瓦片格式，默认为'png'；
68+
tiles: [url],
69+
rasterSource: 'iserver'
70+
}
71+
},
72+
73+
layers: [
74+
{
75+
id: 'simple-tiles',
76+
type: 'raster',
77+
source: 'raster-tiles',
78+
minzoom: 0,
79+
maxzoom: 22
80+
}
81+
]
82+
},
83+
crs: 'EPSG:4214',
84+
center: [101.74721254733845, 32.5665352689922],
85+
zoom: 3
86+
});
87+
map.on('load', function() {
88+
//从 iServer 查询
89+
var param = new maplibregl.supermap.QueryBySQLParameters({
90+
queryParams: {
91+
name: 'China_Province_pl@China',
92+
attributeFilter: 'SMID =14'
93+
}
94+
});
95+
new maplibregl.supermap.QueryService(url).queryBySQL(param).then(function(serviceResult) {
96+
map.addSource('queryDatas', {
97+
type: 'geojson',
98+
data: serviceResult.result.recordsets[0].features
99+
});
100+
map.addLayer({
101+
id: 'queryDatas',
102+
type: 'fill',
103+
source: 'queryDatas',
104+
paint: {
105+
'fill-color': '#008080',
106+
'fill-opacity': 0.4
107+
},
108+
filter: ['==', '$type', 'Polygon']
109+
});
110+
});
111+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
112+
});
113+
</script>
114+
</body>
115+
</html>

‎examples/maplibregl/01_tiledMapLayer_4326.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* maplibre-gl-enhance (https://iclient.supermap.io/web/libs/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.js)
7+
*********************************************************************-->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
13+
<title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
14+
<script type="text/javascript" src="../js/include-web.js"></script>
15+
<script type="text/javascript" include="maplibre-gl-enhance" src="../../dist/maplibregl/include-maplibregl.js"></script>
16+
<style>
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
#map {
23+
position: absolute;
24+
top: 0;
25+
bottom: 0;
26+
width: 100%;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div id="map"></div>
33+
<script type="text/javascript">
34+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
35+
36+
// 方式一：1.调用 maplibregl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
37+
maplibregl.supermap.initMap(host + '/iserver/services/map-world/rest/maps/World').then(function (result) {
38+
var map = result.map;
39+
//从 iServer 查询
40+
var idsParam = new maplibregl.supermap.GetFeaturesByIDsParameters({
41+
IDs: [234],
42+
datasetNames: ['World:Countries']
43+
});
44+
var service = new maplibregl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
45+
service.getFeaturesByIDs(idsParam).then(function (serviceResult) {
46+
map.addSource('queryDatas', {
47+
type: 'geojson',
48+
data: serviceResult.result.features
49+
});
50+
map.addLayer({
51+
id: 'queryDatas',
52+
type: 'fill',
53+
source: 'queryDatas',
54+
paint: {
55+
'fill-color': '#008080',
56+
'fill-opacity': 1
57+
},
58+
filter: ['==', '$type', 'Polygon']
59+
});
60+
});
61+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
62+
});
63+
64+
// 方法二： 直接用 maplibregk.Map 初始化
65+
// var map = new maplibregl.Map({
66+
// container: 'map', // container id
67+
// style: {
68+
// version: 8,
69+
// sources: {
70+
// 'raster-tiles': {
71+
// type: 'raster',
72+
// tileSize: 256,
73+
// //xyz形式，原生支持
74+
// //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
75+
76+
// //iserver image资源模板；扩展支持
77+
// //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
78+
79+
// //iserver tileimage资源模板；扩展支持
80+
// //"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
81+
82+
// //推荐； iserver tileimage资源；扩展支持
83+
// //参数列表：
84+
// //地图服务地址（到地图名)必填 ；
85+
// //rasterSource为"iserver"；必填；
86+
// //transparent:可选，默认为true；
87+
// //cacheEnabled: 是否使用缓存，默认为true；
88+
// //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
89+
// //layersID:要显示的图层id字符串；
90+
// //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
91+
// //rasterfunction: 栅格分析参数,类型为maplibregl.supermap.NDVIParameter或maplibregl.supermap.HillshadeParameter；
92+
// //format:瓦片格式，默认为'png'；
93+
// tiles: [host + '/iserver/services/map-world/rest/maps/World'],
94+
// rasterSource: 'iserver'
95+
// }
96+
// },
97+
98+
// layers: [
99+
// {
100+
// id: 'simple-tiles',
101+
// type: 'raster',
102+
// source: 'raster-tiles',
103+
// minzoom: 0,
104+
// maxzoom: 22
105+
// }
106+
// ]
107+
// },
108+
// crs: 'EPSG:4326', // 或者 maplibregl.CRS.EPSG4326 或者 new maplibregl.CRS('EPSG:4326',[-180,-90,180,90]);
109+
// center: [0, 0],
110+
// zoom: 2
111+
// });
112+
</script>
113+
</body>
114+
</html>

‎examples/maplibregl/01_tiledMapLayer_4490.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* maplibre-gl-enhance (https://iclient.supermap.io/web/libs/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.js)
7+
*********************************************************************-->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
13+
<title data-i18n="resources.title_tiledMapLayer_China2000"></title>
14+
<script type="text/javascript" src="../js/include-web.js"></script>
15+
<script
16+
type="text/javascript"
17+
include="maplibre-gl-enhance"
18+
src="../../dist/maplibregl/include-maplibregl.js"
19+
></script>
20+
<style>
21+
body {
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
#map {
27+
position: absolute;
28+
top: 0;
29+
bottom: 0;
30+
width: 100%;
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
<div id="map"></div>
37+
<script type="text/javascript">
38+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
39+
var url = host + '/iserver/services/map-china400/rest/maps/China_4490';
40+
var map = new maplibregl.Map({
41+
container: 'map', // container id
42+
style: {
43+
version: 8,
44+
sources: {
45+
'raster-tiles': {
46+
type: 'raster',
47+
tileSize: 256,
48+
//xyz形式，原生支持
49+
//"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
50+
51+
//iserver image资源模板；扩展支持
52+
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
53+
54+
//iserver tileimage资源模板；扩展支持
55+
//"tiles": ['https://iserver.supermap.io/iserver/services/map-jingjin/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
56+
57+
//推荐； iserver tileimage资源；扩展支持
58+
//参数列表：
59+
//地图服务地址（到地图名)必填 ；
60+
//rasterSource为"iserver"；必填；
61+
//transparent:可选，默认为true；
62+
//cacheEnabled: 是否使用缓存，默认为true；
63+
//redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
64+
//layersID:要显示的图层id字符串；
65+
//tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
66+
//rasterfunction: 栅格分析参数,类型为maplibregl.supermap.NDVIParameter或maplibregl.supermap.HillshadeParameter；
67+
//format:瓦片格式，默认为'png'；
68+
tiles: [url],
69+
rasterSource: 'iserver'
70+
}
71+
},
72+
73+
layers: [
74+
{
75+
id: 'simple-tiles',
76+
type: 'raster',
77+
source: 'raster-tiles',
78+
minzoom: 0,
79+
maxzoom: 22
80+
}
81+
]
82+
},
83+
crs: 'EPSG:4490',
84+
center: [101.74721254733845, 32.5665352689922],
85+
zoom: 3
86+
});
87+
map.on('load', function() {
88+
//从 iServer 查询
89+
var param = new maplibregl.supermap.QueryBySQLParameters({
90+
queryParams: {
91+
name: 'China_Province_pl@China',
92+
attributeFilter: 'SMID =14'
93+
}
94+
});
95+
new maplibregl.supermap.QueryService(url).queryBySQL(param).then(function(serviceResult) {
96+
map.addSource('queryDatas', {
97+
type: 'geojson',
98+
data: serviceResult.result.recordsets[0].features
99+
});
100+
map.addLayer({
101+
id: 'queryDatas',
102+
type: 'fill',
103+
source: 'queryDatas',
104+
paint: {
105+
'fill-color': '#008080',
106+
'fill-opacity': 0.4
107+
},
108+
filter: ['==', '$type', 'Polygon']
109+
});
110+
});
111+
map.addControl(new maplibregl.NavigationControl(), 'top-left');
112+
});
113+
</script>
114+
</body>
115+
</html>

0 commit comments

Comments
 (0)