1+ <!--********************************************************************
2+ * Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
3+ *********************************************************************-->
4+ <!DOCTYPE html>
5+ < html lang ="en-US ">
6+
7+ < head >
8+ < meta charset ="UTF-8 ">
9+ < title data-i18n ='resources.title_chart '> </ title >
10+ < script type ="text/javascript " include ="bootstrap " src ="../js/include-web.js "> </ script >
11+ < script type ="text/javascript " include ="iclient9-leaflet-css,echarts " src ="../../dist/leaflet/include-leaflet.js "> </ script >
12+
13+ < style >
14+ .chart-setting {
15+ position : absolute;
16+ top : 10px ;
17+ right : 10px ;
18+ width : 450px ;
19+ height : 50px ;
20+ z-index : 800 ;
21+ background-color : # fff
22+ }
23+
24+ .chart-type-btn {
25+ position : absolute;
26+ top : 8px ;
27+ right : 20px ;
28+ width : 112px ;
29+ height : 36px ;
30+ float : right;
31+ z-index : 800 ;
32+ }
33+
34+ .chart-setting .input-group {
35+ left : 16px ;
36+ top : 8px ;
37+ width : 260px ;
38+ }
39+
40+ .graph {
41+ margin : 5px ;
42+ width : 26px ;
43+ height : 26px ;
44+ border : none;
45+ border-radius : 4px ;
46+ background-size : 100% ;
47+ outline : none;
48+ }
49+
50+ button {
51+ float : right;
52+ }
53+
54+ # bar {
55+ background-image : url ("../img/bar.png" );
56+ }
57+
58+ # line {
59+ background-image : url ("../img/ling.png" );
60+ }
61+
62+ # scatter {
63+ background-image : url ("../img/scatter.png" );
64+ }
65+
66+ # chart {
67+ position : absolute;
68+ top : 60px ;
69+ right : 10px ;
70+ width : 450px ;
71+ height : 350px ;
72+ z-index : 800 ;
73+ }
74+ </ style >
75+ </ head >
76+
77+ < body style =" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0; ">
78+ < div id ="map " style ="margin:0 auto;width: 100%;height: 100% "> </ div >
79+ < div class ="chart-setting "> </ div >
80+ < div id ="chart "> </ div >
81+ < script >
82+ init ( ) ;
83+ function init ( ) {
84+ let container = document . getElementsByClassName ( "chart-setting" ) [ 0 ] ;
85+ container . innerHTML = "<div class='input-group'><span class='input-group-addon'>"
86+ + resources . text_dataset + "</span>"
87+ + "<select class='form-control' id='rule' name='rule'>"
88+ + "<option value='/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R' selected>Landuse_R@Jingjin</option>"
89+ + "<option value='/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/BaseMap_P'>BaseMap_P@Jingjin</option>"
90+ + "<option value='/iserver/services/map-world/rest/maps/World/layers/Rivers@World@@World'>Rivers@World</option>"
91+ + "</select></div>"
92+ + "<div class='chart-type-btn'>"
93+ + "<button type='button' class='btn btn-default graph' id='scatter' title='" + resources . title_Scatter + "'></button>"
94+ + "<button type='button' class='btn btn-default graph' id='line' title='" + resources . title_GraphLine + "'></button>"
95+ + "<button type='button' class='btn btn-default graph active' id='bar' title='" + resources . title_GraphBar + "''></button></div>"
96+ }
97+
98+ var host = window . isLocal ? window . server : "http://support.supermap.com.cn:8090" ;
99+ var map , resultLayer , url = host + "/iserver/services/map-world/rest/maps/World" ;
100+ //加载底图
101+ map = L . map ( 'map' , {
102+ crs : L . CRS . EPSG4326 ,
103+ center : [ 40 , 118 ] ,
104+ maxZoom : 18 ,
105+ zoom : 6
106+ } ) ;
107+ L . supermap . tiledMapLayer ( url ) . addTo ( map ) ;
108+ //图表微件
109+ let options = {
110+ type : 'bar' ,
111+ datasets : {
112+ url : host + "/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R" ,
113+ queryInfo : {
114+ attributeFilter : "SmID > 0"
115+ }
116+ } ,
117+ chartOptions : [ {
118+ xAxis : {
119+ field : "LANDTYPE" ,
120+ name : "type"
121+ } ,
122+ yAxis : {
123+ field : "AREA" ,
124+ name : "Area"
125+ }
126+ } ]
127+ }
128+ let barChart = new SuperMap . Widgets . Chart ( "chart" , options ) ;
129+ //加载图表之后，将要素添加到地图上
130+ barChart . onAdd ( addDataToMap ) ;
131+ function addDataToMap ( ) {
132+ let features = barChart . getFeatures ( ) ;
133+ resultLayer = L . geoJSON ( features ) . addTo ( map ) ;
134+ }
135+
136+ //为图表类型按钮绑定事件
137+ bindEvent ( ) ;
138+ function bindEvent ( ) {
139+ $ ( ".graph" ) . on ( "click" , function ( ) {
140+ $ ( ".graph" ) . removeClass ( "active" ) ;
141+ } ) ;
142+
143+ $ ( "#bar" ) . on ( "click" , function ( ) {
144+ $ ( "#bar" ) . addClass ( "active" ) ;
145+ barChart . changeType ( 'bar' ) ;
146+ } ) ;
147+ $ ( "#line" ) . on ( "click" , function ( ) {
148+ $ ( "#line" ) . addClass ( "active" ) ;
149+ barChart . changeType ( 'line' ) ;
150+ } ) ;
151+ $ ( "#scatter" ) . on ( "click" , function ( ) {
152+ $ ( "#scatter" ) . addClass ( "active" ) ;
153+ barChart . changeType ( 'scatter' ) ;
154+ } ) ;
155+ }
156+ //切换数据集
157+ $ ( "#rule" ) . change ( function ( ) {
158+ var selectedIndex = ( $ ( this ) . get ( 0 ) . selectedIndex ) ;
159+ var rule = $ ( this ) . val ( ) ;
160+ var url = host + rule ;
161+ var chartOption ;
162+ map . removeLayer ( resultLayer ) ;
163+ if ( selectedIndex === 0 ) {
164+ chartOption = [ {
165+ xAxis : {
166+ field : "LANDTYPE" ,
167+ name : "type"
168+ } ,
169+ yAxis : {
170+ field : "AREA" ,
171+ name : "Area"
172+ }
173+ } ]
174+ } else if ( selectedIndex === 1 ) {
175+ chartOption = [ {
176+ xAxis : {
177+ field : "ADCLASS" ,
178+ name : "class"
179+ }
180+ } ] ;
181+ } else if ( selectedIndex === 2 ) {
182+ chartOption = [ {
183+ xAxis : {
184+ field : "NAME" ,
185+ name : "name"
186+ } ,
187+ yAxis : {
188+ field : "KILOMETERS" ,
189+ name : "Kilometers"
190+ }
191+ } ] ;
192+ }
193+ barChart . updateData ( url , null , chartOption ) ;
194+ } ) ;
195+ </ script >
196+ </ body >
197+ </ html >
0 commit comments