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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy