如何使用highmaps制作中国地图

http://www.cnblogs.com/Impulse/p/4995717.html

http://runjs.cn/detail/ovymune9

http://runjs.cn/code/ovymune9

 1 <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
 2 <script src="http://code.highcharts.com/highcharts.js"></script>
 3 <script src="http://code.highcharts.com/maps/modules/map.js"></script>
 4 <!--<script src="http://code.highcharts.com/maps/highmaps.js"></script>-->
 5 <script src="http://code.highcharts.com/maps/modules/data.js"></script>
 6 <script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>
 7 
 8 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/228/zroo4bdf/cn-china-by-peng8.js"></script>
 9 
10 <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
11 
12 
13 <div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
  1 $(function () {
  2 
  3     Highcharts.setOptions({
  4         lang:{
  5             drillUpText:"返回 > {series.name}"
  6         }
  7     });
  8 
  9     var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#container').width() < 400;
 10 
 11     // 给城市设置随机数据
 12     $.each(data, function (i) {
 13         this.drilldown = this.properties['drill-key'];
 14          
 15         this.value = i;
 16     });
 17         function getPoint(e){
 18             console.log(e.point.name);
 19         }
 20     function getShow(e){
 21         alert(1);
 22     }
 23     //初始化地图
 24     $('#container').highcharts('Map', {
 25 
 26         chart : {
 27                     spacingBottom:30,
 28                  
 29             events: {
 30                 drilldown: function (e) {
 31 
 32                     if (!e.seriesOptions) {
 33                         var chart = this;
 34                               /*   mapKey = 'countries/china/' + e.point.drilldown + '-all',
 35                               fail = setTimeout(function () {
 36                                     if (!Highcharts.maps[mapKey]) {
 37                                         chart.showLoading('<i class="icon-frown"></i> 加载失败 ' + e.point.name);
 38 
 39                                         fail = setTimeout(function () {
 40                                             chart.hideLoading();
 41                                         }, 1000);
 42                                     }
 43                                 }, 10000);*/
 44                         var cname=e.point.properties["cn-name"];
 45                         chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
 46                         // 加载城市数据
 47                         $.ajax({
 48                             type: "GET",
 49                             url: "http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json",
 50                             contentType: "application/json; charset=utf-8",
 51                             dataType:'jsonp',
 52                             crossDomain: true,
 53                             success: function(json) {
 54                                 data = Highcharts.geojson(json);
 55                                                              
 56                                 $.each(data, function (i) {
 57                                                                          
 58                                     this.value = i;
 59                                                                         this.events={};
 60                                                                         this.events.click=getPoint;
 61                                                                         
 62                                 });
 63                                 chart.hideLoading();
 64 
 65                                 chart.addSeriesAsDrilldown(e.point, {
 66                                     name: e.point.name,
 67                                     data: data,
 68                                                                         events:{
 69                                                                             show:function(){
 70                                                                                 alert(1);
 71                                                                             }
 72                                                                         },
 73                                     dataLabels: {
 74                                         enabled: true,
 75                                         format: '{point.name}'
 76                                     }
 77                                 });
 78                             },
 79                             error: function (XMLHttpRequest, textStatus, errorThrown) {
 80 
 81                             }
 82                         });
 83                     }
 84 
 85 
 86                     this.setTitle(null, { text: cname });
 87                 },
 88                 drillup: function () {
 89                     this.setTitle(null, { text: '中国' });
 90                 }
 91             }
 92         },
 93             tooltip: { 
 94                 formatter:function(){
 95                     var htm="你为什么这么犀利？<br/>";
 96                      
 97                     if(this.point.drilldown){
 98                         htm+=this.point.properties["cn-name"];
 99                     }else{
100                          htm+=this.point.name;
101                     }
102                     htm+=":"+this.point.value;
103                      return htm;
104                      
105                 }
106                     },
107         credits:{
108                     href:"javascript:goHome()",
109             text:"www.peng8.net"
110         },
111         title : {
112             text : 'highmap中国地图By peng8'
113         },
114 
115         subtitle: {
116             text: '中国',
117             floating: true,
118             align: 'right',
119             y: 50,
120             style: {
121                 fontSize: '16px'
122             }
123         },
124 
125         legend: small ? {} : {
126                      // enabled: false,
127             layout: 'vertical',
128             align: 'right',
129             verticalAlign: 'middle'
130         },
131         //tooltip:{
132         //pointFormat:"{point.properties.cn-name}:{point.value}"
133         //},
134         colorAxis: {
135             min: 0,
136             minColor: '#E6E7E8',
137             maxColor: '#005645',
138                     labels:{
139                         style:{
140                                 "color":"red","fontWeight":"bold"
141                         }
142                     }
143         },
144 
145         mapNavigation: {
146             enabled: true,
147             buttonOptions: {
148                 verticalAlign: 'bottom'
149             }
150         },
151 
152         plotOptions: {
153             map: {
154                 states: {
155                     hover: {
156                         color: '#EEDD66'
157                     }
158                 }
159             }
160         },
161 
162         series : [{
163             data : data,
164             name: '中国',
165             dataLabels: {
166                 enabled: true,
167                 format: '{point.properties.cn-name}'
168             }
169         }],
170 
171         drilldown: {
172                     
173             activeDataLabelStyle: {
174                 color: '#FFFFFF',
175                 textDecoration: 'none',
176                 textShadow: '0 0 3px #000000'
177             },
178             drillUpButton: {
179                 relativeTo: 'spacingBox',
180                 position: {
181                     x: 0,
182                     y: 60
183                 }
184             }
185         }
186     });
187 });
188 
189 var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";  
190 var base64DecodeChars = new Array(  
191     -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  
192     -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  
193     -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,  
194     52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,  
195     -1,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14,  
196     15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,  
197     -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,  
198     41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);  
199 
200 
201 function base64decode(str) {  
202     var c1, c2, c3, c4;  
203     var i, len, out;  
204   
205     len = str.length;  
206     i = 0;  
207     out = "";  
208     while(i < len) {  
209     /* c1 */  
210     do {  
211         c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];  
212     } while(i < len && c1 == -1);  
213     if(c1 == -1)  
214         break;  
215   
216     /* c2 */  
217     do {  
218         c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];  
219     } while(i < len && c2 == -1);  
220     if(c2 == -1)  
221         break;  
222   
223     out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));  
224   
225     /* c3 */  
226     do {  
227         c3 = str.charCodeAt(i++) & 0xff;  
228         if(c3 == 61)  
229         return out;  
230         c3 = base64DecodeChars[c3];  
231     } while(i < len && c3 == -1);  
232     if(c3 == -1)  
233         break;  
234   
235     out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));  
236   
237     /* c4 */  
238     do {  
239         c4 = str.charCodeAt(i++) & 0xff;  
240         if(c4 == 61)  
241         return out;  
242         c4 = base64DecodeChars[c4];  
243     } while(i < len && c4 == -1);  
244     if(c4 == -1)  
245         break;  
246     out += String.fromCharCode(((c3 & 0x03) << 6) | c4);  
247     }  
248     return out;  
249 }  
250 function goHome(){
251     window.open("http://www.peng8.net/");
252 }
253 function getGithub()
254     {
255         $.getJSON("https://api.github.com/repos/peng8/GeoMap/contents/json/bei_jing.geo.json", function(data){
256         console.log(base64decode(data.content));
257 });
258         
259     }

 

posted on 2017-03-28 17:59  技术V类  阅读(2497)  评论(0)    收藏  举报

导航