@@ -30,15 +30,12 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
30
30
< div id ="map " style ="margin:0 auto;width: 100%;height: 100% "> </ div >
31
31
< script type ="text/javascript " exclude ="iclient-classic " include ="Bar3D " src ="../../dist/include-classic.js "> </ script >
32
32
< script type ="text/javascript " include ="bootstrap,widgets.alert " src ="../js/include-web.js "> </ script >
33
+
33
34
< script src ='../data/chinaConsumptionLevel.js '> </ script >
34
35
< script type ="text/javascript ">
35
- var map , layer , themeLayer ;
36
+ var map , layer , themeLayer , infowin , infowinPosition ;
36
37
var host = window . isLocal ? window . server : "http://117.122.248.69:8090" ,
37
38
url = host + "/iserver/services/map-china400/rest/maps/China_4326" ;
38
- // 信息框 div
39
- var infoDom = document . createElement ( "div" ) ;
40
- infoDom . style . position = "absolute" ;
41
- infoDom . id = "infowin" ;
42
39
43
40
// 统计图模块要求浏览器支持 Canvas 渲染
44
41
if ( ! document . createElement ( 'canvas' ) . getContext ) {
@@ -141,6 +138,16 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
141
138
closeInfoWin ( ) ;
142
139
}
143
140
141
+ // 注册地图 mousemove,用于获取当前鼠标在地图中的像素位置
142
+ map . events . on ( {
143
+ "mousemove" : function ( e ) {
144
+ infowinPosition = e . xy . clone ( ) ;
145
+ // 偏移
146
+ infowinPosition . x += 40 ;
147
+ infowinPosition . y -= 25 ;
148
+ }
149
+ } ) ;
150
+
144
151
// 显示地图弹窗
145
152
function showInfoWin ( e ) {
146
153
// e.target 是图形对象,即数据的可视化对象,三维柱状图中是指三维柱条;
@@ -154,8 +161,8 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
154
161
var info = e . target . dataInfo ;
155
162
156
163
// 弹窗内容
157
- var contentHTML = "<div style='padding: 2px; color: #000; background-color: #d1eeee'; '>" ;
158
- contentHTML += "<strong>" + fea . attributes . NAME + "</strong>" ;
164
+ var contentHTML = "<div style='color: #000; background-color: #fff '>" ;
165
+ contentHTML += "省级行政区名称:<br> <strong>" + fea . attributes . NAME + "</strong>" ;
159
166
160
167
contentHTML += "<hr style='margin: 3px'>" ;
161
168
switch ( info . field ) {
@@ -179,29 +186,38 @@ <h5 class='panel-title text-center'>三维柱状图</h5>
179
186
}
180
187
contentHTML += "</div>" ;
181
188
182
- infoDom . style . left = e . event . clientX + 40 + "px" ;
183
- infoDom . style . top = e . event . clientY - 25 + "px" ;
184
- infoDom . innerHTML = contentHTML ;
185
- document . body . appendChild ( infoDom ) ;
189
+ // 弹出框大小
190
+ var infowinSize = ( SuperMap . Browser . name == "firefox" ) ? new SuperMap . Size ( 150 , 105 ) : new SuperMap . Size ( 140 , 90 ) ;
191
+
192
+ // 弹出窗地理位置
193
+ var lonLat = map . getLonLatFromPixel ( infowinPosition ) ;
194
+ infowin = new SuperMap . Popup (
195
+ "infowin" ,
196
+ lonLat ,
197
+ infowinSize ,
198
+ contentHTML ,
199
+ false ,
200
+ false ,
201
+ null ) ;
202
+ infowin . setBackgroundColor ( "#fff" ) ;
203
+ infowin . setOpacity ( 0.8 ) ;
204
+ if ( infowin ) map . removePopup ( infowin ) ;
205
+ map . addPopup ( infowin ) ;
186
206
}
187
207
}
188
208
189
- // 移除信息窗 div
209
+ // 移除和销毁地图弹窗
190
210
function closeInfoWin ( ) {
191
- // infoDom 是否是 body 的子节点
192
- if ( isFatcher ( document . body , infoDom ) ) {
193
- document . body . removeChild ( infoDom ) ;
194
- }
195
- }
196
- // 判断父节点
197
- function isFatcher ( p , c ) {
198
- while ( c . parentNode ) {
199
- c = c . parentNode ;
200
- if ( c == p )
201
- return true ;
211
+ if ( infowin ) {
212
+ try {
213
+ map . removePopup ( infowin ) ;
214
+ }
215
+ catch ( e ) {
216
+ widgets . alert . showAlert ( e . message , false ) ;
217
+ }
202
218
}
203
- return false ;
204
219
}
220
+
205
221
</ script >
206
222
</ body >
207
223
</ html >
0 commit comments