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

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

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

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

嗯。。。不錯。。。

繪制代碼如下：

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語言繪制比較好。。。

?

以上

轉載于:https://www.cnblogs.com/MarcoHan/p/5475926.html

總結

以上是生活随笔為你收集整理的数据说话，88000条数据绘制北京市地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。