地图点击区域高亮 vue_像素化地图生成器（Pixel Map Generator）

Pixel Map Generator是一种简单的线上地图像素化生成器，美观大方的界面为用户带来直观出彩的视觉冲击。Pixel Map Generator可获取地图，对地图进行解释说明，根据需求添加坐标和线条注记，并对不同的地区设置不同配色，最重要的是能够将地图像素化，无论作为行程规划还是作为普通地图展示，其效果都非常好。Pixel Map Generator

Pixel Map Generator界面

Pixel Map Generator 具备非常完善的在线地图资源，在界面下方通过Choose map选择国家或地区，在Projection选择所需的地图投影(如下图)，就可以加载该地的地图区域。

以USA为例，地图切换到美国，各州之间有明显的划分。在地图下方设置海洋和陆地的颜色，并对California进行突出显示，默认地图投影为Mercator投影。

接着利用左侧的工具栏，开始对地图内容进行编辑，这些工具都非常简单易上手。工具栏主要提供了上色、图标、线条与文字功能。

利用图标工具可以在地图上添加图标，并能对图标进行颜色和大小的更改。

利用线条工具可以添加线条，并能对线条的宽度、虚线程度、弯曲程度进行更改，还能利用箭头指示方向。

同时利用图标工具和线条工具，可以得到飞行路线图。如下图，选中Californiad、Alaska和Mississippi，添加小指针图标。利用线条工具，分别点击起止点，在地图上得到如下图路线，用以表示飞行路线、行程等。

利用文字工具可以添加文字。文字功能十分基本，花样不多。

Pixel Map Generator最大的亮点就是其名字中的“Pixel”：像素化处理地图，效果如下：

在界面下方选定地图后设置好各种属性，其中像素的形状、大小和颜色可以根据需要设置，然后按下蓝色的“GeneratePixel Map”即可像素化地图。我们设置三种不同颜色和像素大小，得到以上三张效果图。

注意：像素化处理会抹去行政区划的边界。因此，我们要将选定区域高亮设色显示，才能更直观展现。像素化处理后，每一个要素都是独立的，可以对其单独调整，改变其像素形状、间隔、大小。

另外，网站还提供了SVG、HTML、IMAGE三种导出格式，方便后续编辑。

轻松上手设计制作地图，大家不妨试试(以上教程由付荣亲测、撰写)。

欢迎关注“地图可视化”微信公众号！