引言：基于网上的数据，我们可以很方便的用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的参数，即可做出我们想要的地图：
网友评论