Skip to content

Commit 4f98605

Browse files
zhurczhurc
committed
mapbox gl增加gtc大会演示用例
1 parent 9d3db09 commit 4f98605

File tree

3 files changed

+121
-1
lines changed

3 files changed

+121
-1
lines changed

‎examples/mapboxgl/GTC2017.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'/>
5+
<title>GTC2017</title>
6+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
7+
<link href='http://iclient.supermapol.com/libs/gtc2017/lib/mapbox-gl.css' rel='stylesheet'/>
8+
<link href="http://iclient.supermapol.com/libs/gtc2017/lib/css-loader.css" rel="stylesheet">
9+
<link href="http://iclient.supermapol.com/libs/gtc2017/style.css" rel="stylesheet">
10+
<script type="text/javascript" src='http://iclient.supermapol.com/libs/gtc2017/lib/mapbox-gl.js'></script>
11+
<script type="text/javascript" src="http://iclient.supermapol.com/libs/gtc2017/lib/mapv.min.js"></script>
12+
<script type="text/javascript" src='http://iclient.supermapol.com/libs/gtc2017/dist/iclient9-mapboxgl.min.js'></script>
13+
<script type="text/javascript" src='http://iclient.supermapol.com/libs/gtc2017/index.js'></script>
14+
</head>
15+
<body>
16+
<div class="loader loader-curtain"></div>
17+
<div id='map'></div>
18+
<script>
19+
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
20+
var iServerUrl = "http://117.122.248.69:8090/iserver/services/map-chongqing/rest/maps/chongqing3857/tileFeature.mvt?_cache=false&returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}";
21+
22+
var buildingLayer, heightField = "floor", ratio = 15, layerId = "buildings",
23+
center = [106.575424, 29.559371];
24+
25+
var map = new mapboxgl.Map({
26+
container: 'map',
27+
style: defaultStyle(iServerUrl),
28+
pitch: 60,
29+
bearing: 290,
30+
center: center,
31+
zoom: 12
32+
});
33+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
34+
//加载进度
35+
map.on('styledata', function (evt) {
36+
showLoader();
37+
});
38+
//关闭进度
39+
map.on('render', function (evt) {
40+
evt.target.areTilesLoaded() && removeLoader();
41+
});
42+
43+
map.on('load', function () {
44+
/*绿色风格*/
45+
mapboxgl.supermap.map.setBackground("hsl(47, 26%, 88%)");
46+
mapboxgl.supermap.map.setPaintProperty('水系多边形@chongqing', 'fill-color', 'hsl(205, 56%, 73%)');
47+
mapboxgl.supermap.map.setPaintProperty('植被_多边形_R@chongqing', 'fill-color', 'hsl(82, 46%, 72%)');
48+
mapboxgl.supermap.map.setPaintProperty(['R_一级道路@chongqing', 'R_二级道路@chongqing'], 'line-color', '#fff');
49+
mapboxgl.supermap.map.setPaintProperty(['R_三级道路@chongqing', 'R_四级道路@chongqing'], 'line-color', 'hsl(0, 0%, 97%)');
50+
51+
/*切换蓝色风格*/
52+
mapboxgl.supermap.map.setBackground("#042133");
53+
mapboxgl.supermap.map.setPaintProperty(['水系多边形@chongqing', '植被_多边形_R@chongqing'], 'fill-color', '#021019');
54+
mapboxgl.supermap.map.setPaintProperty(['R_一级道路@chongqing', 'R_二级道路@chongqing'], 'line-color', '#021019');
55+
mapboxgl.supermap.map.setPaintProperty(['R_三级道路@chongqing', 'R_四级道路@chongqing'], 'line-color', '#021019');
56+
57+
/*加载三维专题图*/
58+
buildingLayer = new mapboxgl.supermap.RankTheme3DLayer(layerId, map, {
59+
// 设置分段
60+
heightField: heightField,
61+
heightStops: [[1, 15], [40, 600]],
62+
colorStops: [
63+
[0, 'rgba(33, 41, 52, 0.8)'],
64+
[10, 'rgba(69,117,180, 0.7)'],
65+
[15, 'rgba(116,173,209, 0.7)'],
66+
[20, 'rgba(171,217,233, 0.7)'],
67+
[25, 'rgba(254,224,144,0.7)'],
68+
[30, 'rgba(253,174,97,0.7)'],
69+
[35, 'rgba(244,109,67,0.8)'],
70+
[40, 'rgba(215,48,39,0.8)']
71+
],
72+
// 显示图例
73+
showLegend: true,
74+
legendTheme: 'dark',
75+
legendRatio: ratio,
76+
legendTitle: "高度"
77+
});
78+
buildingLayer.setData(buildings);
79+
addBuildingLayer(buildingLayer);
80+
81+
/*加载O-D图*/
82+
var trafficEndPointLayer = new mapboxgl.supermap.MapvLayer(map, getTrafficEndPointDataSet(trafficPoints), getTrafficEndPointOptions()).hide();
83+
var trafficTimePointLayer = new mapboxgl.supermap.MapvLayer(map, getTrafficTimePointDataSet(trafficPoints), getTrafficTimeOptions()).hide();
84+
var trafficLineLayer = new mapboxgl.supermap.MapvLayer(map, getTrafficLineDataSet(trafficPoints), {
85+
strokeStyle: 'rgba(32,228,243, 0.8)',
86+
shadowColor: 'rgba(65,105,225, 0.8)',
87+
shadowBlur: 10,
88+
lineWidth: 1,
89+
draw: 'simple'
90+
}).hide();
91+
var trafficCenterLayer = new mapboxgl.supermap.MapvLayer(map, getTrafficCenterPointDataSet(center), {
92+
fillStyle: 'rgba(192,16,26, 0.8)',
93+
shadowColor: 'rgba(192,16,26,1)',
94+
shadowBlur: 20,
95+
size: 6,
96+
draw: 'simple'
97+
}).hide();
98+
addTrafficLayers([trafficCenterLayer, trafficEndPointLayer, trafficTimePointLayer, trafficLineLayer]);
99+
100+
});
101+
</script>
102+
</body>
103+
</html>

‎examples/mapboxgl/config.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,21 @@ var exampleConfig = {
143143
}
144144
}
145145
},
146+
"GTC": {
147+
name: "GTC",
148+
content: {
149+
"GTC2017": {
150+
name: "GTC2017",
151+
content: [
152+
{
153+
name: "",
154+
thumbnail: "gtc2017.png",
155+
fileName: "GTC2017"
156+
}
157+
]
158+
}
159+
}
160+
},
146161
};
147162
/**
148163
*key值：为exampleConfig配置的key值或者fileName值
@@ -153,14 +168,16 @@ var exampleConfig = {
153168
var sideBarIconConfig = {
154169
"iServer": "fa-server",
155170
"viz": "fa-map",
171+
"GTC": "fa-globe",
156172
};
157173

158174
/**
159-
*key值：为exampleConfig配置的key值
175+
*key值：为exampleConfig配置的key值
160176
*value值：fontawesome字体icon名
161177
*与sideBarIconConfig的区别：sideBarIconConfig包括侧边栏所有层级目录的图标，exampleIconConfig仅包括一级标题的图标
162178
*/
163179
var exampleIconConfig = {
164180
"iServer": "fa-server",
165181
"viz": "fa-map",
182+
"GTC": "fa-globe",
166183
};

‎examples/mapboxgl/img/gtc2017.png‎

22.2 KB
Loading

0 commit comments

Comments
 (0)