关于如何使用ehcarts2加载svg矢量地图并自定义县级内部乡镇轮廓
项目需求:显示县级内部的乡镇一级地图的轮廓!
效果预览:
阻碍因素:echarts不提供县级以下乡镇级轮廓。
解决思路:
1.根据资料查找相关县的行政区域图(百度搜索),如本人所制作的浙江省宁波市宁海县,从百度搜索下找到一个的大概的行政轮廓图片:
2.使用SVGDeveloper (svg绘图软件)来详细绘制地图,虽然不是画的不是太专业,但是项目需求摆在那里,勉强还凑合哈!-。-|||
怎么画呢?
1.首先我们还需要上面的echarts地图在线生成工具为我们提供县级地图的外部大轮廓,然后放大到一定比例通过截图工具截取图片,保存为.png格式(如下图所示);
2.接着使用ps软件,我用的是Adobe Fireworks CS6对图片进行处理,反选将背景设为透明;
3.首先需要使用http://www.pngtosvg.com/ 将第2步中的透明png图片在线转为ninghai.svg的矢量图。
4.打开svg作图软件,选择文件ninghai.svg:
右下角放大到1000%作图:
(因为费时,这步较为繁琐,所以大家画完一部分地图记得随时保存哟!)
5.最后关于如何使用echarts2加载svg请参考http://echarts.baidu.com/echarts2/doc/example/map18.html ,http://echarts.baidu.com/echarts2/doc/example/map17.html,
这里是echarts2官方的两个加载案例,一个是百度大厦的自定义矢量地图,一个是足球场的地图;
核心代码:
require('echarts/util/mapData/params').params.ninghaimap = {
getGeoJson: function (callback) {
$.ajax({
type: "get",
url: "../static/echarts/svg/ninghaimap.svg",
dataType: 'xml',
success: function (xml) {
callback(xml)
}
});
}
最后希望大家能够提出意见,有更好的方法的大神欢迎留言,不吝赐教,谢谢!
关于如何使用ehcarts2加载svg矢量地图并自定义县级内部乡镇轮廓的更多相关文章
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- ArcGIS JS 4加载第三方矢量切片
现在矢量切片越来越普及,对于地图渲染能更轻更快.ArcGIS JS 4.13可以实现加载第三方矢量切片,以下为代码示例,最下方是我之前切的建筑物数据. 当切片大小在1M左右,加载效果还 ...
- OpenLayers学习笔记(一)—在线加载谷歌影像地图&离线加载本地瓦片地图
实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...
- ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...
- 图解classloader加载class的流程及自定义ClassLoader
图解classloader加载class的流程及自定义ClassLoader 博客分类: JVM JavaJVM虚拟机EXTSUN /** * 转载请注明作者longdick http://l ...
- 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互
[源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者: ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Qt加载百度离线地图
1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...
- leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
随机推荐
- Intel的CPU漏洞:Spectre
最近觉得越来越忙,写博客都没精力了.一定是太沉迷农药和刷即刻了…… 17年年底,18年年初,Intel被爆出了Meltdown(熔断)和Spectre(幽灵)漏洞.等Spectre攻击的POC出来以后 ...
- SVN使用方法
用了一年多SVN了,突然想起来对SVN操作做一个总结,以免有些操作不常用而忘记,也希望可以帮到其他人. 准备工作: 在使用SVN时首先就是要在服务器安装SVN管理端(VisualSVN),在电脑上安装 ...
- 实验三 CC2530平台上CC2530平台上定时器组件的
实验三 CC2530平台上CC2530平台上定时器组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530定时器的PWM功能,及其TinyOS ...
- 小程序开发:canvas在画布上滑动,页面跟着滑动问题
微信小程序官方文档有说明,disable-scroll="true" 可以阻止页面下拉和滚动.这里有个坑,disable-scroll在真机上如果要生效,那么要给canvas绑定一 ...
- MVC Model验证
[Required(ErrorMessage = "证件号不能为空!")] [RegularExpression(@"(^\d{18}$)|(^\d{15}$)|(^\d ...
- ubuntu18.04 配置chrome ss
为了FQ 不FQ不行啊 安装shaowsocks 1. 用实验室的服务器 sslocal -c xxx.json 2. 下载SwitchyOmega插件 链接: https://pan.baidu.c ...
- 安装FireEye渗透测试套件commando-vm
前两天FireEye开源了套他们自己的渗透测试工具,玩了下,这里简单讲一下我安装的过程. 1.首先是虚拟机,在virtualbox或者vmware中安装一个新的Windows系统,win7或者win1 ...
- 备份恢复工具xtrabackup安装和使用的记录
一.安装 下面的方法是在测试环境可以上网的情况下安装的: 提供的是在centos7上安装的方法: 包下载: wget https://www.percona.com/downloads/percona ...
- 用于模拟百度分享的errno错误代码
0:成功;-1:由于您分享了违反相关法律法规的文件,分享功能已被禁用,之前分享出去的文件不受影响.;-2:用户不存在;请刷新页面后重试;-3:文件不存在;请刷新页面后重试;-4:登录信息有误,请重新登 ...
- 多次ajax请求数据json出错!!
问题描述: 1.对象数据存放在session中,每次从session中取数据 2.jsp初始化完毕调用ajax请求,返回的数据格式出错(返回部分数据,即丢失了部分数据) 解决方案: