Echarts显示全球dns server物理位置

今天YY给了我一大串dns server的ip，然后提出将这些ip物理位置显示在世界地图上（仅仅显示每个地区有几个dns server就好），苦逼了一下午，总算告一段落。把里面关键的点贴上来以后看。。。

1、地图插件用的Echarts(http://echarts.baidu.com/)

2、解析ip的物理地址用的nodejs

先上张效果图：

dns ip文件长这个样子：

 180.222.176.221
 122.231.179.214
 69.140.168.9
 124.217.245.110
 162.144.74.160
 23.94.187.47
 72.231.182.234
 76.99.144.59
 5.133.217.42
 217.15.116.80
 175.244.198.109
 179.158.154.41
 42.80.173.8
 220.120.58.209
 46.28.68.152
 199.204.250.165
 198.84.75.91
 69.249.37.227
 187.177.77.195
 122.133.187.164
 84.108.142.88
 217.129.35.190
 68.54.40.245
 93.69.100.139
 184.53.155.254
 //此处省略好多好多行

ip物理地址库和示例代码请戳：http://tool.17mon.cn/ipdb.html#userconsent#

这里我选用的nodejs版本(其实Python实现起来真心简单啊。。。可作为前端狗，先把nodejs玩顺溜再说)

ip解析：ip.js（这个主要是看里面的接口。。。会用就OK，以后有空儿了可以琢磨下实现原理）

 var fs = require('fs');
 var dns = require('dns');

 var _17monIpDbPath = './17monipdb.dat';

 var loadBinaryData = function(filepath){
     var fd = fs.openSync(filepath, 'r');
     var indexLengthBuffer = new Buffer(4);
     var chunkSize = 102400,
         chunkBuffer,
         chunks = [];

     var readLength = 0,
         bufferLength = 0;

     while (true) {
         chunkBuffer = new Buffer(chunkSize);
         readLength = fs.readSync(fd, chunkBuffer, 0, chunkSize, bufferLength);
         bufferLength += readLength;
         chunks.push(chunkBuffer);
         if (readLength < chunkSize) break;
     }
     fs.closeSync(fd);

     return Buffer.concat(chunks);
 };

 var IpFind = function(ip){
     var ipArray = ip.trim().split('.'),
         ip2long = function(ip){return new Buffer(ip.trim().split('.')).readInt32BE(0)},
         ipInt   = ip2long(ip);

     var offset = dataBuffer.readInt32BE(0);
     var indexBuffer = dataBuffer.slice(4, offset - 4 + 4);
     var tmp_offset = ipArray[0] * 4, max_comp_len = offset - 1028, index_offset = -1, index_length = -1, start = indexBuffer.slice(tmp_offset, tmp_offset + 4).readInt32LE(0);
     for (start = start * 8 + 1024; start < max_comp_len; start += 8) {
         if (indexBuffer.slice(start, start + 4).readInt32BE(0) >= ipInt) {
             index_offset = ((indexBuffer[start + 6] << 16) + (indexBuffer[start + 5] << 8) + indexBuffer[start + 4]);
             index_length = indexBuffer[start + 7];
             break;
         }
     }
     if (index_offset == -1 || index_length == -1) {
         return [];
     } else {
         return dataBuffer.slice(offset + index_offset - 1024, offset + index_offset - 1024 + index_length).toString('utf-8').split("\t");
     }
 };

 var dataBuffer = loadBinaryData(_17monIpDbPath);

 exports.find = function(name, callback){
     dns.resolve4(name, function (err, addresses) {
         if (err) {
             callback(IpFind(name));
         } else {
             callback(IpFind(addresses.shift()));
         }
     });
 };
 exports.findSync = IpFind;

这是网上的示例代码

逐行读取txt，使用ip.js里的函数，生成Echarts所要的数据格式：run.js

 var fs = require('fs');
 var IP = require('./ip');

 var _dnsserver = './dnsserver.txt';

 fs.readFile(_dnsserver,'utf-8',function(err,data){
         var dataIp = [];
         var dataArr = data.split(/\n+/);
         for(var i=0 ; i < dataArr.length-1 ; i++){
            dataIp.push(IP.findSync(dataArr[i])[0]);
         }
         var oData = countArr(dataIp);
         var jsonData = [];
         for(var attr in oData){
             var tempObj = {};
             tempObj.name = attr;
             tempObj.value = oData[attr];
             jsonData.push(tempObj);
         }
         console.log(jsonData); 
           //jsonData是我们要的数据格式，大体长这个样子
          // [ { name: '日本', value: 55 },

//   { name: '中国', value: 240 },
            //   { name: '美国', value: 489 }]

 });

 function countArr(arr){
         var o = {};
         for(var i = 0, l = arr.length; i < l; i++){
             var key = arr[i];
             if(!o[key]){
                 o[key] = 1;
             } else {
                 o[key]++;
             }
         }
         return o;
 }
 /* 异步方法 支持域名 */
 //IP.find('116.226.54.188', function(data){
  //   console.log(data);
 //});

 /* 同步方法，不支持域名,仅支持IPv4 */
 //console.log(IP.findSync('180.73.134.23'));

运行run.js，结果如下：

然后生成txt，把结果存起来，用jQuery Ajax读取，这时，坑爹的bug来了。。。

先看代码：

  $(document).ready(function(){
  $.ajax({
             type: "get",
             url: 'data.txt',//本地存的文件
             dataType: 'text',
             success: function(data) {
                 alert(data);//这个data就是文件内容了
             }
         });
 });

感觉没任何错误吧。。。IE低下也能粗结果，可是chrome里data就是没值啊没值。。。后来各种查资料才知道，chrome Ajax不能访问本地文件       （http://blog.csdn.net/spring21st/article/details/6109669），之前都是访问的server上的数据，没访问过本地的文件，没遇到过，这回真心长姿势了。。。

最后Echarts使用真心没啥好贴，不过注意下那个版本问题，有时候会粗错