数据说话，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();
}