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文件中的mapidseries: {markers: [{attribute: 'image',       //代表使用图片代替标记scale: {'criminal':'1.png',     //图片的名称，图片的路径'police': '2.png'},}],regions: [{               //区域上色，如不需要把regions属性删掉jiuoknormalizeFunction: '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文档中查看。

jvectormap的自定义地图和区域上色、图片标记相关推荐

Tableau:自定义地图的使用
Tableau中的地图可以是真的地图,也可以是背景图片,但是用法都是差不多的,都可以在上面画点.画线.画块来展现数据.这种背景图片的应用也叫自定义地图应用. 1.数据及图像先介绍本篇会使用到 ...
Android高德地图绘制区域,Android高德地图多边形的绘制与编辑
最近项目中用到了一个高德地图画地块的功能,差了一下api,发现只有js有相关的方法,所以仿照js的交互方式做了一个android版的多边形绘制与编辑. 先不说,上一张效果图完成效果图 1.通过观察, ...
百度地图自定义图标icon 添加本地图片无法显示问题解决
百度地图自定义图标icon 添加本地图片无法显示问题解决我们在阿里巴巴矢量库找的icon 保存到本地结论我们在阿里巴巴矢量库找的icon 保存到本地链接: 阿里巴巴矢量库. 图片: 随便找一个 ...
Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...
手把手教你绘制自定义地图
1. 内容概述自定义地图组件支持使用用户自己绘制的地图绑定和呈现数据. 我们可以直接在设计器中绘制自定义地图,只需导入底图图片,进行描边和调整标记点,即可使用. 如下图所示,我们根据一张商场的平面图 ...
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...
vue 高德地图不同区域显示不同颜色_联测科技丨高德地图不仅仅是拿来导航的...
高德地图不仅仅当做一个导航工具,他还有许多不一样的用途. 隐藏功能一:制作高大上的PPT地图高德地图强悍的功能,我们需要进入这个网站:https://lbs.amap.com,也就是高德开放平台. ...
Tableau 第七天多边形地图和背景地图：设置地理信息（自定义地图码导入、设置地图源）
关注微信公共号:小程在线关注CSDN博客:程志伟的博客视频地址:https://www.bilibili.com/video/BV1E4411B7ef?p=7 第七天 21.多边形地图 21.1 ...
vue 高德地图不同区域显示不同颜色_没想到高德地图还能这么用，简直是PPT图表神器！...
本文转自:公众号"旁门左道PPT" 作者:邵云蛟提到高德地图,相信咱们每一个人都不会陌生,日常用来导航,也可以用来打车,一次呼叫8种车型,非常方便: 但是,如果你把它仅仅当做一个 ...

jvectormap的自定义地图和区域上色、图片标记

jvectormap的自定义地图和区域上色、图片标记

提取svg数据并生成js

jvectormap使用

jvectormap的自定义地图和区域上色、图片标记相关推荐

最新文章

热门文章