jvectormap的自定义地图和区域上色、图片标记
因为网上例子太少，上手实属不易，所以在这里跟大家分享一下我的使用！
这里就简单的介绍了
jquery是必不可少的
jvectormap的官方下载地址：http://jvectormap.com/download/
图片转svg格式工具，win10病毒库更新后显示有病毒，我感觉用的挺方便，自己选择，也可在网上自己找
链接：https://pan.baidu.com/s/1hyl2TBjvcACRbldvKXiKQQ
提取码：xw9e
提取svg数据并生成js
Maven依赖
主要是解析svg文件
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-svggen</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-bridge</artifactId>
<version>1.8</version>
<exclusions>
<exclusion>
<groupId>xalan</groupId>
<artifactId>xalan</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-dom</artifactId>
<version>1.8</version>
<exclusions>
<exclusion>
<groupId>xalan</groupId>
<artifactId>xalan</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-parser</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-svg-dom</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-transcoder</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-util</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-xml</artifactId>
<version>1.8</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.xmlgraphics/xmlgraphics-commons -->
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>xmlgraphics-commons</artifactId>
<version>2.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.xmlgraphics/batik-codec -->
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-codec</artifactId>
<version>1.8</version>
</dependency> <!-- 此处不能使用2.9.1版本，使用2.9.1生成png会失败 -->
<dependency>
<groupId>xerces</groupId>
<artifactId>xercesImpl</artifactId>
<version>2.5.0</version>
</dependency>
<dependency>
<groupId>xml-apis</groupId>
<artifactId>xmlParserAPIs</artifactId>
<version>2.0.2</version>
</dependency>
<dependency>
<groupId>org.axsl.org.w3c.dom.svg</groupId>
<artifactId>svg-dom-java</artifactId>
<version>1.1</version>
</dependency>
<dependency>
<groupId>xml-apis</groupId>
<artifactId>xml-apis</artifactId>
<version>2.0.0</version>
</dependency>
<dependency>
<groupId>org.w3c.css</groupId>
<artifactId>sac</artifactId>
<version>1.3</version>
</dependency>
提取Java代码
需要将svg文件的中的svg标签上添加一个id属性
import org.apache.batik.anim.dom.SAXSVGDocumentFactory;
import org.apache.batik.util.XMLResourceDescriptor;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NamedNodeMap;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
public class SvgScript {
/**
* 获取当前地图区域所对应的颜色信息
* @param svgURI svg文件的所在路径
* @param svgId svg文件中svg标签的id，自己手动设置，没有id将拿不到svg对象
* @throws Exception
*/
public static void svgColor(String svgURI,String svgId) throws Exception {
Element element=getList(svgURI,svgId);
NodeList list=element.getChildNodes();
NodeList gList=null;
Node node=null;
Node gNode=null;
NamedNodeMap map=null;
int j=-1;
int count=0;
for(int i=0;i<list.getLength()/2;i++) {
node=list.item(j+=2);
gList=node.getChildNodes();
int l=-1;
for (int k=0; k<gList.getLength()/2; k++) {
gNode=gList.item(l+=2);
map=gNode.getAttributes();
String fill=map.getNamedItem("fill").getNodeValue();
System.out.print((count++)+":'"+fill+"',");
if(count%10==0&&count!=0) {
System.out.println();
}
}
}
}
/**
* 提取svg文件中的地图数据并生成jvectormap需要的js文件
* @param svgURI svg文件的所在路径
* @param svgId svg文件中svg标签的id，自己手动设置，没有id将拿不到svg对象
* @param outPath js文件的输出路径
* @param mapId 生成js中地图的名称
* @param width 展示图片的宽
* @param height 展示图片的高
* @throws Exception
*/
public static void parseSVG(String svgURI,String svgId,String outPath,String mapId) throws Exception {
Element element=getList(svgURI,svgId);
String width=element.getAttribute("width");
String height=element.getAttribute("height");
NodeList list=element.getChildNodes();
NodeList gList=null;
FileWriter fw=new FileWriter(new File(outPath));
Node gnode=null;
Node node=null;
NamedNodeMap map=null;
StringBuilder str=new StringBuilder();
str.append("jQuery.fn.vectorMap('addMap', '"+mapId+"',{\"width\":"+width+",\"height\":"+height+",\"paths\":{\n");
int j=-1;
int count=0;
for(int i=0;i<list.getLength()/2;i++) {
gnode=list.item(j+=2);
gList=gnode.getChildNodes();
int l=-1;
for (int k=0; k<gList.getLength()/2; k++) {
node=gList.item(l+=2);
map=node.getAttributes();
str.append("\t\t\""+(count++)+"\":{\"path\":\""+map.getNamedItem("d").getNodeValue()+"\"}");
if(k!=gList.getLength()-1) {
str.append(",\n");
}
}
}
}
/**
* 获取svg文件中svg标签中的子元素集合
* @param svgURI svg文件所在路径
* @param svgId svg文件中svg标签的id，自己手动设置，没有id将拿不到svg对象
* @return
* @throws Exception
*/
public static NodeList getList(String svgURI,String svgId) throws Exception {
File file = new File(svgURI);
String parser = XMLResourceDescriptor.getXMLParserClassName();
SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
Document doc = f.createDocument(file.toURI().toString());
Element element = doc.getElementById(svgId);
return element.getChildNodes();
}
}
jvectormap使用
jvectormap api文档：http://www.u396.com/tag/jvectormap
我就写的简洁一点当个例子使用了
<html>
<head>
<link href="jquery-jvectormap-2.0.3.css" rel="stylesheet" />
<script src="jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-jvectormap-2.0.3.min.js"></script>
<script src="map.js"></script> <!-- 用svg文件生成的js -->
</head>
<body onload="show()">
<div id="mapSvg"></div>
</body>
<script type="text/javascript">
var mapColor={
0:'#ffffff',... //java方法中获取区域颜色的那个打印的数据放这里
};
function show(){
$('#mapSvg').vectorMap({
map:'mySvg', //生成js文件中的mapid
series: {
markers: [{
attribute: 'image', //代表使用图片代替标记
scale: {
'criminal':'1.png', //图片的名称，图片的路径
'police': '2.png'
},
}],
regions: [{ //区域上色，如不需要把regions属性删掉jiuok
normalizeFunction: 'polynomial',
attribute: 'fill',
values: mapColor
}]
},
});
}
function addMarkerImage(){
//添加单个图片标记
var map=$('#mapSvg').vectorMap('get','mapObject');
var nd={};
nd.name="lucy"; //鼠标移动到标记上显示的信息
nd.coords=[x,y]; //x轴y轴坐标
map.addMarker("001",nd,['criminal']); //001:标记的编号，不可重复,重复时覆盖，
//nd:标记的信息，可自己添加需要的属性，但是coords是必须的 ，
//['criminal']：标记引用的图片，和定义地图信息中定义的
//这样就可以在地图的指定x,y坐标添加一个标记了
//添加多个图片标记
var nd1={}
nd1.coords=[x,y];
var nd2={}
nd2.coords=[x,y]；
var BQ=[];
BQ.push(nd1);
BQ.push(nd2);
map.addMarkers(BQ);
//添加图片代替标记
a.series.markers[0].setValues(['police','criminal']); //图片标记对应的标记的顺序，标记数组[0]，对应的就是图片数组[0]
}
function addMarker(){
//不使用图片标记,要先将地图定义中的markers属性删掉
//添加单个
var nd0={};
nd0.coords=[x,y];
nd0.style= {stroke: 'yellow', fill: 'red', r: 6}; //标记的样式
//fill是标记的颜色
//stroke是园外圈的颜色
//r 标记的大小
map.addMarker("002",nd0)；
//添加多个
//添加多个图片标记
var nd1={}
nd1.coords=[x,y];
var nd2={}
nd2.coords=[x,y]；
var BQ=[];
BQ.push(nd1);
BQ.push(nd2);
map.addMarkers(BQ);
}
</script>
ok，这样一个地图就做出来了，还有一些方法属性，请在上方的 jvectormap中的api文档中查看。