Skip to content

Commit a02916f

Browse files
tangqinGisertangqinGiser
committed
新增echarts全球风能图示例，fix echartsGL示例漏掉的控件。review by caoxinke.
1 parent c9d9d83 commit a02916f

File tree

5 files changed

+124
-8
lines changed

5 files changed

+124
-8
lines changed

‎examples/mapboxgl/config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,12 @@ var exampleConfig = {
368368
name_en: "cell map",
369369
thumbnail: "echarts_cellMap.png",
370370
fileName: "echarts_cellMap"
371+
},
372+
{
373+
name: "全球风能可视化",
374+
name_en: "Global wind visualization",
375+
thumbnail: "echartsGL_GlobalWind.gif",
376+
fileName: "echartsGL_GlobalWind"
371377
}
372378
]
373379
},

‎examples/mapboxgl/echartsGL_GlobalWind.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>全球风能可视化</title>
6+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
7+
<script type="text/javascript" include="echarts,echarts-gl" src="../../dist/include-mapboxgl.js"></script>
8+
</head>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
10+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
11+
<script>
12+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
13+
var map,
14+
mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}",
15+
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> " +
17+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
18+
map = new mapboxgl.Map({
19+
container: 'map',
20+
altitudeScale: 2,
21+
style: {
22+
"version": 8,
23+
"sources": {
24+
"raster-tiles": {
25+
"attribution": attribution,
26+
"type": "raster",
27+
"tiles": [mapUrl],
28+
"tileSize": 256
29+
}
30+
},
31+
"layers": [{
32+
"id": "simple-tiles",
33+
"type": "raster",
34+
"source": "raster-tiles",
35+
}]
36+
},
37+
center: [0, 0],
38+
zoom: 1,
39+
});
40+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
41+
42+
map.on('load', function () {
43+
44+
$.getJSON('../data/globalWindData.json', function (windData) {
45+
46+
var data = [];
47+
var p = 0;
48+
var maxMag = 0;
49+
var minMag = Infinity;
50+
for (var j = 0; j < windData.ny; j++) {
51+
for (var i = 0; i < windData.nx; i++, p++) {
52+
var vx = windData.data[p][0];
53+
var vy = windData.data[p][1];
54+
var mag = Math.sqrt(vx * vx + vy * vy);
55+
// 数据是一个一维数组
56+
// [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
57+
data.push([
58+
i / windData.nx * 360 - 180,
59+
j / windData.ny * 180 - 90,
60+
vx,
61+
vy,
62+
mag
63+
]);
64+
maxMag = Math.max(mag, maxMag);
65+
minMag = Math.min(mag, minMag);
66+
}
67+
}
68+
69+
var echartslayer = new EchartsLayer(map);
70+
echartslayer.chart.setOption({
71+
GLMap: {
72+
roam: true,
73+
},
74+
geo: {
75+
map: "GLMap"
76+
},
77+
visualMap: {
78+
left: 'right',
79+
min: minMag,
80+
max: maxMag,
81+
dimension: 4,
82+
inRange: {
83+
// color: ['green', 'yellow', 'red']
84+
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
85+
},
86+
realtime: false,
87+
calculable: true,
88+
textStyle: {
89+
color: '#fff'
90+
}
91+
},
92+
series: [{
93+
type: 'flowGL',
94+
coordinateSystem: 'GLMap',
95+
data: data,
96+
particleDensity: 512,
97+
particleSpeed: 2,
98+
particleSize: 1,
99+
gridWidth: windData.nx,
100+
gridHeight: windData.ny,
101+
itemStyle: {
102+
opacity: 0.7
103+
}
104+
}]
105+
});
106+
107+
});
108+
});
109+
</script>
110+
111+
</body>
112+
</html>

‎examples/mapboxgl/echartsGL_colorfulCity.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>五彩城市建筑</title>
6-
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
6+
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
77
<script type="text/javascript" include="echarts,echarts-gl" src="../../dist/include-mapboxgl.js"></script>
88
</head>
99
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
@@ -13,16 +13,12 @@
1313
var map, myChart,
1414
mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}",
1515
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> " +
17-
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
16+
"| Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>" + "| <a href='http://echarts.baidu.com' target='_blank'>© 2017 百度 ECharts Echarts-gl</a>";
1817

1918
myChart = echarts.init(document.getElementById("map"));
2019
myChart.showLoading();
21-
2220
$.getJSON('../data/colorfulCityData.json', function (buildingsGeoJSON) {
2321

24-
// echarts.parseGeoJSON = echarts.parseGeoJson;
25-
2622
echarts.registerMap('buildings', buildingsGeoJSON);
2723

2824
myChart.hideLoading();
@@ -116,6 +112,8 @@
116112
}
117113
}]
118114
});
115+
116+
myChart.getModel().getComponent('mapbox').getMapbox().addControl(new mapboxgl.NavigationControl(), 'top-left');
119117
});
120118
</script>
121119

‎examples/mapboxgl/echartsGL_taxiTrajectoryMap.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -426,8 +426,7 @@
426426
}
427427
taxiRoutes.push({
428428
coords: lnglats,
429-
lineStyle: {
430-
}
429+
lineStyle: {}
431430
})
432431
}
433432
myChart.setOption({
@@ -510,6 +509,7 @@
510509
}
511510
}]
512511
});
512+
myChart.getModel().getComponent('mapbox').getMapbox().addControl(new mapboxgl.NavigationControl(), 'top-left');
513513

514514
</script>
515515

‎examples/mapboxgl/img/echartsGL_GlobalWind.gif‎

986 KB
Loading

0 commit comments

Comments
 (0)