Skip to content

Commit c1943a5

Browse files
wuzhuorui5wuzhuorui5
committed
增加Mapboxgl的示例 reviewBy zhurc
1 parent 1024b61 commit c1943a5

17 files changed

+1093
-19
lines changed

‎examples/mapboxgl/03_themeDotDensity.html‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
4343
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
4444

45+
4546
function createTheme() {
4647
var themeDotDensity = new SuperMap.ThemeDotDensity({
4748
dotExpression: "Pop_1994",
@@ -57,33 +58,31 @@
5758
dataSourceNames: ["World"]
5859
});
5960

60-
var themeService = new SuperMap.ThemeService(dataUrl, {
61-
serverType: SuperMap.ServerType.ISERVER,
62-
eventListeners: {
63-
processCompleted: callback,
64-
processFailed: callback
61+
var themeService = new mapboxgl.supermap.ThemeService(dataUrl);
62+
themeService.getThemeInfo(themeParameters, function (serviceResult) {
63+
var result = serviceResult.result;
64+
65+
if (result && result.newResourceID) {
66+
map.addSource("theme", {
67+
"type": 'raster',
68+
"tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&noWrap=true&layersID=' + result.newResourceID],
69+
"tileSize": 256,
70+
});
71+
72+
map.addLayer({
73+
"id": "themeLayer",
74+
"type": "raster",
75+
"source": "theme",
76+
});
6577
}
66-
});
67-
themeService.processAsync(themeParameters);
78+
})
6879
}
6980

7081
map.on('load', function () {
7182

7283
createTheme();
7384
});
7485

75-
76-
function callback(serviceResult) {
77-
78-
var result = serviceResult.result;
79-
var innerHTML = "地图地址：</br>" + JSON.stringify(result.newResourceLocation) + "<br>";
80-
new mapboxgl.Popup({closeOnClick: false})
81-
.setLngLat([-96, 37.8])
82-
.setHTML(innerHTML + "</br>")
83-
.addTo(map);
84-
}
85-
86-
8786
</script>
8887

8988
</body>

‎examples/mapboxgl/03_themeGraduatedSymbol.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>等级符号专题图</title>
6+
</head>
7+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
8+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
9+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
10+
<span id="show"></span>
11+
<script type="text/javascript">
12+
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
13+
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
14+
15+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
16+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>";
17+
18+
var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
19+
var map = new mapboxgl.Map({
20+
container: 'map',
21+
style: {
22+
"version": 8,
23+
"sources": {
24+
"raster-tiles": {
25+
"attribution": attribution,
26+
"type": "raster",
27+
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
28+
"tileSize": 256,
29+
},
30+
},
31+
"layers": [{
32+
"id": "simple-tiles",
33+
"type": "raster",
34+
"source": "raster-tiles",
35+
"minzoom": 0,
36+
"maxzoom": 22
37+
}]
38+
},
39+
center: [100, 39],
40+
zoom: 3
41+
});
42+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
43+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
44+
45+
function createTheme() {
46+
var themeGraduatedSymbol = new SuperMap.ThemeGraduatedSymbol({
47+
expression: "SMAREA",
48+
baseValue: 3000000000000,
49+
graduatedMode: SuperMap.GraduatedMode.CONSTANT,
50+
flow: new SuperMap.ThemeFlow({
51+
flowEnabled: true
52+
}),
53+
style: new SuperMap.ThemeGraduatedSymbolStyle({
54+
positiveStyle: new SuperMap.ServerStyle({
55+
markerSize: 50,
56+
markerSymbolID: 0,
57+
lineColor: new SuperMap.ServerColor(255, 165, 0),
58+
fillBackColor: new SuperMap.ServerColor(255, 0, 0)
59+
})
60+
})
61+
});
62+
63+
var themeParameters = new SuperMap.ThemeParameters({
64+
themes: [themeGraduatedSymbol],
65+
datasetNames: ["China_Province_pg"],
66+
dataSourceNames: ["China"]
67+
});
68+
69+
new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
70+
var result = serviceResult.result;
71+
if (result && result.newResourceID) {
72+
map.addSource("theme", {
73+
"type": 'raster',
74+
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
75+
"tileSize": 256,
76+
});
77+
78+
map.addLayer({
79+
"id": "themeLayer",
80+
"type": "raster",
81+
"source": "theme",
82+
});
83+
}
84+
})
85+
}
86+
87+
map.on('load', function () {
88+
89+
createTheme();
90+
});
91+
92+
</script>
93+
94+
</body>
95+
</html>

‎examples/mapboxgl/03_themeGraph.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>统计专题图</title>
6+
</head>
7+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
8+
<div id="title" style="position:absolute;top: 10px;text-align:center;width:100%;z-index: 10;color: #f7931e">
9+
全国省份2013和2014年GDP统计
10+
</div>
11+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
12+
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
13+
<span id="show"></span>
14+
<script type="text/javascript">
15+
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
16+
var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
17+
18+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
19+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " + " with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>";
20+
21+
var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
22+
var map = new mapboxgl.Map({
23+
container: 'map',
24+
style: {
25+
"version": 8,
26+
"sources": {
27+
"raster-tiles": {
28+
"attribution": attribution,
29+
"type": "raster",
30+
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?&z={z}&x={x}&y={y}'],
31+
"tileSize": 256,
32+
},
33+
},
34+
"layers": [{
35+
"id": "simple-tiles",
36+
"type": "raster",
37+
"source": "raster-tiles",
38+
"minzoom": 0,
39+
"maxzoom": 22
40+
}]
41+
},
42+
center: [104, 38],
43+
zoom: 3.55
44+
});
45+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
46+
map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
47+
48+
function createTheme() {
49+
themeGraph = new SuperMap.ThemeGraph({
50+
items: [
51+
new SuperMap.ThemeGraphItem({
52+
caption: "全国省份2013_GDP",
53+
graphExpression: "GDP_2013",
54+
uniformStyle: new SuperMap.ServerStyle({
55+
fillForeColor: new SuperMap.ServerColor(255, 215, 0),
56+
lineWidth: 0
57+
})
58+
}),
59+
new SuperMap.ThemeGraphItem({
60+
caption: "全国省份2014_GDP",
61+
graphExpression: "GDP_2014",
62+
uniformStyle: new SuperMap.ServerStyle({
63+
fillForeColor: new SuperMap.ServerColor(0, 191, 255),
64+
lineWidth: 0
65+
})
66+
}),
67+
],
68+
barWidth: 0.001,
69+
graduatedMode: SuperMap.GraduatedMode.CONSTANT,
70+
graphAxes: new SuperMap.ThemeGraphAxes({
71+
axesDisplayed: true
72+
}),
73+
graphSize: new SuperMap.ThemeGraphSize({
74+
maxGraphSize: 500000,
75+
minGraphSize: 200000
76+
}),
77+
graphText: new SuperMap.ThemeGraphText({
78+
graphTextDisplayed: true,
79+
graphTextFormat: SuperMap.ThemeGraphTextFormat.VALUE,
80+
graphTextStyle: new SuperMap.ServerTextStyle({
81+
fontHeight: 10,
82+
fontWidth: 10
83+
})
84+
}),
85+
overlapAvoided: false,
86+
graphSizeFixed: false,
87+
graphType: SuperMap.ThemeGraphType.BAR
88+
});
89+
themeParameters = new SuperMap.ThemeParameters({
90+
themes: [themeGraph],
91+
datasetNames: ["China_Province_pg"],
92+
dataSourceNames: ["China"]
93+
94+
});
95+
96+
new mapboxgl.supermap.ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
97+
var result = serviceResult.result;
98+
if (result && result.newResourceID) {
99+
map.addSource("theme", {
100+
"type": 'raster',
101+
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
102+
"tileSize": 256,
103+
});
104+
105+
map.addLayer({
106+
"id": "themeLayer",
107+
"type": "raster",
108+
"source": "theme",
109+
});
110+
}
111+
})
112+
}
113+
114+
map.on('load', function () {
115+
116+
createTheme();
117+
});
118+
119+
</script>
120+
121+
</body>
122+
</html>

0 commit comments

Comments
 (0)