Skip to content

Commit 9f669be

Browse files
songyumengsongyumeng
committed
【update】mapboxgl-enhance例子增加支持参数注释
1 parent 9ad7158 commit 9f669be

File tree

4 files changed

+377
-346
lines changed

4 files changed

+377
-346
lines changed

‎examples/mapboxgl/01_tiledMapLayer_4214.html‎

Lines changed: 95 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,100 +3,109 @@
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" />
9+
<title data-i18n="resources.title_tiledMapLayer_Beijing54"></title>
10+
<script type="text/javascript" src="../js/include-web.js"></script>
11+
<script
12+
type="text/javascript"
13+
include="mapbox-gl-enhance"
14+
src="../../dist/mapboxgl/include-mapboxgl.js"
15+
></script>
16+
<style>
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
}
621

7-
<head>
8-
<meta charset='utf-8' />
9-
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
10-
<title data-i18n="resources.title_tiledMapLayer_Beijing54"></title>
11-
<script type="text/javascript" src="../js/include-web.js"></script>
12-
<script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
13-
<style>
14-
body {
15-
margin: 0;
16-
padding: 0;
17-
}
22+
#map {
23+
position: absolute;
24+
top: 0;
25+
bottom: 0;
26+
width: 100%;
27+
}
28+
</style>
29+
</head>
1830

19-
#map {
20-
position: absolute;
21-
top: 0;
22-
bottom: 0;
23-
width: 100%;
24-
}
25-
</style>
26-
</head>
31+
<body>
32+
<div id="map"></div>
33+
<script type="text/javascript">
34+
var host = window.isLocal ? window.server : 'http://iclient.supermap.io';
35+
var url = host + '/iserver/services/map-china400/rest/maps/China_4214';
36+
var map = new mapboxgl.Map({
37+
container: 'map', // container id
38+
style: {
39+
version: 8,
40+
sources: {
41+
'raster-tiles': {
42+
type: 'raster',
43+
tileSize: 256,
44+
//xyz形式，原生支持
45+
//"tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
2746

28-
<body>
29-
<div id='map'></div>
30-
<script type="text/javascript">
31-
var host = window.isLocal ? window.server : "http://iclient.supermap.io";
32-
var url = host + '/iserver/services/map-china400/rest/maps/China_4214';
33-
var map = new mapboxgl.Map({
34-
container: 'map', // container id
35-
style: {
36-
"version": 8,
37-
"sources": {
38-
"raster-tiles": {
39-
"type": "raster",
40-
"tileSize": 256,
41-
//xyz形式，原生支持
42-
//"tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
47+
//iserver image资源模板；扩展支持
48+
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
4349

50+
//iserver tileimage资源模板；扩展支持
51+
//"tiles": ['http://iclient.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}'],
4452

45-
//iserver image资源模板；扩展支持
46-
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
47-
48-
49-
//iserver tileimage资源模板；扩展支持
50-
//"tiles": ['http://iclient.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}'],
51-
53+
//推荐； iserver tileimage资源；扩展支持
54+
//参数列表：
55+
//地图服务地址（到地图名)必填 ；
56+
//rasterSource为"iserver"；必填；
57+
//transparent:可选，默认为true；
58+
//cacheEnabled: 是否使用缓存，默认为true；
59+
//redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
60+
//layersID:要显示的图层id字符串；
61+
//tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
62+
//rasterfunction: 栅格分析参数,类型为SuperMap.NDVIParameter或SuperMap.HillshadeParameter；
63+
//format:瓦片格式，默认为'png'；
64+
tiles: [url],
65+
rasterSource: 'iserver'
66+
}
67+
},
5268

53-
//推荐； iserver tileimage资源；扩展支持
54-
//参数列表：地图服务地址（到地图名)必填 ； rasterSource为"iserver"；必填； transparent:可选，默认为true
55-
"tiles": [url],
56-
"rasterSource": "iserver"
57-
}
69+
layers: [
70+
{
71+
id: 'simple-tiles',
72+
type: 'raster',
73+
source: 'raster-tiles',
74+
minzoom: 0,
75+
maxzoom: 22
76+
}
77+
]
5878
},
59-
60-
"layers": [{
61-
"id": "simple-tiles",
62-
"type": "raster",
63-
"source": "raster-tiles",
64-
"minzoom": 0,
65-
"maxzoom": 22
66-
}]
67-
},
68-
crs: 'EPSG:4214',
69-
center: [101.74721254733845, 32.5665352689922],
70-
zoom: 3
71-
});
72-
map.on('load', function () {
73-
//从 iServer 查询
74-
var param = new SuperMap.QueryBySQLParameters({
75-
queryParams: {
76-
name: "China_Province_pl@China",
77-
attributeFilter: "SMID =14"
78-
}
79+
crs: 'EPSG:4214',
80+
center: [101.74721254733845, 32.5665352689922],
81+
zoom: 3
7982
});
80-
new mapboxgl.supermap.QueryService(url).queryBySQL(param, function (serviceResult) {
81-
map.addSource("queryDatas", {
82-
"type": "geojson",
83-
"data": serviceResult.result.recordsets[0].features
83+
map.on('load', function() {
84+
//从 iServer 查询
85+
var param = new SuperMap.QueryBySQLParameters({
86+
queryParams: {
87+
name: 'China_Province_pl@China',
88+
attributeFilter: 'SMID =14'
89+
}
8490
});
85-
map.addLayer({
86-
"id": "queryDatas",
87-
"type": "fill",
88-
"source": "queryDatas",
89-
"paint": {
90-
"fill-color": "#008080",
91-
"fill-opacity": 0.4
92-
},
93-
"filter": ["==", "$type", "Polygon"]
91+
new mapboxgl.supermap.QueryService(url).queryBySQL(param, function(serviceResult) {
92+
map.addSource('queryDatas', {
93+
type: 'geojson',
94+
data: serviceResult.result.recordsets[0].features
95+
});
96+
map.addLayer({
97+
id: 'queryDatas',
98+
type: 'fill',
99+
source: 'queryDatas',
100+
paint: {
101+
'fill-color': '#008080',
102+
'fill-opacity': 0.4
103+
},
104+
filter: ['==', '$type', 'Polygon']
105+
});
94106
});
107+
map.addControl(new mapboxgl.NavigationControl());
95108
});
96-
map.addControl(new mapboxgl.NavigationControl());
97-
});
98-
</script>
99-
100-
</body>
101-
102-
</html>
109+
</script>
110+
</body>
111+
</html>

‎examples/mapboxgl/01_tiledMapLayer_4326.html‎

Lines changed: 92 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -3,103 +3,107 @@
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' />
9-
<title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
10-
<script type="text/javascript" src="../js/include-web.js"></script>
11-
<script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
12-
<style>
13-
body {
14-
margin: 0;
15-
padding: 0;
16-
}
6+
<head>
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
9+
<title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
10+
<script type="text/javascript" src="../js/include-web.js"></script>
11+
<script
12+
type="text/javascript"
13+
include="mapbox-gl-enhance"
14+
src="../../dist/mapboxgl/include-mapboxgl.js"
15+
></script>
16+
<style>
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
}
1721

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

27-
<body>
28-
<div id='map'></div>
29-
<script type="text/javascript">
30-
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
31-
var map = new mapboxgl.Map({
32-
container: 'map', // container id
33-
style: {
34-
"version": 8,
35-
"sources": {
36-
"raster-tiles": {
37-
"type": "raster",
38-
"tileSize": 256,
39-
//xyz形式，原生支持
40-
//"tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
31+
<body>
32+
<div id="map"></div>
33+
<script type="text/javascript">
34+
var host = window.isLocal ? window.server : 'http://support.supermap.com.cn:8090';
35+
var map = new mapboxgl.Map({
36+
container: 'map', // container id
37+
style: {
38+
version: 8,
39+
sources: {
40+
'raster-tiles': {
41+
type: 'raster',
42+
tileSize: 256,
43+
//xyz形式，原生支持
44+
//"tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
4145

46+
//iserver image资源模板；扩展支持
47+
//"tiles": ['http://localhost:8090/iserver/services/map-World/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
4248

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

52+
//推荐； iserver tileimage资源；扩展支持
53+
//参数列表：
54+
//地图服务地址（到地图名)必填 ；
55+
//rasterSource为"iserver"；必填；
56+
//transparent:可选，默认为true；
57+
//cacheEnabled: 是否使用缓存，默认为true；
58+
//redirect: 如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流,默认为false；
59+
//layersID:要显示的图层id字符串；
60+
//tileversion: 切片版本名称，cacheEnabled 为 true 时有效；
61+
//rasterfunction: 栅格分析参数,类型为SuperMap.NDVIParameter或SuperMap.HillshadeParameter；
62+
//format:瓦片格式，默认为'png'；
63+
tiles: [host + '/iserver/services/map-world/rest/maps/World'],
64+
rasterSource: 'iserver'
65+
}
66+
},
4667

47-
//iserver tileimage资源模板；扩展支持
48-
//"tiles": ['http://iclient.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}'],
49-
50-
51-
//推荐； iserver tileimage资源；扩展支持
52-
//参数列表：地图服务地址（到地图名)必填 ； rasterSource为"iserver"；必填； transparent:可选，默认为true
53-
"tiles": [host + '/iserver/services/map-world/rest/maps/World'],
54-
"rasterSource":"iserver"
55-
56-
57-
}
68+
layers: [
69+
{
70+
id: 'simple-tiles',
71+
type: 'raster',
72+
source: 'raster-tiles',
73+
minzoom: 0,
74+
maxzoom: 22
75+
}
76+
]
5877
},
59-
60-
"layers": [{
61-
"id": "simple-tiles",
62-
"type": "raster",
63-
"source": "raster-tiles",
64-
"minzoom": 0,
65-
"maxzoom": 22
66-
}]
67-
},
68-
crs:'EPSG:4326',// 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
69-
center: [0, 0],
70-
zoom: 2
71-
});
72-
map.on('load', function () {
73-
//从 iServer 查询
74-
var idsParam = new SuperMap.GetFeaturesByIDsParameters({
75-
IDs: [247],
76-
datasetNames: ["World:Countries"]
78+
crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326 或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
79+
center: [0, 0],
80+
zoom: 2
7781
});
78-
var service = new mapboxgl.supermap.FeatureService(
79-
host + "/iserver/services/data-world/rest/data");
80-
service.getFeaturesByIDs(idsParam, function (serviceResult) {
81-
map.addSource("queryDatas", {
82-
"type": "geojson",
83-
"data": serviceResult.result.features
82+
map.on('load', function() {
83+
//从 iServer 查询
84+
var idsParam = new SuperMap.GetFeaturesByIDsParameters({
85+
IDs: [247],
86+
datasetNames: ['World:Countries']
8487
});
85-
map.addLayer({
86-
"id": "queryDatas",
87-
"type": "fill",
88-
"source": "queryDatas",
89-
"paint": {
90-
"fill-color": "#008080",
91-
"fill-opacity": 0.4
92-
},
93-
"filter": ["==", "$type", "Polygon"]
88+
var service = new mapboxgl.supermap.FeatureService(host + '/iserver/services/data-world/rest/data');
89+
service.getFeaturesByIDs(idsParam, function(serviceResult) {
90+
map.addSource('queryDatas', {
91+
type: 'geojson',
92+
data: serviceResult.result.features
93+
});
94+
map.addLayer({
95+
id: 'queryDatas',
96+
type: 'fill',
97+
source: 'queryDatas',
98+
paint: {
99+
'fill-color': '#008080',
100+
'fill-opacity': 0.4
101+
},
102+
filter: ['==', '$type', 'Polygon']
103+
});
94104
});
95-
105+
map.addControl(new mapboxgl.NavigationControl());
96106
});
97-
map.addControl(new mapboxgl.NavigationControl());
98-
});
99-
100-
101-
</script>
102-
103-
</body>
104-
107+
</script>
108+
</body>
105109
</html>

0 commit comments

Comments
 (0)