如何利用Highmaps自定义地图

引言：基于网上的数据，我们可以很方便的用highmaps、echarts等工具做一份中国的人口密度分布图、各个国家的人数分布图。如何做一个自定义的地图呢？

实现这个功能也很简单，下面我们将一步一步的，看看如何实现这个功能

1、需要的工具和材料：

    1）、JS:highmaps.js,jquery.js

    2）、要操作的地图的图片一份

    3)、下载安装inkscope(https://inkscape.org/en/,这是你唯一需要安装的软件)

2、操作步骤主要有2个部分：抠图和渲染准备和渲染

1)、抠图：

（1）、用我们上文提到的INKSCOPE打开要操作的图片，这里为了方便，我直接截图了一份加拿大地图，如下：

(2)、打开选择任意参数：

(3)、图片打开后，我们会看到如下的内容

(4)、开始抠图(左侧导航栏的Shift+F6)，如下图所示，可以抠出一个区域：

抠图一个区域后，可以对该区域设置颜色和id信息，方便后面在highmaps中使用，依照次方法，抠出剩余的几个区域

抠图完成后，移除底图,用左侧最上面的箭头选中底图，拖走删除即可

至此，我们得到了一份简略版本的加拿大地图，把该图另存为SVG格式

2)、渲染准备

用notepad++等工具打开保存的SVG图片，可以查看到对应的XML代码,复制SVG代码到https://www.highcharts.com/studies/map-from-svg.htm中，load后，可以查看到我们抠出的区域图：

3)、渲染：

View data：可以查看到对应的代码配置：

复制代码，到highmaps的series配置中，配合Highmaps的参数，即可做出我们想要的地图：