使用svg画地图详细过程
使用步骤
1. 安装svg
2. 具体操作
1. 打开svg,点击file ,new,默认svg,点击ok
显示界面如下:
然后点击image
把鼠标放到代码下面的的桌面上,鼠标箭头会变成一个十字,然后点击桌布,弹出窗口,让选择一个图片:
刚出来的时候,桌布上只能看到一个框框:
然后,右键桌布,在菜单中选择image
显示样式如下:
此时,为了便于操作,切换回鼠标,点击黑色鼠标就会变成鼠标样式了:
由于我们的地图需要放大,所以我们在开始的时候,就要把地图放大,这样在页面上才能更好的显示放大效果。需要调整桌布的宽高为4000,图片的宽高要根据最大的像素来调整小的像素的大小,保持比例不变,例如:
我当前的画布(就是svg标签内的宽高),都要修改为4000,然后计算image的宽高:最大像素是height=655,改为height=4000;那么width=582就应该改为:4000*582/655=3554,修改x轴y轴都为零,便于后面添加文字
修改后的样式如下:
我们在这个宽高的基础上,再放大200%或者以上,以防地图失真,放大在右下角,描点:
在描点之前,要设置一下背景,便于后面操作:
圈中部分,第一个颜色为背景色,第二个颜色为画笔演示,我们这里要把背景色修改为无(就是画笔的当前色),把画笔修改为一个明亮的颜色,比如蓝色:
画笔的宽度也可以修改,右边的1是默认值,大于1就是加粗,小于1就是变细,我们为了方便,修改为2
这样就可以开始描点了,点击pen:
随便选择一个地图的边线,然后就可以沿着边线,一路点击描点:
这里要注意一下:选中pen后,不能随便点击桌布,因为点击一下就是一个点,如果这个点与其它点不连贯,代码中就会多出一个path(path的数量会根据孤立的点或者线会有相应数量的增加),后面会出现一些不必要的麻烦。
中间如果画错的话,可以ctrl+z后撤,点到最后,要成闭环的时候,鼠标上面的+号会变成o,这样就表示闭环了。
缩小后可以看到是这个样子:
这个时候,把path中的id粘贴出来放到svg模板中,华中地图整体是阴影部分:
那么就把id中的内容拷贝出来放在对应的id中:
在浏览器中打开,可以查看:
完整样子:
然后就可以在这个的基础上画省份了,同样,要修改一下背景色和画笔颜色。
省份的边线要挨着阴影线画,如果觉得不好控制距离的话,可以放大倍率来画,我这里调整为300%,这么点着就可以稍微快一点了,闭环后,如法炮制,把d中的值拷贝到模板中子模块中,如河南:
地图模板.svg 模板信息:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<!-- Created by SVGDeveloper 1.0 -->
<svg width="4000" height="4000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--安徽 #042b82 #063499 #083db2 #124ed1 #2464f0 #497dee-->
<g id="map"><!-- 阴影 -->
<g id="yy" fill="none" fill-opacity="0.1" transform="translate(0,14)" > <path id="yy" stroke="#2e81df" stroke-width="32" d="" />
</g>
<!-- 亳州 -->
<path id="341600" fill="#042b82" stroke="black" stroke-width="2" d="" />
<!-- 阜阳 -->
<path id="341200" fill="#021e5c" stroke="black" stroke-width="2" d="" />
<!-- 淮北 -->
<path id="340600" fill="#063499" stroke="black" stroke-width="2" d="" />
<!-- 宿州 -->
<path id="341300" fill="#083db2" stroke="black" stroke-width="2" d="" />
<!-- 六安 -->
<path id="341500" fill="#124ed1" stroke="black" stroke-width="2" d="" />
<!-- 淮南 -->
<path id="340400" fill="#071b49" stroke="black" stroke-width="2" d="" />
<!-- 安庆 -->
<path id="340800" fill="#083db2" stroke="black" stroke-width="2" d="" />
<!-- 池州 -->
<path id="341700" fill="#2464f0" stroke="black" stroke-width="2" d="" />
<!-- 黄山 -->
<path id="341000" fill="#124ed1" stroke="black" stroke-width="2" d="" />
<!-- 蚌埠-->
<path id="340300" fill="#124ed1" stroke="black" stroke-width="2" d="" />
<!-- 合肥 -->
<path id="340100" fill="#497dee" stroke="black" stroke-width="2" d="" />
<!-- 滁州 -->
<path id="341100" fill="#2464f0" stroke="black" stroke-width="2" d="" />
<!-- 芜湖 -->
<path id="340200" fill="#042b82" stroke="black" stroke-width="2" d="" />
<!-- 宣城 -->
<path id="341800" fill="#497dee" stroke="black" stroke-width="2" d="" />
<!-- 铜陵 -->
<path id="340700" fill="#021e5c" stroke="black" stroke-width="2" d="" />
<!-- 马鞍山 -->
<path id="340500" fill="#063499" stroke="black" stroke-width="2" d="" />
<g id="p_text">
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">亳州</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">阜阳</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">淮北</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">宿州</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">六安</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">淮南</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">黄山</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">蚌埠</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">合肥</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">滁州</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">芜湖</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">宣城</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">铜陵</text>
<text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">马鞍山</text>
</g>
</g>
</svg>
上面的关键字含义如下:
现在开始添加省份信息,比如给河南省添加名称,并添加在地图的中央位置(美观):
切换为鼠标,点击桌面上显示河南的这一块连线,会显示如下样子:
可以看到中心有一个点,这个就是地图中心位置,鼠标移动的这个上面,可以看到svg工具下方有一个坐标地址,把这个坐标地址填写到
<text x="2033" y="1086" fill="#ffcc00" fill-opacity="0.8" class="font1">河南</text>
显示如下:
以上就是svg的基本使用方法。
使用svg画地图详细过程相关推荐
- 阻止地图的放大和缩小_Arcgis画地图详细步骤(真的!!)
在学习了python画地图之后,继续进行地图的学习,Arcgis画地图的详细步骤来也!!! 1.打开Arcgis点击取消 2.点击添加数据 3.导入shp文件:找到电脑中shp文件的位置,单击选择之后 ...
- 在React-native中使用SVG详细过程
首先React-native不能直接引入SVG图片,所以我们要借助两个库来实现,废话不多说,下面直接给出详细过程 1 . 安装react-native-svg(参考我的package.json文件) ...
- R语言时代,你要怎样画地图?
不知道各位平常有没有过需要画地图的需求,有的时候需要在地图上标出特定位置的数据表现或者一些数值,然而怎么实现? 这里主要介绍下在R语言中绘制地图的个人琢磨的思路.绘制地图步骤有三: 你得需要绘制地图: ...
- 分享一次自己使用 pyecharts 模块 画地图,一路踩坑和填坑的经历
pyecharts是一个百度做的数据可视化模块,做好的echarts图可以存为html\svg等多种格式,具有极好的交互性和展示性. 文档很详细,先把官网中文文档放上来:http://pyechart ...
- 小白学习Basemap气象画地图的第三天(中国温度分布图,mask外部)
小白学习Basemap气象画地图的第三天(中国温度分布图,mask外部) 首先还是感谢公众号(气象学家),代码和测试数据来自与他,不过这次有长进了,自己学会修改了.还是逐条向大家解释. (和大家分享一 ...
- R时代,你要怎样画地图?
转自 http://www.dataguru.cn/article-3062-1.html 不知道各位平常有没有过需要画地图的需求,有的时候需要在地图上标出特定位置的数据表现或者一些数值,然而怎么实 ...
- echarts geo地图示例_python小白的画地图合集(使用pyecharts)
经过今晚的小摸索,终于可以画出世界地图.省级地图以及全国的热力图.所以特此决定出一个小的合集,建议先去阅读上一篇写的画中国地图,可能那样子你会很快速了解到画图的精髓. 画世界地图 依旧是上次的套路: ...
- arcgis 地图_ArcGIS超详细入门操作:ArcGIS矢量化地图详细步骤
今天给大家带来的干货是[ArcGIS超详细入门操作:ArcGIS矢量化地图详细步骤],欢迎大家收藏查阅! 在桌面上新建一个文件夹,打开ArcCatalog, "文件"--" ...
- 小白学习Basemap气象画地图的第五天(读取micaps站点数据,省级能见度分布)
小白学习Basemap气象画地图的第五天(读取micaps站点数据,省级能见度分布) 这一帖子,主要介绍了三个重点: 1.micaps站点数据的读取 2.站点数据的插值 3.不均匀色标的生成 在下面的 ...
最新文章
- ConcurrentHashMap 原理解析
- 【数据结构与算法】之深入解析“四数之和”的求解思路与算法示例
- jmeter constant timer 如何添加_JMeter性能测试入门篇
- Java基础(五)——泛型
- PEOPLE MANAGEMENT 节选
- 面向连接服务与无连接服务
- 如何批量将 Word 文档转为 Svg 格式
- WPS简历模板的图标怎么修改_官方发福利一起来薅羊毛啦!教你免费领WPS会员
- 怎么用PS替换图片背景色?这个方法你需要知道
- python暂停和恢复按钮,Python:如何暂停和恢复线程
- TensorFlow2.0教程-文本分类
- 中国龙与西方龙的头部区别
- 【AI选股】如何通过python调用通达信-小达实现AI选股(量化又多了一个选股工具)
- 求解:Assertion failed (size.width0 size.height0) in cv::imshow, file C:\build\master_winpack-buil
- android sim卡槽,一加5怎么装卡/插卡 一加手机5 SIM卡安装图文教程
- C# 盘古分词的使用
- 字符串操作函数的实现【详解】
- uber幽灵车_Uber&Careem合并:新兴的出租车服务将在中东和北非地区产生影响?...
- 幼儿教师个人简历模板范文
- pgsql执行分析explain结果分析