JVectorMap的使用体会

阅读更多

一、功能介绍：

JVectorMap是一个优秀的、兼容性强的jQuery地图插件。它可以工作在包括IE6在内的各款浏览器中，矢量图输出，除官方提供各国地图数据外，用户可以使用数据转换程序定制地图数据。

二、使用步骤：

1、首先要下载JVectorMap插件包。

   下载地址：http://download.csdn.net/download/laoshanbizu/5488955

2、引入必需的文件，包括样式表、jQuery框架、jVectorMap库，中国地图数据库：

中国地区数据库-->

3、指定地图放置区域HTML标签：

4、编写JavaScript函数，实现所需功能：

 

5、获取其他省份或地区的地图数据

可以用svg画图工具将需要的地图轮廓勾画出来，然后保存成svg格式的矢量图片，然后用nodepad++或xmlspy工具将svg文件打开，即可获取里面的地图数据。推荐工具：Inkscape

下载地址：http://download.csdn.net/download/laoshanbizu/5489111

当然，打开svg文件会看到有很多的数据，我们需要取的数据是以m开始，以z结尾的一串数字，然后将这串数字仿照china_zh.js文件组织成新的地图数据库。

举例：假如需要取北京市所有区和县的数据：

1）首先需要勾画出各个区县的轮廓图（svg格式）；

2）然后从各个svg文件中取出地图数据，

3）对照着china_zh.js文件组织成新的地图数据库。

 

6、在地图中显示文字

从官网上下载的jvectormap插件中默认没有这个功能，你需要修改一下jquery.vector-map.js文件。

我的修改方式：

1）首先在VectorCanvas.prototype中添加一个新的函数，用来在地图的指定区域中绘制文字，代码如下：

createText: function(params) {                      var textNode;                      var tspanNode;             if (this.mode == 'svg') {                             var xArea = params.x;                             var yArea = params.y;                             if(undefined != xArea && undefined != yArea && "" != xArea && "" != yArea ){                                    textNode = this.createSvgNode('text');                                                          textNode.setAttribute('x', xArea);                                    textNode.setAttribute('y', yArea);                                    textNode.setAttribute('id', "text_"+params.name);                                    textNode.setAttribute("style",params.style);                                    tspanNode = this.createSvgNode('tspan');                                    $(tspanNode).text(params.name);                                    $(tspanNode).appendTo(textNode);                             }                      }                      return textNode;               }

2）调用该函数：

var param = {name:mapData.pathes[key].name,x:mapData.pathes[key].x,y:mapData.pathes[key].y,style:textStyle}; var text = this.canvas.createText(param); $(this.rootGroup).append(text);

其中param中需要包含的数据有需要显示的文字， x轴坐标值，y轴坐标值，样式（样式的具体内容，并非样式名称）。

这段代码，需要放在function WorldMap(param)中，也就是插件中var WorldMap = function(params){}内部，具体位置，可以参照cratePath的方式添加，上面那三句，并不是并列的三句，是需要放在不同位置的，具体的还是请参照createPath的添加方式。

 

 

3）对应的修改china_zh.js文件（可以参考beijing_2-zh.js）。

        i）在height属性下面添加style属性，示例如下：

"style" :"font-size:6px;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:新宋体;z-index:5"

        ii）在pathes中的子元素中添加 x，y坐标值，示例如下：

"x": "330.8695","y":"350.8071"

至此，文字便可以正常显示了，他可以随着地图的放大而放大，位置不会改变。

 

目前总结的就这么几点，如有新的体会，会继续添加。

附件中有个小例子，希望对大家有用

                                                                                            编写于2013年5月31日

• CBDDemo.rar (84 KB)
• 下载次数: 869