项目需求:显示县级内部的乡镇一级地图的轮廓!

效果预览:

阻碍因素: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矢量地图并自定义县级内部乡镇轮廓的更多相关文章

  1. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  2. ArcGIS JS 4加载第三方矢量切片

        现在矢量切片越来越普及,对于地图渲染能更轻更快.ArcGIS JS 4.13可以实现加载第三方矢量切片,以下为代码示例,最下方是我之前切的建筑物数据.     当切片大小在1M左右,加载效果还 ...

  3. OpenLayers学习笔记(一)—在线加载谷歌影像地图&离线加载本地瓦片地图

    实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...

  4. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  5. 图解classloader加载class的流程及自定义ClassLoader

    图解classloader加载class的流程及自定义ClassLoader 博客分类: JVM JavaJVM虚拟机EXTSUN /** *  转载请注明作者longdick    http://l ...

  6. 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互

    [源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者: ...

  7. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. Qt加载百度离线地图

    1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...

  9. leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

随机推荐

  1. CSS选择器中的特殊性

    我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  2. java标志性接口

    标识接口是没有任何方法和属性的接口.它仅仅表明它的类属于一个特定的类型,供其他代码来测试允许做一些事情.使用标记接口的唯一目的是使得可以用instanceof进行类型查询,例如:if(obj inst ...

  3. hive 非等值连接, 设置hive为nonstrict模式

    1 数据准备 create table stocks(id int, date string,price string, company string); insert into table stoc ...

  4. Favorite Donut(HDU 5442)最小表示法+二分

    题目给出一个字符串,由a~z表示甜度,随字典序增大,字符串首尾相连形成一个圈,要求从一个位置开始字典序最大的字符串,输出位置以及是顺时针还是逆时针表示.顺时针用0表示,逆时针用1表示. 此题只需要查找 ...

  5. python之 类对象 类方法 实例对象 实例方法 静态方法

    实例对象1. 创建的时间:使用 类名()的时候,就创建一个实例对象2. 实例属性:怎样添加 只要是一个变量能够指向这个实例对象,那么这个变量.xxxx = 111就是给其添加一个实例属性 特点: 跟着 ...

  6. FlappyBird开发帮助文档

    FlappyBird开发帮助文档 项目需求 完成FlappyBird游戏. 功能说明: 游戏开始后,间歇性的点击鼠标,让小鸟向上飞,不会掉下来,并且要穿过柱子的空隙,不能碰到柱子,碰到就dead了,穿 ...

  7. 【开发】iOS入门 - Touch事件处理学习笔记

    网上介绍iOS事件机制的文章,有不少都讲得很好,搬运一次意义不大,这里我就列一些要点吧. 跟Android一样,iOS的Touch事件也是从外到内传递,然后从内到外响应,可以看成一个U型结构.然而,个 ...

  8. Java 关键字详解(持续更新中)

    abstract:     表明类或者成员方法具有抽象熟悉.       修饰类,抽象类:         抽象类不能被实例化:         抽象类中可以有属性.方法.构造,都是用来给子类继承的: ...

  9. Yii2.0 RESTful API 基础配置教程

    创建api应用  通过拷贝原有的应用,重命名得到新的应用 安装完 Composer,运行下面的命令来安装 Composer Asset 插件: php composer.phar global req ...

  10. markdown特殊符号语法

    符号 说明           对应编码 &    AND符号        & < 小于           < > 大于           > _    ...