imagemapster的一次实战

业务需求

大屏展示中的地图，需要将地图按照行政区划显示不同的颜色，并且可以点击

svg

需要一个svg的原图，并通过svg2imagemap-master将其path坐标转为area坐标，这样就可以将area复制到项目的map标签中

实战代码

美工先画一个原型图，每个区域之间是透明的

再将原型图通过在线转换成svg
在线转换地址
https://www.vectorizer.io/

将svg转换为imagemap坐标
转换工具为：

复制area到代码中

    <img id="imgMap" usemap="#myMap" src="/1.svg"
                     style="height:900px;width: 900px">
 <map name="myMap" id="myMap">
   <area data-area="area1" shape="poly" href="#"
coords="985.8000000000001,1830,985.8000000000001,1830,985.4249001187777>

....多个area区域
</map>

最后为每个区域填充颜色和绑定事件

var areaparams= [
                {key: 'area1', staticState: true, fillColor: '650000'},
                {key: 'area2', staticState: true, fillColor: 'c80000'},
                {key: 'area3', staticState: true, fillColor: 'fb0237'},
                {key: 'area4', staticState: true, fillColor: 'd307b3'}
                ....多个区域
                ]
 $('#imgMap').mapster({
       mapKey: 'data-area',
         stroke: true,
         onClick: function (data, data2) {
            //绑定点击事件
         },
         areas: areaparams //每个区域的参数
     });