數聽說話，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語言繪製比較好。。。

 

以上