如何利用Highmaps自定义地图
2017-07-11 本文已影响0人
酱油攻城狮
引言:基于网上的数据,我们可以很方便的用highmaps、echarts等工具做一份中国的人口密度分布图、各个国家的人数分布图。如何做一个自定义的地图呢?
实现这个功能也很简单,下面我们将一步一步的,看看如何实现这个功能
1、需要的工具和材料:
1)、JS:highmaps.js,jquery.js
2)、要操作的地图的图片一份
3)、下载安装inkscope(https://inkscape.org/en/,这是你唯一需要安装的软件)
2、操作步骤主要有2个部分:抠图和渲染准备和渲染
1)、抠图:
(1)、用我们上文提到的INKSCOPE打开要操作的图片,这里为了方便,我直接截图了一份加拿大地图,如下:
![](https://img.haomeiwen.com/i3578821/b5bee1c10156d5b3.png)
(2)、打开选择任意参数:
![](https://img.haomeiwen.com/i3578821/7c3bf59386792eed.png)
(3)、图片打开后,我们会看到如下的内容
![](https://img.haomeiwen.com/i3578821/bc57f5487f08238b.png)
(4)、开始抠图(左侧导航栏的Shift+F6),如下图所示,可以抠出一个区域:
![](https://img.haomeiwen.com/i3578821/89765b760ba4dc9d.png)
抠图一个区域后,可以对该区域设置颜色和id信息,方便后面在highmaps中使用,依照次方法,抠出剩余的几个区域
![](https://img.haomeiwen.com/i3578821/3443fd4f4c8d012d.png)
抠图完成后,移除底图,用左侧最上面的箭头选中底图,拖走删除即可
![](https://img.haomeiwen.com/i3578821/15dc56b01ee33624.png)
至此,我们得到了一份简略版本的加拿大地图,把该图另存为SVG格式
2)、渲染准备
用notepad++等工具打开保存的SVG图片,可以查看到对应的XML代码,复制SVG代码到https://www.highcharts.com/studies/map-from-svg.htm中,load后,可以查看到我们抠出的区域图:
![](https://img.haomeiwen.com/i3578821/a71fa77917d57554.png)
3)、渲染:
View data:可以查看到对应的代码配置:
![](https://img.haomeiwen.com/i3578821/a967dcfb39bf095e.png)
复制代码,到highmaps的series配置中,配合Highmaps的参数,即可做出我们想要的地图:
![](https://img.haomeiwen.com/i3578821/6e6cfa6c2147919e.png)