Skip to content

Commit c94d0a3

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feat】mapboxgl/maplibre 新增 initMap; review by luox
1 parent 4060c77 commit c94d0a3

File tree

24 files changed

+1393
-503
lines changed

24 files changed

+1393
-503
lines changed

‎examples/mapboxgl/01_tiledMapLayer.html

Lines changed: 60 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,74 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset='utf-8'/>
8-
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
6+
<head>
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
99
<title data-i18n="resources.title_tiledMapLayer"></title>
1010
<script type="text/javascript" src="../js/include-web.js"></script>
1111
<style>
12-
body {
13-
margin: 0;
14-
padding: 0;
15-
}
12+
body {
13+
margin: 0;
14+
padding: 0;
15+
}
1616

17-
#map {
18-
position: absolute;
19-
top: 0;
20-
bottom: 0;
21-
width: 100%;
22-
}
17+
#map {
18+
position: absolute;
19+
top: 0;
20+
bottom: 0;
21+
width: 100%;
22+
}
2323
</style>
24-
</head>
25-
<body>
26-
<div id='map'></div>
27-
<script type="text/javascript" exclude='iclient-mapboxgl' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
28-
<script type="text/javascript">
29-
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
30-
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
24+
</head>
25+
<body>
26+
<div id="map"></div>
27+
<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
28+
<script type="text/javascript">
29+
var host = window.isLocal ? window.server : 'http://172.16.15.131:8090';
30+
var attribution =
31+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
3132
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
3233
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
3334

34-
var map = new mapboxgl.Map({
35-
container: 'map', // container id
36-
style: {
37-
"version": 8,
38-
"sources": {
39-
"raster-tiles": {
40-
"attribution": attribution,
41-
"type": "raster",
42-
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
43-
"tileSize": 256
44-
}
45-
},
46-
"layers": [{
47-
"id": "simple-tiles",
48-
"type": "raster",
49-
"source": "raster-tiles",
50-
"minzoom": 0,
51-
"maxzoom": 22
52-
}]
53-
},
54-
center: [120.143, 30.236], // starting position
55-
zoom: 3 // starting zoom
56-
});
57-
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
5835

59-
</script>
36+
// 方式一：1.调用 maplibregl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
37+
mapboxgl.supermap
38+
.initMap(host + '/iserver/services/map-china400/rest/maps/China', {
39+
mapOptions: {
40+
center: [120.143, 30.236], // starting position
41+
zoom: 3 // starting zoom
42+
}
43+
})
44+
.then(function (dataRes) {
45+
var map = dataRes.map;
46+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
47+
});
6048

61-
</body>
49+
// 方法二： 直接用 mapboxgk.Map 初始化
50+
// var map = new mapboxgl.Map({
51+
// container: 'map', // container id
52+
// style: {
53+
// "version": 8,
54+
// "sources": {
55+
// "raster-tiles": {
56+
// "attribution": attribution,
57+
// "type": "raster",
58+
// "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
59+
// "tileSize": 256
60+
// }
61+
// },
62+
// "layers": [{
63+
// "id": "simple-tiles",
64+
// "type": "raster",
65+
// "source": "raster-tiles",
66+
// "minzoom": 0,
67+
// "maxzoom": 22
68+
// }]
69+
// },
70+
// center: [120.143, 30.236], // starting position
71+
// zoom: 3 // starting zoom
72+
// });
73+
// map.addControl(new mapboxgl.NavigationControl(), 'top-left');
74+
</script>
75+
</body>
6276
</html>

‎examples/mapboxgl/01_tiledMapLayer_4326.html

Lines changed: 106 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -7,107 +7,116 @@
77
*********************************************************************-->
88
<!DOCTYPE html>
99
<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
16-
type="text/javascript"
17-
include="mapbox-gl-enhance"
18-
src="../../dist/mapboxgl/include-mapboxgl.js"
19-
></script>
20-
<style>
21-
body {
22-
margin: 0;
23-
padding: 0;
24-
}
2510

26-
#map {
27-
position: absolute;
28-
top: 0;
29-
bottom: 0;
30-
width: 100%;
31-
}
32-
</style>
33-
</head>
11+
<head>
12+
<meta charset="utf-8" />
13+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
14+
<title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
15+
<script type="text/javascript" src="../js/include-web.js"></script>
16+
<script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
17+
<style>
18+
body {
19+
margin: 0;
20+
padding: 0;
21+
}
3422

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 map = new mapboxgl.Map({
40-
container: 'map', // container id
41-
style: {
42-
version: 8,
43-
sources: {
44-
'raster-tiles': {
45-
type: 'raster',
46-
tileSize: 256,
47-
//xyz形式，原生支持
48-
//"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
23+
#map {
24+
position: absolute;
25+
top: 0;
26+
bottom: 0;
27+
width: 100%;
28+
}
29+
</style>
30+
</head>
4931

50-
//iserver image资源模板；扩展支持
51-
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
32+
<body>
33+
<div id="map"></div>
34+
<script type="text/javascript">
35+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
5236

53-
//iserver tileimage资源模板；扩展支持
54-
//"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}'],
37+
// 方式一：1.调用 maplibregl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
38+
mapboxgl.supermap.initMap(host + '/iserver/services/map-world/rest/maps/World', {
39+
mapOptions: {
40+
zoom: 2
41+
}
42+
}).then(function (dataRes) {
43+
var map = dataRes.map;
44+
map.on('load', function () {
45+
//从 iServer 查询
46+
var idsParam = new mapboxgl.supermap.GetFeaturesByIDsParameters({
47+
IDs: [234],
48+
datasetNames: ['World:Countries']
49+
});
50+
var service = new mapboxgl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
51+
service.getFeaturesByIDs(idsParam, function (serviceResult) {
52+
map.addSource('queryDatas', {
53+
type: 'geojson',
54+
data: serviceResult.result.features
55+
});
56+
map.addLayer({
57+
id: 'queryDatas',
58+
type: 'fill',
59+
source: 'queryDatas',
60+
paint: {
61+
'fill-color': '#008080',
62+
'fill-opacity': 1
63+
},
64+
filter: ['==', '$type', 'Polygon']
65+
});
66+
});
67+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
68+
});
69+
});
5570

56-
//推荐； iserver tileimage资源；扩展支持
57-
//参数列表：
58-
//地图服务地址（到地图名)必填 ；
59-
//rasterSource为"iserver"；必填；
60-
//transparent:可选，默认为true；
61-
//cacheEnabled: 是否使用缓存，默认为true；
62-
//redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
63-
//layersID:要显示的图层id字符串；
64-
//tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
65-
//rasterfunction: 栅格分析参数,类型为mapboxgl.supermap.NDVIParameter或mapboxgl.supermap.HillshadeParameter；
66-
//format:瓦片格式，默认为'png'；
67-
tiles: [host + '/iserver/services/map-world/rest/maps/World'],
68-
rasterSource: 'iserver'
69-
}
70-
},
71+
// 方法二： 直接用 mapboxgk.Map 初始化
72+
// var map = new mapboxgl.Map({
73+
// container: 'map', // container id
74+
// style: {
75+
// version: 8,
76+
// sources: {
77+
// 'raster-tiles': {
78+
// type: 'raster',
79+
// tileSize: 256,
80+
// //xyz形式，原生支持
81+
// //"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
82+
83+
// //iserver image资源模板；扩展支持
84+
// //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
85+
86+
// //iserver tileimage资源模板；扩展支持
87+
// //"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}'],
88+
89+
// //推荐； iserver tileimage资源；扩展支持
90+
// //参数列表：
91+
// //地图服务地址（到地图名)必填 ；
92+
// //rasterSource为"iserver"；必填；
93+
// //transparent:可选，默认为true；
94+
// //cacheEnabled: 是否使用缓存，默认为true；
95+
// //redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
96+
// //layersID:要显示的图层id字符串；
97+
// //tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
98+
// //rasterfunction: 栅格分析参数,类型为mapboxgl.supermap.NDVIParameter或mapboxgl.supermap.HillshadeParameter；
99+
// //format:瓦片格式，默认为'png'；
100+
// tiles: [host + '/iserver/services/map-world/rest/maps/World'],
101+
// rasterSource: 'iserver'
102+
// }
103+
// },
104+
105+
// layers: [
106+
// {
107+
// id: 'simple-tiles',
108+
// type: 'raster',
109+
// source: 'raster-tiles',
110+
// minzoom: 0,
111+
// maxzoom: 22
112+
// }
113+
// ]
114+
// },
115+
// crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
116+
// center: [0, 0],
117+
// zoom: 2
118+
// });
119+
</script>
120+
</body>
71121

72-
layers: [
73-
{
74-
id: 'simple-tiles',
75-
type: 'raster',
76-
source: 'raster-tiles',
77-
minzoom: 0,
78-
maxzoom: 22
79-
}
80-
]
81-
},
82-
crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
83-
center: [0, 0],
84-
zoom: 2
85-
});
86-
map.on('load', function() {
87-
//从 iServer 查询
88-
var idsParam = new mapboxgl.supermap.GetFeaturesByIDsParameters({
89-
IDs: [234],
90-
datasetNames: ['World:Countries']
91-
});
92-
var service = new mapboxgl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
93-
service.getFeaturesByIDs(idsParam, function(serviceResult) {
94-
map.addSource('queryDatas', {
95-
type: 'geojson',
96-
data: serviceResult.result.features
97-
});
98-
map.addLayer({
99-
id: 'queryDatas',
100-
type: 'fill',
101-
source: 'queryDatas',
102-
paint: {
103-
'fill-color': '#008080',
104-
'fill-opacity': 0.4
105-
},
106-
filter: ['==', '$type', 'Polygon']
107-
});
108-
});
109-
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
110-
});
111-
</script>
112-
</body>
113122
</html>

‎examples/mapboxgl/mvtVectorTile_2362.html

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,40 @@
3333
<script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
3434
<script type="text/javascript">
3535
var host = (window.isLocal ? window.server : "https://iserver.supermap.io");
36-
var WKT = 'PROJCS["Xian 1980 / 3-degree Gauss-Kruger zone 38",GEOGCS["Xian 1980",DATUM["Xian_1980",SPHEROID["IAG 1975",6378140,298.257,AUTHORITY["EPSG","7049"]],AUTHORITY["EPSG","6610"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4610"]],PROJECTION["Transverse_Mercator"],PARAMETER["latitude_of_origin",0],PARAMETER["central_meridian",114],PARAMETER["scale_factor",1],PARAMETER["false_easting",38500000],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AUTHORITY["EPSG","2362"]]'
37-
var map = new mapboxgl.Map({
38-
container: 'map',
39-
style: host+'/iserver/services/map-mvt-landuse/rest/maps/landuse/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
40-
// mapboxgl.CRS(name,wkt,extent);
41-
// name：坐标系名称，必填
42-
// wkt：坐标系的WKT或者Proj4表述，必填。
43-
// extent: 当前坐标系范围，[左，下，右，上]
44-
crs: new mapboxgl.CRS('EPSG:2362', WKT, [32876993.777095847, -10001970.421227315, 52880934.61955048, 10001970.421227315]),
36+
37+
// 方式一：1.调用 maplibregl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
38+
mapboxgl.supermap.initMap(host+'/iserver/services/map-mvt-landuse/rest/maps/landuse', {
39+
type: 'vector-tile',
40+
mapOptions: {
4541
center: [108.9118776, 23.8260365],
4642
zoom: 13,
4743
renderWorldCopies: false,
44+
}
45+
}).then(function (dataRes) {
46+
var map = dataRes.map;
47+
new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
48+
map.addControl(new mapboxgl.NavigationControl());
49+
})
50+
51+
// 方法二： 1. 注册坐标投影
52+
// 2. 直接用 mapboxgk.Map 初始化
53+
// var WKT = 'PROJCS["Xian 1980 / 3-degree Gauss-Kruger zone 38",GEOGCS["Xian 1980",DATUM["Xian_1980",SPHEROID["IAG 1975",6378140,298.257,AUTHORITY["EPSG","7049"]],AUTHORITY["EPSG","6610"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4610"]],PROJECTION["Transverse_Mercator"],PARAMETER["latitude_of_origin",0],PARAMETER["central_meridian",114],PARAMETER["scale_factor",1],PARAMETER["false_easting",38500000],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AUTHORITY["EPSG","2362"]]'
54+
// var map = new mapboxgl.Map({
55+
// container: 'map',
56+
// style: host+'/iserver/services/map-mvt-landuse/rest/maps/landuse/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
57+
// // mapboxgl.CRS(name,wkt,extent);
58+
// // name：坐标系名称，必填
59+
// // wkt：坐标系的WKT或者Proj4表述，必填。
60+
// // extent: 当前坐标系范围，[左，下，右，上]
61+
// crs: new mapboxgl.CRS('EPSG:2362', WKT, [32876993.777095847, -10001970.421227315, 52880934.61955048, 10001970.421227315]),
62+
// center: [108.9118776, 23.8260365],
63+
// zoom: 13,
64+
// renderWorldCopies: false,
65+
66+
// });
67+
// new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
68+
// map.addControl(new mapboxgl.NavigationControl());
4869

49-
});
50-
new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
51-
map.addControl(new mapboxgl.NavigationControl());
5270

5371
</script>
5472

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