33*********************************************************************-->
44<!DOCTYPE html>
55< html lang ="en ">
6+
67< head >
78 < meta charset ="UTF-8 ">
89 < title data-i18n ="resources.title_GlobalWind "> </ title >
910 < script type ="text/javascript " include ="jquery " src ="../js/include-web.js "> </ script >
1011 < script type ="text/javascript " include ="echarts,echarts-gl " src ="../../dist/mapboxgl/include-mapboxgl.js "> </ script >
1112</ head >
13+
1214< body style =" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0; ">
13- < div id ="map " style ="margin:0 auto;width: 100%;height: 100% "> </ div >
14- < script >
15- var host = window . isLocal ? window . server : "http://support.supermap.com.cn:8090" ;
16- var map ,
17- mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}" ,
18- attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
15+ < div id ="map " style ="margin:0 auto;width: 100%;height: 100% "> </ div >
16+ < script >
17+ var host = window . isLocal ? window . server : "http://support.supermap.com.cn:8090" ;
18+ var map ,
19+ mapUrl = host + "/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}" ,
20+ attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
1921 " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
2022 "Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
21- "<a href='http://echarts.baidu.com' target='_blank'>© 2017 " + resources . title_3baidu + " ECharts Echarts-gl</a>" ;
23+ "<a href='http://echarts.baidu.com' target='_blank'>© 2017 " + resources . title_3baidu +
24+ " ECharts Echarts-gl</a>" ;
2225
23- map = new mapboxgl . Map ( {
24- container : 'map' ,
25- altitudeScale : 2 ,
26- style : {
27- "version" : 8 ,
28- "sources" : {
29- "raster-tiles" : {
30- "attribution" : attribution ,
26+ map = new mapboxgl . Map ( {
27+ container : 'map' ,
28+ altitudeScale : 2 ,
29+ style : {
30+ "version" : 8 ,
31+ "sources" : {
32+ "raster-tiles" : {
33+ "attribution" : attribution ,
34+ "type" : "raster" ,
35+ "tiles" : [ mapUrl ] ,
36+ "tileSize" : 256
37+ }
38+ } ,
39+ "layers" : [ {
40+ "id" : "simple-tiles" ,
3141 "type" : "raster" ,
32- "tiles" : [ mapUrl ] ,
33- "tileSize" : 256
34- }
42+ "source" : "raster-tiles" ,
43+ } ]
3544 } ,
36- "layers" : [ {
37- "id" : "simple-tiles" ,
38- "type" : "raster" ,
39- "source" : "raster-tiles" ,
40- } ]
41- } ,
42- center : [ 0 , 0 ] ,
43- zoom : 1 ,
44- } ) ;
45- map . addControl ( new mapboxgl . NavigationControl ( ) , 'top-left' ) ;
45+ center : [ 0 , 0 ] ,
46+ zoom : 1 ,
47+ } ) ;
48+ map . addControl ( new mapboxgl . NavigationControl ( ) , 'top-left' ) ;
4649
47- map . on ( 'load' , function ( ) {
50+ map . on ( 'load' , function ( ) {
4851
49- $ . getJSON ( '../data/globalWindData.json' , function ( windData ) {
52+ $ . getJSON ( '../data/globalWindData.json' , function ( windData ) {
5053
51- var data = [ ] ;
52- var p = 0 ;
53- var maxMag = 0 ;
54- var minMag = Infinity ;
55- for ( var j = 0 ; j < windData . ny ; j ++ ) {
56- for ( var i = 0 ; i < windData . nx ; i ++ , p ++ ) {
57- var vx = windData . data [ p ] [ 0 ] ;
58- var vy = windData . data [ p ] [ 1 ] ;
59- var mag = Math . sqrt ( vx * vx + vy * vy ) ;
60- // 数据是一个一维数组
61- // [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
62- data . push ( [
63- i / windData . nx * 360 - 180 ,
64- j / windData . ny * 180 - 90 ,
65- vx ,
66- vy ,
67- mag
68- ] ) ;
69- maxMag = Math . max ( mag , maxMag ) ;
70- minMag = Math . min ( mag , minMag ) ;
54+ var data = [ ] ;
55+ var p = 0 ;
56+ var maxMag = 0 ;
57+ var minMag = Infinity ;
58+ for ( var j = 0 ; j < windData . ny ; j ++ ) {
59+ for ( var i = 0 ; i < windData . nx ; i ++ , p ++ ) {
60+ var vx = windData . data [ p ] [ 0 ] ;
61+ var vy = windData . data [ p ] [ 1 ] ;
62+ var mag = Math . sqrt ( vx * vx + vy * vy ) ;
63+ // 数据是一个一维数组
64+ // [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
65+ var y = j / windData . ny * 180 - 90 ;
66+ if ( y > 85 || y < - 85 ) {
67+ continue ;
68+ }
69+ data . push ( [
70+ i / windData . nx * 360 - 180 ,
71+ y ,
72+ vx ,
73+ vy ,
74+ mag
75+ ] ) ;
76+ maxMag = Math . max ( mag , maxMag ) ;
77+ minMag = Math . min ( mag , minMag ) ;
78+ }
7179 }
72- }
7380
74- var echartslayer = new EchartsLayer ( map ) ;
75- echartslayer . chart . setOption ( {
76- GLMap : {
77- roam : true ,
78- } ,
79- geo : {
80- map : "GLMap"
81- } ,
82- visualMap : {
83- left : 'right' ,
84- min : minMag ,
85- max : maxMag ,
86- dimension : 4 ,
87- inRange : {
88- // color: ['green', 'yellow', 'red']
89- color : [ '#313695' , '#4575b4' , '#74add1' , '#abd9e9' , '#e0f3f8' , '#ffffbf' , '#fee090' , '#fdae61' , '#f46d43' , '#d73027' , '#a50026' ]
81+ var echartslayer = new EchartsLayer ( map ) ;
82+ echartslayer . chart . setOption ( {
83+ GLMap : {
84+ roam : true ,
9085 } ,
91- realtime : false ,
92- calculable : true ,
93- textStyle : {
94- color : '#fff'
95- }
96- } ,
97- series : [ {
98- type : 'flowGL' ,
99- coordinateSystem : 'GLMap' ,
100- data : data ,
101- particleDensity : 512 ,
102- particleSpeed : 2 ,
103- particleSize : 1 ,
104- gridWidth : windData . nx ,
105- gridHeight : windData . ny ,
106- itemStyle : {
107- opacity : 0.7
108- }
109- } ]
110- } ) ;
86+ geo : {
87+ map : "GLMap"
88+ } ,
89+ visualMap : {
90+ left : 'right' ,
91+ min : minMag ,
92+ max : maxMag ,
93+ dimension : 4 ,
94+ inRange : {
95+ // color: ['green', 'yellow', 'red']
96+ color : [ '#313695' , '#4575b4' , '#74add1' , '#abd9e9' , '#e0f3f8' ,
97+ '#ffffbf' , '#fee090' , '#fdae61' , '#f46d43' , '#d73027' ,
98+ '#a50026'
99+ ]
100+ } ,
101+ realtime : false ,
102+ calculable : true ,
103+ textStyle : {
104+ color : '#fff'
105+ }
106+ } ,
107+ series : [ {
108+ type : 'flowGL' ,
109+ coordinateSystem : 'GLMap' ,
110+ data : data ,
111+ particleDensity : 512 ,
112+ particleSpeed : 2 ,
113+ particleSize : 1 ,
114+ gridWidth : windData . nx ,
115+ gridHeight : windData . ny ,
116+ itemStyle : {
117+ opacity : 0.7
118+ }
119+ } ]
120+ } ) ;
111121
122+ } ) ;
112123 } ) ;
113- } ) ;
114- </ script >
124+ </ script >
115125
116126</ body >
127+
117128</ html >
0 commit comments