SVG地圖制作規(guī)范

1、SVG地圖制作規(guī)范整理CAD文件制作一張SVG地圖通常是從CAD圖開始的。我們能夠拿到的原始地圖主要是CAD格式的，因此先要對拿到的CAD圖紙進行預處理。清理圖層通常建筑CAD圖紙中會有大量我們不需要的信息，比如水暖電的線路以及標注等等，這些與我們制作SVG地圖無關，反而會干擾我們作圖，所以要將這些沒用的信息清除。標準的CAD圖中，這些無用的信息都會歸類在不同的圖層上。CAD原始狀態(tài)要清理這些圖層，首先要把所有圖層解凍并解鎖，否則無法對其進行操作。然后找到無用圖層上的一個元素，單擊后可以看到他存在的圖層，關閉該圖層，然后尋找下一個無用的元素，直到干擾的圖層都關閉為止。首先新建一個繪圖圖層，以免

2、和現有圖層搞混，圖層顏色可設置的明顯一些，例如紅色或黃色。如果原先的對象已經是閉合圖形，則可以通過格式刷命令（MA）將對象刷至繪圖圖層。如果原先已有多條線圍合的區(qū)域，但邊框不為閉合的圖形，則可通過查找邊界命令（BO）來生成閉合多邊形，然后將該圖形歸至繪圖圖層。如原圖中存在路徑不閉合或者路徑有間隙的情況，則需要通過繪制多段線命令（PL）、矩形命令（REC）或者圓形命令（C）等來重新繪制圖形。在繪制完成所有地圖元素后，將除了繪圖圖層外的其他圖層都關閉，檢查是否有遺漏的元素。檢查完畢后，將繪圖圖層寫塊（W）存成一個新的CAD文件。并確保所有新繪制的元素是閉合的圖形，還要檢查圖形之間是否有空隙。檢查完

3、畢后，用寫塊命令（W），將新圖層單獨存成獨立的CAD文件。建立SVG圖層打開寫塊得到的文件，在新的文件中按需要建立下列圖層的部分或全部：SVG障礙物SVG商家SVG車位SVG廁所SVG服務臺SVG現金處SVG自動扶梯SVG電梯SVG樓梯SVG圍欄SVG輪廓為每個圖層設置不同的圖層顏色，便于繪圖的時候區(qū)分。用查找邊界命令（BO）為每個單獨的區(qū)域生成獨立的圖形邊界，然后用格式刷（MA）將各個圖形歸至對應的圖層。然后刪除原始的繪圖圖層，并保存。打開AI軟件，在文件中打開（ctrl+O）剛剛保存的CAD文件。右鍵點擊圖形，選擇“取消分組”，直到無法繼續(xù)為止。按照地圖配色規(guī)范中的配色要求，分別給各個圖形

4、添加顏色和描邊?？梢酝ㄟ^吸管工具（I）快速的進行顏色和描邊樣式的復制。由于之前在CAD中，不同性質的圖案已經用不同的描邊顏色進行區(qū)分，所以可以通過“選擇-相同-填色和描邊”或者對應的快捷鍵來選中所有相同性質的圖案，然后進行同一著色。商鋪由于沒有對應的類型信息，填色默認為白色（#000000）。將所有圖形都按照規(guī)范著色后，要將各個圖層按照類別進行排序。排序的規(guī)則參照以下規(guī)律：輪廓商戶車位服務設施（廁所、服務臺、現金處、自動扶梯、電梯、直梯、圍欄）障礙物底圖（由邊框復制得到，形狀與輪廓相同，但顏色與描邊不同）排序后的地圖效果就是最終的呈現效果，但為了方便后期修改和程序調用，還需對圖形進行編組和命名

5、。首先將所有障礙物選中，然后編成一組（ctrl+G），然后將每個圖形都單獨編組。在圖層面板中雙擊對應的編組，可以修改編組的名稱。編組的命名規(guī)則如下：障礙物和邊框不需要命名，默認為編組即可。商鋪的命名規(guī)則為“樓層+3位數鋪位號”，樓層的編碼與網站上統(tǒng)一，為F1、F2、B1、B2等，鋪位號則默認從001開始往后一次排序?！癋3023”代表3樓第23個鋪位、“B2105”代表地下2層105號鋪位。車位的命名規(guī)則首先要符合商場的命名規(guī)范，如果商場本身沒有車位名的，則參照商鋪的命名規(guī)則來給車位命名。服務設施的命名規(guī)則為“類別代碼+2位數代碼”。類別代碼規(guī)定為：cs=廁所fw=服務臺xj=現金處ft=自動

6、扶梯dt=電梯上樓梯wl=圍欄31=自動取款機例如，CS02就代表該樓層的第二個廁所，數字只是為了區(qū)分不同的圖形，并沒有實際意義。編組命名完成后，點擊畫板工具(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電梯：