數據說話，88000條數據繪制北京市地圖

偶獲得一批數據，本着好玩的態度繪制下來看看到底是什么鬼，繪制的結果如下：

呵呵，什么都不像。而且中間最重要的部分因數據量過大繪制的已經看不清楚了。於是乎，縮小繪制范圍，去除周圍沒有用的數據。重新繪制結果如下：

呵呵，北京市地圖。有點像，大家可以唱五環之歌了。。。

再來一張只有邊沒有點的，會清晰一點。

嗯。。。不錯。。。

繪制代碼如下：

var xhrNode = new XMLHttpRequest();
xhrNode.onreadystatechange = function() {
    if(xhrNode.readyState == 4) {
        if((xhrNode.status >= 200 && xhrNode.status < 300) || xhrNode.status == 304) {
            drawNode(xhrNode.responseText);
        }
        else {
            alert('hehe');
        }
    }
}
xhrNode.open("get",'ReadFile.php',false);
xhrNode.send(null);

function drawNode(paths) {
    var pathArr = paths.split(','),    
    i,len,perpath,
    cs = document.getElementById('cs');
    var context = cs.getContext("2d");
    context.beginPath();
    
    for(i = 0,len = pathArr.length;i < len;i++) {
        perpath = pathArr[i].trim().split(' ');
        context.moveTo(parseInt(perpath[1]),parseInt(perpath[2]));
        if(parseInt(perpath[0]) === 0) {
            context.arc(parseInt(perpath[1]),parseInt(perpath[2]),7,0,2*Math.PI,false);
            context.fill();
            context.fillText(parseInt(perpath[0]),parseInt(perpath[1]) + 8,parseInt(perpath[2]) + 8);
        }
        else {
            context.arc(parseInt(perpath[1]),parseInt(perpath[2]),1,0,2*Math.PI,false);
            if(parseInt(perpath[3]) != -1) {
                context.fillText(parseInt(perpath[0]),parseInt(perpath[1]) - 4,parseInt(perpath[2]) + 4);
                context.fillText(parseInt(perpath[3]),parseInt(perpath[4]) - 4,parseInt(perpath[5]) + 4);
                context.arc(parseInt(perpath[4]),parseInt(perpath[5]),1,0,2*Math.PI,false);
            }
        }
    }
    context.stroke();
}

 

canvas確實很有意思，但是對於瀏覽器來說數據量一大，就會出問題了（卡的不行）。所以，當數據達到幾十萬甚至上百萬千萬的時候還是用“萬能“的c語言繪制比較好。。。

 

以上