Skip to content

Commit 417b492

Browse files
xiongjiaojiaoxilanhuaweidapao
xiongjiaojiao
authored and
xilanhuaweidapao
committed
【feat】mapboxgl/maplibre 新增 initMap; review by luox
1 parent 16a4b3b commit 417b492

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)