1- <!DOCTYPE html>
2- < html xmlns ="http://www.w3.org/1999/xhtml ">
3-
1+ <!DOCTYPE html>
2+ < html xmlns ="http://www.w3.org/1999/xhtml ">
43 < head >
54 < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 " />
65 < title > 客户端等级符号专题图</ title >
7- <!--引入当前页面样式表-->
8- < link href ="./style.css " rel ="stylesheet " type ="text/css " />
6+ <!--引入当前页面样式表-->
7+ < link href ="./style.css " rel ="stylesheet " type ="text/css " />
98 < script src ="./static/libs/include-mapboxgl-local.js "> </ script >
109 < style >
1110 body {
1413 </ style >
1514 < script type ="text/javascript ">
1615 //使用严格模式
17- " use strict" ;
16+ ' use strict' ;
1817 //定义地图文档图层和地图、专题图图层
1918 var mapDocLayer , map , themeLayer ;
2019 var { protocol, ip, port } = window . webclient ;
2524 /** 初始化地图显示*/
2625 function init ( ) {
2726 //地图容器
28- map = L . map ( 'leaf_map' , {
29- //地图渲染在canvas上
30- preferCanvas : true ,
31- //不添加属性说明控件
32- attributionControl : false ,
33- //添加缩放控件
34- zoomControl : true ,
35- //投影坐标系
36- crs : L . CRS . EPSG4326 ,
37- //最大级数
38- maxZoom : 15 ,
39- //最小级数
40- minZoom : 0
41- } ) . setView ( [ ( 29.0125822276524 + 33.2932017737021 ) / 2 , ( 108.34341 + 116.150939561213 )
42- / 2 ] , 6 ) ;
43- //创建地图文档图层
44- mapDocLayer = new Zondy . Map . MapDocLayer ( docName , {
45- //IP地址
46- ip : ip ,
47- //端口号
48- port : port ,
49- //只显示一个图层,不平铺显示
50- noWrap : true
51- } ) . addTo ( map ) ;
27+ //地图容器
28+ map = new window . mapboxgl . Map ( {
29+ container : 'map' ,
30+ minZoom : 3 ,
31+ center : [ 112.247175 , 31.152892 ] ,
32+ style : { version : 8 , sources : { } , layers : [ ] }
33+ } ) ;
34+
35+ function appendMapDoc ( ) {
36+ if ( map != null ) {
37+ var docLayer = new mapboxgl . Zondy . Map . MapDocLayer ( docName , {
38+ //IP地址
39+ ip : ip ,
40+ //端口号
41+ port : port ,
42+ //只显示一个图层,不平铺显示
43+ noWrap : true
44+ } ) ;
45+ docLayer . addToMap ( map ) ;
46+ }
47+ }
48+ map . on ( 'load' , function ( ) {
49+ appendMapDoc ( ) ;
50+ } ) ;
5251 }
5352
5453 /** 添加专题图*/
6867 queryStruct . IncludeWebGraphic = false ;
6968 //实例化查询参数对象
7069 var queryParam = new Zondy . Service . QueryParameter ( {
71- resultFormat : " json" ,
70+ resultFormat : ' json' ,
7271 struct : queryStruct
7372 } ) ;
7473 //设置查询分页号
8988 /** 生成专题图*/
9089 function gradeQuerySuccess ( data ) {
9190 if ( data != null ) {
92- themeLayer =
93- Zondy . Map . rankSymbolThemeLayer ( "ThemeLayer" , 'Circle' , { calGravity : true } ) ;
94- themeLayer . themeField = "GDP2016" ;
91+ themeLayer = Zondy . Map . rankSymbolThemeLayer ( 'ThemeLayer' , 'Circle' , { calGravity : true } ) ;
92+ themeLayer . themeField = 'GDP2016' ;
9593 // 配置图表参数
9694 themeLayer . symbolSetting = {
9795 //允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
103101 // 圆形样式
104102 circleStyle : { fillOpacity : 0.8 } ,
105103 // 符号专题图填充颜色
106- fillColor : " #00FF7F" ,
104+ fillColor : ' #00FF7F' ,
107105 // 专题图hover 样式
108106 circleHoverStyle : {
109107 fillOpacity : 1 ,
114112 } ;
115113 map . addLayer ( themeLayer ) ;
116114 themeLayer . on ( 'mousemove' , showInfoWin ) ;
117- themeLayer . on ( " mouseout" , closeInfoWin ) ;
115+ themeLayer . on ( ' mouseout' , closeInfoWin ) ;
118116 themeLayer . addFeatures ( data ) ;
119117 }
120118 stopPressBar ( ) ;
142140 var info = e . target . dataInfo ;
143141 // 弹窗内容
144142 var contentHTML = "<div style='color: #000; background-color: #fff'>" ;
145- contentHTML += " 行政区：" + " <br><strong>" + fea . attributes [ 'NAME' ] + " </strong>" ;
143+ contentHTML += ' 行政区：' + ' <br><strong>' + fea . attributes [ 'NAME' ] + ' </strong>' ;
146144
147145 contentHTML += "<hr style='margin: 3px'>" ;
148- contentHTML += " GDP2016： <br/><strong>" + info . value + " </strong>(亿元)" ;
149- contentHTML += " </div>" ;
146+ contentHTML += ' GDP2016： <br/><strong>' + info . value + ' </strong>(亿元)' ;
147+ contentHTML += ' </div>' ;
150148
151149 var tempPoint = map . mouseEventToLatLng ( e . event ) ;
152- popup = L . tooltip ( { direction : 'top' } )
153- . setContent ( contentHTML )
154- . setLatLng ( [ tempPoint . lat , tempPoint . lng ] )
155- . addTo ( map ) ;
150+ popup = L . tooltip ( { direction : 'top' } ) . setContent ( contentHTML ) . setLatLng ( [ tempPoint . lat , tempPoint . lng ] ) . addTo ( map ) ;
156151 return ;
157152 }
158153 }
166161
167162 /** 开始进度条动画*/
168163 function startPressBar ( ) {
169- document . getElementById ( 'preview' ) . style . display = "" ;
164+ document . getElementById ( 'preview' ) . style . display = '' ;
170165 }
171166
172167 /** 停止进度条动画*/
173168 function stopPressBar ( ) {
174- document . getElementById ( 'preview' ) . style . display = " none" ;
169+ document . getElementById ( 'preview' ) . style . display = ' none' ;
175170 }
176171 </ script >
177172 </ head >
178173
179174 < body onload ="init(); ">
180175 < div id ="preview " style ="display: none; text-align: center; padding-top: 250px; font-weight: bold ">
181- < img src ="./static/assets/graphic-image/39-1.gif " alt ='' /> < br />
176+ < img src ="./static/assets/graphic-image/39-1.gif " alt ="" /> < br />
182177 < br />
183178 < span > 正在操作，请稍候</ span >
184179 </ div >
185180 < div class ="ToolLib ">
186181 < input type ="button " class ="ButtonLib " id ="createThemeBtn " value ="添加专题图 " onclick ="createThemeBtn() " />
187182 < input type ="button " class ="ButtonLib " id ="deleteThemeBtn " value ="删除专题图 " onclick ="deleteTheme() " />
188183 </ div >
189- < div id ="leaf_map " style ="width: 100%; height:95%; ">
190- </ div >
184+ < div id ="map " style ="width: 100%; height: 95%; position: absolute; top: 34px; background-color: #d8d4d4 "> </ div >
191185 </ body >
192-
193- </ html >
186+ </ html >
0 commit comments