Skip to content

Commit deab963

Browse files
xiongjiaojiaoxiongjiaojiao
committed
Revert "【feat】mapboxgl/maplibre 新增 initMap; review by luox"
This reverts commit c94d0a3.
1 parent 661e745 commit deab963

24 files changed

+503
-1393
lines changed

‎examples/mapboxgl/01_tiledMapLayer.html

Lines changed: 46 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,60 @@
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" 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>" +
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>" +
3231
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
3332
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
3433

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');
3558

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-
});
59+
</script>
4860

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>
61+
</body>
7662
</html>

‎examples/mapboxgl/01_tiledMapLayer_4326.html

Lines changed: 97 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -7,116 +7,107 @@
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+
}
1025

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-
}
26+
#map {
27+
position: absolute;
28+
top: 0;
29+
bottom: 0;
30+
width: 100%;
31+
}
32+
</style>
33+
</head>
2234

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

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

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-
});
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}'],
7055

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>
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+
},
12171

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>
122113
</html>

‎examples/mapboxgl/mvtVectorTile_2362.html

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -33,40 +33,22 @@
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-
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: {
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]),
4145
center: [108.9118776, 23.8260365],
4246
zoom: 13,
4347
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());
6948

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

7153
</script>
7254

0 commit comments

Comments
 (0)