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

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

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

再來一張只有邊沒有點(diǎn)的，會(huì)清晰一點(diǎn)。

嗯。。。不錯(cuò)。。。

繪制代碼如下：

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確實(shí)很有意思，但是對(duì)于瀏覽器來說數(shù)據(jù)量一大，就會(huì)出問題了（卡的不行）。所以，當(dāng)數(shù)據(jù)達(dá)到幾十萬甚至上百萬千萬的時(shí)候還是用“萬能“的c語言繪制比較好。。。

?

以上

轉(zhuǎn)載于:https://www.cnblogs.com/MarcoHan/p/5475926.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。