Skip to content

Commit a011992

Browse files
luoxiao-supermapluoxiao-supermap
committed
[fix]mapboxgl initmap 增加zoom修改center和例子 review by qiw
1 parent 3d6b2c6 commit a011992

File tree

8 files changed

+203
-157
lines changed

8 files changed

+203
-157
lines changed

‎examples/mapboxgl/01_tiledMapLayer.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,9 @@
3535

3636
// 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
3737
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;
38+
.initMap(host + '/iserver/services/map-china400/rest/maps/China')
39+
.then(function (result) {
40+
var map = result.map;
4641
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
4742
});
4843

‎examples/mapboxgl/01_tiledMapLayer_4326.html‎

Lines changed: 72 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,35 @@
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 type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
16+
<style>
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
}
1021

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-
}
22-
23-
#map {
24-
position: absolute;
25-
top: 0;
26-
bottom: 0;
27-
width: 100%;
28-
}
29-
</style>
30-
</head>
22+
#map {
23+
position: absolute;
24+
top: 0;
25+
bottom: 0;
26+
width: 100%;
27+
}
28+
</style>
29+
</head>
3130

32-
<body>
33-
<div id="map"></div>
34-
<script type="text/javascript">
35-
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
31+
<body>
32+
<div id="map"></div>
33+
<script type="text/javascript">
34+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
3635

37-
// 方式一：1.调用 mapboxgl.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 () {
36+
// 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
37+
mapboxgl.supermap.initMap(host + '/iserver/services/map-world/rest/maps/World').then(function (result) {
38+
var map = result.map;
4539
//从 iServer 查询
4640
var idsParam = new mapboxgl.supermap.GetFeaturesByIDsParameters({
4741
IDs: [234],
@@ -66,57 +60,55 @@
6660
});
6761
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
6862
});
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}'],
8263

83-
// //iserver image资源模板；扩展支持
84-
// //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
64+
// 方法二： 直接用 mapboxgk.Map 初始化
65+
// var map = new mapboxgl.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}'],
8575

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}'],
76+
// //iserver image资源模板；扩展支持
77+
// //"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
8878

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-
// },
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}'],
10481

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>
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: 栅格分析参数,类型为mapboxgl.supermap.NDVIParameter或mapboxgl.supermap.HillshadeParameter；
92+
// //format:瓦片格式，默认为'png'；
93+
// tiles: [host + '/iserver/services/map-world/rest/maps/World'],
94+
// rasterSource: 'iserver'
95+
// }
96+
// },
12197

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', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
109+
// center: [0, 0],
110+
// zoom: 2
111+
// });
112+
</script>
113+
</body>
122114
</html>

‎examples/mapboxgl/mvtVectorTile_2362.html‎

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,69 +7,67 @@
77
*********************************************************************-->
88
<!DOCTYPE html>
99
<html>
10-
11-
<head>
12-
<meta charset='utf-8' />
10+
<head>
11+
<meta charset="utf-8" />
1312
<title data-i18n="resources.title_mvtVectorLayer4326"></title>
14-
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
13+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
1514
<style>
16-
body {
17-
margin: 0;
18-
padding: 0;
19-
}
15+
body {
16+
margin: 0;
17+
padding: 0;
18+
}
2019

21-
#map {
22-
position: absolute;
23-
top: 0;
24-
bottom: 0;
25-
width: 100%;
26-
}
20+
#map {
21+
position: absolute;
22+
top: 0;
23+
bottom: 0;
24+
width: 100%;
25+
}
2726
</style>
28-
</head>
27+
</head>
2928

30-
<body>
31-
<div id='map'></div>
29+
<body>
30+
<div id="map"></div>
3231
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
3332
<script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
3433
<script type="text/javascript">
35-
var host = (window.isLocal ? window.server : "https://iserver.supermap.io");
34+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
3635

37-
// 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
38-
mapboxgl.supermap.initMap(host+'/iserver/services/map-mvt-landuse/rest/maps/landuse', {
36+
// 方式一：1.调用 mapboxgl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
37+
mapboxgl.supermap
38+
.initMap(host + '/iserver/services/map-mvt-landuse/rest/maps/landuse', {
3939
type: 'vector-tile',
4040
mapOptions: {
41-
center: [108.9118776, 23.8260365],
42-
zoom: 13,
43-
renderWorldCopies: false,
41+
zoom: 13
4442
}
45-
}).then(function (dataRes) {
46-
var map = dataRes.map;
43+
})
44+
.then(function (result) {
45+
var map = result.map;
4746
new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
4847
map.addControl(new mapboxgl.NavigationControl());
4948
})
49+
.catch((e) => {
50+
console.log(e);
51+
});
5052

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());
69-
53+
// 方法二： 1. 注册坐标投影
54+
// 2. 直接用 mapboxgk.Map 初始化
55+
// 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"]]'
56+
// var map = new mapboxgl.Map({
57+
// container: 'map',
58+
// style: host+'/iserver/services/map-mvt-landuse/rest/maps/landuse/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true&tileURLTemplate=ZXY',
59+
// // mapboxgl.CRS(name,wkt,extent);
60+
// // name：坐标系名称，必填
61+
// // wkt：坐标系的WKT或者Proj4表述，必填。
62+
// // extent: 当前坐标系范围，[左，下，右，上]
63+
// crs: new mapboxgl.CRS('EPSG:2362', WKT, [32876993.777095847, -10001970.421227315, 52880934.61955048, 10001970.421227315]),
64+
// center: [108.9118776, 23.8260365],
65+
// zoom: 13,
66+
// renderWorldCopies: false,
7067

68+
// });
69+
// new mapboxgl.Marker().setLngLat([108.9131417, 23.826245]).addTo(map);
70+
// map.addControl(new mapboxgl.NavigationControl());
7171
</script>
72-
73-
</body>
74-
72+
</body>
7573
</html>

‎examples/maplibregl/01_tiledMapLayer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
3333

3434
// 方式一：1.调用 maplibregl.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
35-
maplibregl.supermap.initMap(host + '/iserver/services/map-china400/rest/maps/China').then(function (dataRes) {
36-
var map = dataRes.map;
35+
maplibregl.supermap.initMap(host + '/iserver/services/map-china400/rest/maps/China').then(function (result) {
36+
var map = result.map;
3737
map.addControl(new maplibregl.NavigationControl(), 'top-left');
3838
})
3939

‎examples/maplibregl/mvtVectorTile_landuse.html‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,10 @@
3434
maplibregl.supermap.initMap(host + '/iserver/services/map-mvt-landuse2/rest/maps/landuse', {
3535
type: 'vector-tile',
3636
mapOptions: {
37-
zoom: 13,
38-
minZoom: 11,
39-
maxZoom: 15,
37+
zoom: 13
4038
}
41-
}).then(function (dataRes) {
42-
var map = dataRes.map;
39+
}).then(function (result) {
40+
var map = result.map;
4341
map.addControl(new maplibregl.NavigationControl(), 'top-left');
4442
});
4543

@@ -49,9 +47,7 @@
4947
// style: host +
5048
// '/iserver/services/map-mvt-landuse2/rest/maps/landuse/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
5149
// center: [108.913171372641, 23.8262192695701], // starting position
52-
// zoom: 13,
53-
// minZoom: 11,
54-
// maxZoom: 15,
50+
// zoom: 13
5551
// attributionControl: false
5652
// });
5753
// map.addControl(new maplibregl.NavigationControl(), 'top-left');

0 commit comments

Comments
 (0)