引言：基于網(wǎng)上的數(shù)據(jù)，我們可以很方便的用highmaps、echarts等工具做一份中國(guó)的人口密度分布圖、各個(gè)國(guó)家的人數(shù)分布圖。如何做一個(gè)自定義的地圖呢？

實(shí)現(xiàn)這個(gè)功能也很簡(jiǎn)單，下面我們將一步一步的，看看如何實(shí)現(xiàn)這個(gè)功能

1、需要的工具和材料：

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

? ? 2）、要操作的地圖的圖片一份

? ? 3)、下載安裝inkscope(https://inkscape.org/en/,這是你唯一需要安裝的軟件)

2、操作步驟主要有2個(gè)部分：摳圖和渲染準(zhǔn)備和渲染

1)、摳圖：

（1）、用我們上文提到的INKSCOPE打開(kāi)要操作的圖片，這里為了方便，我直接截圖了一份加拿大地圖，如下：

(2)、打開(kāi)選擇任意參數(shù)：

(3)、圖片打開(kāi)后，我們會(huì)看到如下的內(nèi)容

(4)、開(kāi)始摳圖(左側(cè)導(dǎo)航欄的Shift+F6)，如下圖所示，可以摳出一個(gè)區(qū)域：

摳圖一個(gè)區(qū)域后，可以對(duì)該區(qū)域設(shè)置顏色和id信息，方便后面在highmaps中使用，依照次方法，摳出剩余的幾個(gè)區(qū)域

摳圖完成后，移除底圖,用左側(cè)最上面的箭頭選中底圖，拖走刪除即可

至此，我們得到了一份簡(jiǎn)略版本的加拿大地圖，把該圖另存為SVG格式

2)、渲染準(zhǔn)備

用notepad++等工具打開(kāi)保存的SVG圖片，可以查看到對(duì)應(yīng)的XML代碼,復(fù)制SVG代碼到https://www.highcharts.com/studies/map-from-svg.htm中，load后，可以查看到我們摳出的區(qū)域圖：

3)、渲染：

View data：可以查看到對(duì)應(yīng)的代碼配置：

復(fù)制代碼，到highmaps的series配置中，配合Highmaps的參數(shù)，即可做出我們想要的地圖：