地图的需求还是蛮大的，全国都要自己画的话，还是需要投入比较大的人力。

ECharts中有地图，那我们能不能把里面的地图文件提取出来呢，主要逻辑在map.js中。

看源代码发现，ECharts中地图信息，通过算法，把坐标信息，转换成基准[x,y]和坐标数组，再通过String.fromCharCode坐标数组转换成字符()，进行存储

这也是一种大量数字数据，前端压缩，编码的好办法。

ECharts的使用的这种方式，灵活性更高，可以修改图像的偏移，放大倍数。

而在项目中，使用的方式，可以通过viewBox完成，但是图像偏移就没有简便方法实现了

　　代码大部分都是ECharts内部代码，把用到的整理出来，通过raphael把地图显示出来，地址戳这里。

　　上个效果图

　　

提取 ECharts 中的svg地图信息的更多相关文章

  1. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  2. HTML5中使用SVG

    SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签.你只需定义好XML属性,就能获得一致的图像元素. 使用SVG之前先将标签加入到HTML body ...

  3. 【前端】提取URL中的各个GET参数

    /**************************** * 有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xx ...

  4. HTML5中的SVG

    * SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名 ...

  5. C++ 提取字符串中的数字

    C++ 提取字符串中的数字 #include <iostream> using namespace std; int main() { ] = "1ab2cd3ef45g&quo ...

  6. ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

    本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641   1.导入包,搭建SSH框架 导入Jquery的JS包,<sc ...

  7. 在线提取PDF中图片和文字

    无需下载软件,你就可以在线提取PDF中图片和文字,http://www.extractpdf.com/不仅可以获取本地PDF文档的图片和文字,还能获取远程PDF文档的图片和文字.如下图所示:结果本人测 ...

  8. python笔记之提取网页中的超链接

    python笔记之提取网页中的超链接 对于提取网页中的超链接,先把网页内容读取出来,然后用beautifulsoup来解析是比较方便的.但是我发现一个问题,如果直接提取a标签的href,就会包含jav ...

  9. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

随机推荐

  1. 第一个关于ajax的代码

    昨天由于需要,写了第一个需要ajax的程序,之前只是看过相关介绍,没想到这么有用,记录一下,如有错误,还希望大家提出$(document).ready(function () {//获取url中名字为 ...

  2. Http权威指南笔记(二) Http状态码大全

    100~199—信息状态码 200~299—成功状态码 客户端发请求时,这些请求通常都是成功的. 300~399—重定向状态码 重定向状态码告知客户端使用代替位置来访问他们所感兴趣的资源. 400~4 ...

  3. C语言strcmp()函数：比较字符串（区分大小写）

    头文件:#include <string.h> strcmp() 用来比较字符串(区分大小写),其原型为: int strcmp(const char *s1, const char *s ...

  4. [Oracle]日期和毫秒转换（Date->int）

    --日期转换毫秒  SELECT TO_NUMBER(TO_DATE('2005-03-29 12:30:45', 'YYYY-MM-DD HH24:MI:SS') -  TO_DATE('1970- ...

  5. 判断是否联网_检测网络的类型为3G、2G、wap、wifi

    判断是否联网_检测网络的类型为3G.2G.wap.wifi  判断是否联网: /*** * judge Internet is available * * @author wei-spring * @ ...

  6. ConnectivityManager与检查网络连接的使用

    1.ConnectivityManager的作用 ConnectivityManager主要管理和网络管理相关的操作 TelephonyManager则管理和手机.运营商等的相关信息 WifiMana ...

  7. laravel5.1框架简介及安装

    最近自己出来实习了,进入了一个新的环境,不仅是生活中,在代码和架构中也完全是一个新的架构.由于公司使用laravel5.1框架,所以最近学习了laravel5.1框架,好了接下来就简单介绍一下lara ...

  8. Mono For Android中AlarmManager的使用

    最近做了一个应用,要求如下: 程序运行之后的一段时间,分别触发3个不同的事件.当然很快就想到了Android中的AlarmManager和BroadcastReceiver.但是毕竟Mono环境和Ja ...

  9. CreateFile函数详解（确实很详细）

    CreateFile The CreateFile function creates or opens the following objects and returns a handle that ...

  10. 提交(post)xml文件给指定url的2种方法

    原文:提交(post)xml文件给指定url的2种方法 1  这段代码是在网上搜到的,拿来共享,项目正好要用到.其中的data你只需要传递一个xml字符串就可以 protected   string  ...