SVG地图制作规范

1、SVG地图制作规范整理CAD文件制作一张SVG地图通常是从CAD图开始的。我们能够拿到的原始地图主要是CAD格式的，因此先要对拿到的CAD图纸进行预处理。清理图层通常建筑CAD图纸中会有大量我们不需要的信息，比如水暖电的线路以及标注等等，这些与我们制作SVG地图无关，反而会干扰我们作图，所以要将这些没用的信息清除。标准的CAD图中，这些无用的信息都会归类在不同的图层上。CAD原始状态要清理这些图层，首先要把所有图层解冻并解锁，否则无法对其进行操作。然后找到无用图层上的一个元素，单击后可以看到他存在的图层，关闭该图层，然后寻找下一个无用的元素，直到干扰的图层都关闭为止。首先新建一个绘图图层，以免

2、和现有图层搞混，图层颜色可设置的明显一些，例如红色或黄色。如果原先的对象已经是闭合图形，则可以通过格式刷命令（MA）将对象刷至绘图图层。如果原先已有多条线围合的区域，但边框不为闭合的图形，则可通过查找边界命令（BO）来生成闭合多边形，然后将该图形归至绘图图层。如原图中存在路径不闭合或者路径有间隙的情况，则需要通过绘制多段线命令（PL）、矩形命令（REC）或者圆形命令（C）等来重新绘制图形。在绘制完成所有地图元素后，将除了绘图图层外的其他图层都关闭，检查是否有遗漏的元素。检查完毕后，将绘图图层写块（W）存成一个新的CAD文件。并确保所有新绘制的元素是闭合的图形，还要检查图形之间是否有空隙。检查完

3、毕后，用写块命令（W），将新图层单独存成独立的CAD文件。建立SVG图层打开写块得到的文件，在新的文件中按需要建立下列图层的部分或全部：SVG障碍物SVG商家SVG车位SVG厕所SVG服务台SVG现金处SVG自动扶梯SVG电梯SVG楼梯SVG围栏SVG轮廓为每个图层设置不同的图层颜色，便于绘图的时候区分。用查找边界命令（BO）为每个单独的区域生成独立的图形边界，然后用格式刷（MA）将各个图形归至对应的图层。然后删除原始的绘图图层，并保存。打开AI软件，在文件中打开（ctrl+O）刚刚保存的CAD文件。右键点击图形，选择“取消分组”，直到无法继续为止。按照地图配色规范中的配色要求，分别给各个图形

4、添加颜色和描边。可以通过吸管工具（I）快速的进行颜色和描边样式的复制。由于之前在CAD中，不同性质的图案已经用不同的描边颜色进行区分，所以可以通过“选择-相同-填色和描边”或者对应的快捷键来选中所有相同性质的图案，然后进行同一着色。商铺由于没有对应的类型信息，填色默认为白色（#000000）。将所有图形都按照规范着色后，要将各个图层按照类别进行排序。排序的规则参照以下规律：轮廓商户车位服务设施（厕所、服务台、现金处、自动扶梯、电梯、直梯、围栏）障碍物底图（由边框复制得到，形状与轮廓相同，但颜色与描边不同）排序后的地图效果就是最终的呈现效果，但为了方便后期修改和程序调用，还需对图形进行编组和命名

5、。首先将所有障碍物选中，然后编成一组（ctrl+G），然后将每个图形都单独编组。在图层面板中双击对应的编组，可以修改编组的名称。编组的命名规则如下：障碍物和边框不需要命名，默认为编组即可。商铺的命名规则为“楼层+3位数铺位号”，楼层的编码与网站上统一，为F1、F2、B1、B2等，铺位号则默认从001开始往后一次排序。“F3023”代表3楼第23个铺位、“B2105”代表地下2层105号铺位。车位的命名规则首先要符合商场的命名规范，如果商场本身没有车位名的，则参照商铺的命名规则来给车位命名。服务设施的命名规则为“类别代码+2位数代码”。类别代码规定为：cs=厕所fw=服务台xj=现金处ft=自动

6、扶梯dt=电梯上楼梯wl=围栏31=自动取款机例如，CS02就代表该楼层的第二个厕所，数字只是为了区分不同的图形，并没有实际意义。编组命名完成后，点击画板工具(shift+O),然后双击地图的轮廓，画板就自动调整编组命名完成后，点击画板工具为符合图形的大小。完成以上操作后，将文件保存为SVG格式。卜B100BoMB1007oMB1006okBl005oFBl004o卜Bl009okatoi0kdtO2o卜dtO3ocsO10OkLtOloO卜LtO2oOkLtO30OkLtO4oO卜LtO5QOkLtOe0O卜LtO7oO卜ftoio1在AI中命名的组完善SVG文件删除多余信息用NOTEPAD

7、+市开上述SVG文件。AI保存的SVG文件最开头的两行是多余的信息，没有实际作用，可以删除。然后删除多余的空格和回车，把每个g标签所包含的内容归到一行（障碍物除外）。为了便于观察，可以在障碍物编组、服务设施、商铺的代码之间加上一行回车。添加class属性手动为每个G标签添加class属性。每个类别的图形对应的class属性如下：障碍物：_area_obstacle商家：_area_merchant车位：_area_parking厕所：_area_toilet服务台：_area_service现金处：_area_cashier自动取款机：_area_atm自动扶梯：_area_escalator电梯：