SVG地图制作规范

2024年2月6日发(作者：)

SVG地图制作规范

1. 整理CAD文件

制作一张SVG地图通常是从CAD图开始的。我们能够拿到的原始地图主要是CAD格式的，因此先要对拿到的CAD图纸进行预处理。

1.1. 清理图层

通常建筑CAD图纸中会有大量我们不需要的信息，比如水暖电的线路以及标注等等，这些与我们制作SVG地图无关，反而会干扰我们作图，所以要将这些没用的信息清除。标准的CAD图中，这些无用的信息都会归类在不同的图层上。

CAD原始状态

要清理这些图层，首先要把所有图层解冻并解锁，否则无法对其进行操作。然后找到无用图层上的一个元素，单击后可以看到他存在的图层，关闭该图层，然后寻找下一个无用的元素，直到干扰的图层都关闭为止。

1.2.

首先新建一个绘图图层，以免和现有图层搞混，图层颜色可设置的明显一些，例如红色或黄色。

如果原先的对象已经是闭合图形，则可以通过格式刷命令（MA）将对象刷至绘图图层。

如果原先已有多条线围合的区域，但边框不为闭合的图形，则可通过查找边界命令（BO）来生成闭合多边形，然后将该图形归至绘图图层。

如原图中存在路径不闭合或者路径有间隙的情况，则需要通过绘制多段线命令（PL）、矩形命令（REC）或者圆形命令（C）等来重新绘制图形。

在绘制完成所有地图元素后，将除了绘图图层外的其他图层都关闭，检查是否有遗漏的元素。检查完毕后，将绘图图层写块（W）存成一个新的CAD文件。

并确保所有新绘制的元素是闭合的图形，还要检查图形之间是否有空隙。

检查完毕后，用写块命令（W），将新图层单独存成独立的CAD文件。

1.3. 建立SVG图层

打开写块得到的文件，在新的文件中按需要建立下列图层的部分或全部：

SVG障碍物

SVG商家

SVG车位

SVG厕所

SVG服务台

SVG现金处

SVG自动扶梯

SVG电梯

SVG楼梯

SVG围栏

SVG轮廓

为每个图层设置不同的图层颜色，便于绘图的时候区分。

用查找边界命令（BO）为每个单独的区域生成独立的图形边界，然后用格式刷（MA）将各个图形归至对应的图层。然后删除原始的绘图图层，并保存。

2.

打开AI软件，在文件中打开（ctrl+O）刚刚保存的CAD文件。右键点击图形，选择“取消分组”，直到无法继续为止。

按照《地图配色规范》中的配色要求，分别给各个图形添加颜色和描边。可以通过吸管工具（I）快速的进行颜色和描边样式的复制。

由于之前在CAD中，不同性质的图案已经用不同的描边颜色进行区分，所以可以通过“选择-相同-填色和描边”或者对应的快捷键来选中所有相同性质的图案，然后进行同一着色。商铺由于没有对应的类型信息，填色默认为白色（#000000）。

将所有图形都按照规范着色后，要将各个图层按照类别进行排序。排序的规则参照以下规律：

轮廓＞商户＞车位＞服务设施（厕所、服务台、现金处、自动扶梯、电梯、直梯、围栏）＞障碍物＞底图（由边框复制得到，形状与轮廓相同，但颜色与描边不同）

排序后的地图效果就是最终的呈现效果，但为了方便后期修改和程序调用，还需对图形进行编组和命名。

首先将所有障碍物选中，然后编成一组（ctrl+G），然后将每个图形都单独编组。在图层面板中双击对应的编组，可以修改编组的名称。编组的命名规则如下：

障碍物和边框不需要命名，默认为＜编组＞即可。

商铺的命名规则为“楼层+3位数铺位号”，楼层的编码与网站上统一，为F1、F2、B1、

B2等，铺位号则默认从001开始往后一次排序。“F3023”代表3楼第23个铺位、“B2105”

代表地下2层105号铺位。

车位的命名规则首先要符合商场的命名规范，如果商场本身没有车位名的，则参照商铺的命名规则来给车位命名。

服务设施的命名规则为“类别代码+2位数代码”。类别代码规定为：

cs=厕所

fw=服务台

xj=现金处

ft=自动扶梯

dt=电梯

上楼梯

wl=围栏

31=自动取款机

例如，CS02就代表该楼层的第二个厕所，数字只是为了区分不同的图形，并没有实际意义。

编组命名完成后，点击画板工具

为符合图形的大小。

(shift+O),然后双击地图的轮廓，画板就自动调整

完成以上操作后，将文件保存为SVG格式。

卜■B100B

o

©

M■B1007

M■B1006

k■Bl005

©

F■Bl004

卜■Bl009

o

o

o

o

o

0

o

k■atoi

©

k■dtO2

卜■dtO3

©

o

0

>csO1

k■LtOl

卜■LtO2

O

O

O

O

O

O

O

O

o

o

0

k■LtO3

k■LtO4

卜■LtO5

o

Q

0

k■LtOe

卜■LtO7

卜■ftoi

o

o

在AI中命名的组

1

3. 完善SVG文件

3.1. 删除多余信息

用NOTEPAD+市开上述SVG文件。AI保存的SVG文件最开头的两行是多余的信息，没有实际作用，可以删除。然后删除多余的空格和回车，把每个＜g＞标签所包含的内容归到一行（障碍物除外）。为了便于观察，可以在障碍物编组、服务设施、商铺的代码之间加上一行回车。

3.2. 添加class属性

手动为每个＜G＞标签添加class属性。每个类别的图形对应的class属性如下：

障碍物：_area_obstacle

商家：_area_merchant

车位：_area_parking

厕所：_area_toilet

服务台：_area_service

现金处：_area_cashier

自动取款机：_area_atm

自动扶梯：_area_escalator

电梯：_area_elevator

直梯：_area_stair

围栏：_area_fence

轮廓：_area_background

整理并添加属性后的代码

添加属性后，就得到了一张完整可用的SVG图片，保存该文件并上传到CMS后台。