Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit deab963

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

File tree

24 files changed

+503
-1393
lines changed

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)

AltStyle によって変換されたページ (->オリジナル) /