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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy