数据说话，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语言绘制比较好。。。

以上

转载于:https://www.cnblogs.com/MarcoHan/p/5475926.html

数据说话，88000条数据绘制北京市地图相关推荐

Java实现多条相同数据合并为一条数据
标题前言方法一: List 不建议使用方法二: Map 不建议使用方法三: sql实现 ==最简单不用动脑.推荐使用== 方法四,推荐使用一条数据拆分多条数据前言首先说明一下场景啊,今 ...
VUE将两条数据组合成一条数据
需求是:最后一位是奇数默认和偶数是一对.例如0011 和0012 是一组.请求回来的数据是单条的.我们要组合起来,方便选中.我是让后端返回的时候一对的给一个相同的字段commonId // 模拟请求数 ...
Mysql 批量插入大量数据的两种方案以及优缺点（分别是 5W 条数据和 10W 条数据）
Mysql 批量插入(5W 条数据和 10W 条数据) 1.批量插入思路一般是有两种不同的思路: 1.for 循环批量插入 2.生成一条 SQL 语句,比如 insert into user(id, ...
如何通过echarts绘制北京市地图并可以添加标记并可点击
首先获取城市地图所对应的json文件通过这个网站可以获取到城市地图所对应的json echarts 中使用的是地图的js文件需要找到北京地图的js文件下载各个城市的js文件绘制出地图在地图上 ...
mysql一张表1亿天数据_1亿条数据在PHP中实现Mysql数据库分表100张
转: 1亿条数据在PHP中实现Mysql数据库分表100张 http://php-z.com/thread-2115-1-1.html (出处: PHP-Z) 当数据量猛增的时候,大家都会选择库表散列 ...
批量更新mysql数据（万条数据秒完成）
1.常规方法,利用executemany批量更新数据(数据量小用这个就够了) import pymysql import pandas as pd conn = pymysql.connect(hos ...
sql语句实现多条数据合为一条数据
今天遇到个函数感觉很有用,给你们举个例子吧: 当我们给用户多个角色的时候,我们的用户角色表的展示方式有两种, 一种是把所有角色何在一起变成一个字符串,然后在该表查看用户就能看到一条关于用户角色的数据 ...
java插入多条数据_如何使用java代码一次性往数据插入10W条数据
1. 场景 : 往数据库插入10W条记录 2. 思考方案 : 单纯的我们这里不涉及其他任何操作,我们只是想生成一个10W条记录而已,中间无其他步骤,得到的效果如下图所示, 而我们又不会mysql脚本啊 ...
mysql 一列数据变为一条_SQL 一列数据整合为一条数据
jQuery自动与手动图片切换效果下载效果图: 查看效果:http://hovertree.com/jq/hovertreeimg/ 下载:http://hovertree.com/h/bjaf/g ...

数据说话，88000条数据绘制北京市地图

数据说话，88000条数据绘制北京市地图相关推荐

最新文章

热门文章