制作Web地图的几种方法
JavaScript-based：jVectorMap
jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.
参考：http://dove19900520.iteye.com/blog/1880668
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
纯SVG
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
GeoMap：https://github.com/x6doooo/GeoMap
http://www.helloweba.com/view-blog-242.html
http://www.cnblogs.com/linfei721/archive/2013/06/02/3114174.html
http://rockydo.com/svgmap/svgmap.html
Fabric.js is a powerful and simple
Javascript HTML5 canvas library
Fabric provides interactive object model on top of canvas element
Fabric also has SVG-to-canvas (and canvas-to-SVG) parser
raphael.js矢量绘图（3）绘图方法 – Dx. Yang
在RaphaelJs里，用来绘制形状的方法不算多，比较容易掌握。
矩形
参数：x轴坐标，y轴坐标，宽度，高度
paper.rect(x, y, width, height);
圆形
参数：圆心的x轴坐标，y轴坐标，圆半径
paper.circle(x, y, r);
椭圆
参数：圆心的x轴坐标，y轴坐标，x轴半径，y轴半径
paper.ellipse(x, y, xr, yr);
路径
paper.path('M10,10 L20,20');
路径是矢量绘图里最强大的工具，同时也比较复杂。
路径的参数是一组字符串，由“命令字母+坐标数字”的组合构成。
具体设置方法可以参看另外几篇介绍：
路径详解1（基本）：http://xbingoz.com/171.html
路径详解2（曲线）：http://xbingoz.com/194.html
MDN路径教程：http://xbingoz.com/320.html
图片
image方法可以引入图片文件，和HTML里的img标签作用相似。
paper.image(src, x, y, width, height);
文字
RaphaelJs有两个方法用来绘制文字
1、paper.text(50, 50, "Raphaël\nkicks\nbutt!");
text方法用来绘制一般文字，和HTML里的文字一样，它只能使用浏览器支持的字体。
在字符串参数中加入\n可以输入多行文字
2、paper.print(10, 50, "print", paper.getFont("Museo"), 30);
print方法可以渲染任意字体的文字，它的第四个参数是字体，这里需要使用paper.getFont()方法，该方法接受一个字符串参数，表示需要获取的字体名称。只要该字体已在系统中注册，就可以获取，并使用它渲染文字。
图形对象
绘制形状的方法会返回形状对象，该对象可以使用show()、hide()等方法。
attr()是形状对象的一个常用方法，它可以改变形状对象的属性，例如：
|
1
2
3
4
5
6
7
8
9
10
|
//绘制一个矩形，左上角位于(10,10)，宽800，高600，黑色填充//这里可以使用链式操作paper.rect(10, 10, 800, 600).attr('fill', '#000');//或者用一个变量缓存形状对象，便于后续操作var rect1 = paper.rect(10, 10, 800, 600);rect1.attr('fill', '#000');setTimeout(function(){ rect1.attr('fill', 'red');},1000); |