svg画图保姆级教程

目录

什么是svg

使用svg画图用到的几个网站:

1.svg画图工具：http://www.zuohaotu.com/svg

2. 下载到县级的svg图： DataV.GeoAtlas地理小工具系列

3.bigemap：各个镇的kml文件：BIGEMAP卫星地图_高清卫星地图_北斗高清地图_地图软件_矢量地图数据_专题地图

4.各个区域的拼接：geojson.io | powered by Mapbox

5.JSON转svg：mapshaper 

 相关说明：两种情况

一、到县级：（如果你要做的地图是某个市的所有县）

1、到县级可以直接在此网站  DataV.GeoAtlas地理小工具系列下载你需要的svg图：

2、下载svg之后，使用 svg画图工具：http://www.zuohaotu.com/svg打开

二、到镇级（如果你要做的地图是某个县里的所有镇）：

1、首先是下载bigemap到自己的电脑中

2、下载完各个乡镇的文件之后，使用工具  geojson.io | powered by Mapbox 进行拼接：

 3、使用mapshaper工具，把GeoJSON文件转成svg

4、打开svg工具SVG在线编辑器

补充：

---

什么是svg

SVG 是 Scalable Vector Graphics（可缩放矢量图形）的缩写，它是一种基于 XML 的矢量图像格式，用于描述二维图形和图形应用程序。SVG 图像和它们的行为在 XML 文本文件中定义，这意味着它们可以被搜索、索引、脚本化或压缩。由于 SVG 图像是矢量的，所以它们可以无损地缩放到任何大小，而不会失去清晰度或像素化。SVG 在网页设计中常用于图标、背景图像和复杂的用户界面元素。

使用svg画图用到的几个网站:

1.svg画图工具：http://www.zuohaotu.com/svg

2. 下载到县级的svg图： DataV.GeoAtlas地理小工具系列

3.bigemap：各个镇的kml文件：BIGEMAP卫星地图_高清卫星地图_北斗高清地图_地图软件_矢量地图数据_专题地图

4.各个区域的拼接：geojson.io | powered by Mapbox

5.JSON转svg：mapshaper 

 相关说明：两种情况

一、到县级：（如果你要做的地图是某个市的所有县）

1、到县级可以直接在此网站  DataV.GeoAtlas地理小工具系列下载你需要的svg图：

首先打开网站：

2、下载svg之后，使用 svg画图工具：http://www.zuohaotu.com/svg打开

导入文件之后，在视图那里点击查看源码

之后我们就拿到了郑州市的svg图的源码：

复制代码，应用到自己项目中。 

二、到镇级（如果你要做的地图是某个县里的所有镇）：

这个就比较麻烦了，因为上述的那个工具，只能具体到县级，没有现成的可以下载到镇的svg图，需要自己把每个镇的图下载下来，再拼到一起！

1、首先是下载bigemap到自己的电脑中

打开软件：添加离线地图

配置文件放在百度网盘了，需要自取：

链接:百度网盘
提取码:1fkz

打开配置文件后，把常用的地图添加上就ok了

·        

接着下载你所需要的县里的各个乡镇

说明一点： 如果没有添加自定义地图，下载是或提示你添加离线地图，如下图所示：

下载的文件：

2、下载完各个乡镇的文件之后，使用工具  geojson.io | powered by Mapbox 进行拼接：

首先：打开工具，点击open按钮，依次选择每个文件夹里的kml文件，

选择了之后，地图上就会出现你所选择的镇或乡

把所有添加完成后，如下图所示：

之后保存为GeoISON文件

 3、使用mapshaper工具，把GeoJSON文件转成svg

打开网站，点击select

选择刚刚下载的GeoJSON文件

点击import

之后点击export，选择svg 再点击export

导出成功了

接着可查看我们刚刚导出的，svg文件：即我们所需的县到乡镇级别的地图！

4、打开svg工具SVG在线编辑器

 

拿到svg代码：

复制代码，应用到自己项目中。 

补充：

拿到代码后，对于svg标签的使用及其相关属性的用法，读者可自行查询，推荐SVG 教程 | 菜鸟教程

然后正确运用到自己的项目中，感谢阅读，如有错误欢迎指正！