圖 3?4顯示了基于MapGuide的Web應用程序的開發流程，整個開發流程能夠分為五個階段。圖中，矩形代表任務，橢圓形被任務使用的或被任務創建的實體，箭頭代表數據流。

1） 載入文件類型的數據，配置到外部數據庫的連接，通過聯接(Join)一個要素源到還有一個要素源擴展要素數據。

2） 通過引用要素源的數據和為要素應用樣式創建圖層。

3） 將圖層結合起來創建地圖。

4） 通過Internet或Intrant公布地圖，使用戶能夠通過client瀏覽地圖。

5） 使用MapGuide API為server端和client添加新的功能。

圖3?4 MapGuide應用程序開發流程

在開源版MapGuide的站點上，提供了美國威斯康辛州希博伊根（Sheboygan）縣的地圖數據（http://download.osgeo.org/mapguide/releases/2.0.0/samples/Sheboygan.mgp）供二次開發者學習和使用。該地圖數據是一個MapGuide資源包文件，它使用了zip文件格式，將它的文件后綴名改動為zip后能夠使用WinZip或WinRAR等壓縮軟件將當中的文件提取出來。使用MapGuide站點管理器(Site Administrator)能夠載入資源包，將資源包中包括數據、圖層、地圖等信息一次性地載入到MapGuideserver，詳細步驟請參考8.2.6.1。

本節中我們通過將該地圖數據公布到Internet，而且加入一個“Hello MapGuide”命令為例來介紹MapGuide的開發流程。為了具體介紹MapGuide的開發流程，我們須要將此資源包解壓縮，僅僅使用當中的SDF數據文件。解壓縮后該資源包文件后，會在文件夾“/Library/Samples/Sheboygan/Data”找到例如以下SDF文件。當中，“”代表解壓縮后文件的根文件夾。

l BuildingOutlines.FeatureSource_DATA_BuildingOutlines.sdf

l CityLimits.FeatureSource_DATA_CityLimits.sdf

l HydrographicLines.FeatureSource_DATA_HydrographicLines.sdf

l HydrographicPolygons.FeatureSource_DATA_HydrographicPolygons.sdf

l Islands.FeatureSource_DATA_Islands.sdf

l LandUse.FeatureSource_DATA_LandUse.sdf

l Parcels.FeatureSource_DATA_Parcels.sdf

l Rail.FeatureSource_DATA_Rail.sdf

l RoadCenterLines.FeatureSource_DATA_RoadCenterLines.sdf

l Soils.FeatureSource_DATA_Soils.sdf

l Trees.FeatureSource_DATA_Trees.sdf

l VotingDistricts.FeatureSource_DATA_VotingDistricts.sdf

1. 載入數據

在創建地圖之前，先須要讓MapGuideserver可以訪問數據，MapGuide Studio為此提供了三種方法。

l 載入文件類型的數據，如DWG、SHP、SDF或圖像文件，這樣的方式會將數據上傳到MapGuideserver的資源庫中，可以較快地訪問數據。

l 配置到SDF、SHP和圖像文件的連接，這樣的方式僅僅是在MapGuideserver的資源庫中保存一個到數據源的鏈接，能夠將數據報存在MapGuideserver或其它計算機上。

l 配置到數據庫或Web服務的連接，如Oracle、ArcSDE、SQL Server或WMS。

表 3?1 不同數據類型的訪問方式

本節中我們使用載入的方法，MapGuide Studio提供了載入過程(Load Procedure)來簡化數據的載入。載入過程本質上就是一些用于載入數據的腳本，你能夠使用載入過程將數據自己主動載入到server。載入過程中定義了原始數據的位置、轉化的規則、數據在server上的目標位置等信息。你可周期性地運行載入過程，更新server上文件類型的空間數據庫，以保證server上的數據是最新的。

載入Sheboygan地圖數據的過程例如以下：

1） 創建資源目錄“Samples/Sheboygan”。

為了有效地組織地圖數據，我們通常會創建一些資源目錄，將不同種類的資源放在不同的目錄下。在網站瀏覽器（Site xplorer）中選中根節點，選擇右鍵菜單“New -> Folder”，就能夠創建一個目錄。

2） 創建載入過程

選擇文件夾“/Library/Samples/Sheboygan/Data”下的全部SDF文件，拖拽它們到網站瀏覽器（Site Explorer）中資源文件夾“Samples/Sheboygan”，一個新的載入過程面板就出如今網站瀏覽器右方，它包括了要載入的文件列表，我們也能夠加入很多其它文件到這個文件列表中。最后，點擊“Load Resources”button，開始載入數據。

在新的載入過程面板中，“How Do You Want To Transform The Data”部分用于選擇數據的坐標系。一般而言，僅僅有在數據自身不包括坐標系信息的時候，才須要設置數據的坐標系，本演示樣例中無需設置此部分內容。“Where Do You Want To Load The Resources”部分用于選擇載入到的目標位置，本演示樣例中我們設置它的值為“Library://Samples/Sheboygan”。

圖 3?5 載入過程的用戶界面

3） 保存載入過程

假設打算周期性地運行載入過程，更新server上文件類型的空間數據庫，以保證server上的數據是最新的，那么須要保存這個新建的載入過程。點擊MapGuide Studio工具欄上的“Save”button，保存該載入過程。

2. 創建圖層

圖3?6 圖層編輯器的用戶界面

在使用載入過程載入Sheboygan地圖數據時，假設在“Where Do You Want To Load The Resources”部分選中了復選框“Layer(s)”，那么載入過程會在載入數據的同一時候創建圖層。假設沒有選中復選框“Layer(s)”，那么能夠使用MapGuide Studio的圖層編輯器能夠創建一個圖層。在圖層編輯器中，我們能夠為圖層創建樣式，也能夠預覽圖層數據，它的用戶界面如圖 3?6所看到的。

載入Sheboygan地圖數據創建圖層的過程例如以下：

1) 創建資源目錄“Samples/Sheboygan/Layers”。

右鍵點擊網站瀏覽器的目錄“Samples/Sheboygan”，選擇菜單“New->Folder”創建資源目錄“Layers”。

2) 創建圖層

首先，右鍵點擊新建資源目錄“Layers”，選擇菜單“New->Layer”打開圖層編輯器。然后，在“Data resource used in this layer”部分，選擇資源目錄“Samples/Sheboygan/Data”下的數據。

3) 保存圖層

點擊MapGuide Studio工具欄上的“Save”button，保存該圖層到資源目錄“Samples/Sheboygan/Layers”中。

如此重復，為資源目錄“Samples/Sheboygan/Data”下的每一個數據創建一個圖層。

3. 創建地圖

一張地圖能夠由一個或多個圖層組成，同一時候多張地圖能夠包括同一個圖層，使用地圖編輯器能夠創建和編輯一張地圖。為了有效地組織地圖中的圖層，我們還常常將多個圖層組織成一個圖層組。

載入Sheboygan地圖數據創建地圖的過程例如以下：

1) 創建資源目錄“Samples/Sheboygan/Maps”。

右鍵點擊網站瀏覽器的目錄“Samples/Sheboygan”，選擇菜單“New->Folder”創建資源目錄“Maps”。

2) 創建地圖

首先，右鍵點擊新建資源目錄“Maps”，選擇菜單“New->Map”打開圖層編輯器。然后，在“Layers”部分，點擊button創建一個圖層組“Base Map”。接著，選中新建的圖層組，點擊button加入選擇資源目錄“Samples/Sheboygan/Layers”的圖層到該圖層組。反復此操作，加入如圖 3?7所看到的的圖層組和圖層。

對于“Setting”部分的內容，一般不須要改動。MapGuide Studio會將地圖的坐標系（Coordinate System）設置為第一個增加的、帶坐標系的圖層的坐標系，而且會依據增加圖層的范圍（Extent）自己主動設置和改動地圖的初始視圖范圍（Initial View）。

3) 保存地圖

點擊MapGuide Studio工具欄上的“Save”button，將該地圖命名為“Sheboygan”，保存到資源目錄“Samples/Sheboygan/Maps”中。

圖3?7 地圖編輯器的用戶界面

4. 創建Web布局

當創建了一張地圖之后，你須要創建一個基本Web布局或靈活Web布局用于定義MapGuide Viewer的用戶界面和可用的操作，這樣用戶才可以通過Internet或Intranet瀏覽和操作地圖。基本Web布局支持DWF Viewer和AJAX Viewer，它是一種比較老的Web布局，提供了比較有限的功能定制Viewer的用戶界面。靈活Web布局是一個基于Fusion的Web布局，它使用模板來定義Viewer的用戶界面，用戶可以使用MapGuide Studio改動這些模板，它為用戶定制MapGuide Viewer的用戶界面提供了很大的靈活性。眼下，靈活Web布局僅僅支持Fusion Viewer。本節中，我們將分別為Sheboygan地圖創建一個基本Web布局和靈活Web布局。

為Sheboygan地圖創建基本Web布局的過程例如以下：

1) 創建資源目錄“Samples/Sheboygan/Layouts”。

右鍵點擊網站瀏覽器的目錄“Samples/Sheboygan”，選擇菜單“New->Folder”創建資源目錄“Layouts”。

2) 創建基本Web布局

首先，右鍵點擊新建資源目錄“Layouts”，選擇菜單“New->Web Layout->Basic Web Layout”打開基本Web布局編輯器。然后，在“Map resource used in this layout”部分，選擇在Web布局中顯示的地圖，一個基本Web布局僅僅能顯示一張地圖。本例中，我們選擇資源目錄“Samples/Sheboygan/Maps”下的地圖“Sheboygan”。

我們能夠依據須要改動“Setting”和“Toolbar and Menus”部分的內容，比如“Text for browser title bar”能夠用于設置瀏覽器中打開Viewer時標題欄中顯示的標題，“Display these components in the Viewer”用于設置Viewer中顯示那些組件。

3) 保存基本Web布局

點擊MapGuide Studio工具欄上的“Save”button，將該Web布局命名為“Basic Web Layout”，保存到資源目錄“Samples/Sheboygan/Layouts”中。

4) 預覽Web布局

點擊“Preview in browser using DWF Viewer”文本框右邊的“Go”button能夠使用DWF Viewer在瀏覽器中預覽Web布局；點擊“Preview in browser using AJAX Viewer”文本框右邊的“Go”button能夠使用AJAX Viewer在瀏覽器中預覽Web布局。用戶也能夠將文本框中的URL復制到瀏覽器的地址欄中，從而預覽此Web布局。

須要注意的是，假設要在瀏覽器中預覽Web布局，必須保存過該Web布局，瀏覽器中預覽的是最后一個版本號的Web布局。假設希望在沒有保存Web布局之前預覽該Web布局，僅僅能使用Web布局編輯器的“Web Preview”，點擊button就可以預覽它。

圖 3?8 基本Web布局編輯器的用戶界面

為Sheboygan地圖創建靈活Web布局的步驟與創建基本Web布局的步驟基本同樣，例如以下：

1) 創建資源目錄“Samples/Sheboygan/ FlexibleLayouts”。

右鍵點擊網站瀏覽器的目錄“Samples/Sheboygan”，選擇菜單“New->Folder”創建資源目錄“FlexibleLayouts”。

2) 創建靈活Web布局

首先，右鍵點擊新建資源目錄“FlexibleLayouts”，選擇菜單“New->Web Layout->Flexible Web Layout”打開靈活Web布局編輯器。然后，在“Select a template for the web layout”部分，為Web布局選擇一個模板，不同的模板定義了不同的Fusion Viewer的用戶界面風格。接著，選中“Config components of the selected components”部分的“Map”標簽，在“Map resource used in this layout”部分選擇資源目錄“Samples/Sheboygan/Maps”下的地圖“Sheboygan”。

我們能夠依據須要改動“Config components of the selected components”部分的內容，從而定制任務窗格、工具欄、圖例、右鍵菜單、選擇窗格、狀態欄用戶界面組件。

3) 保存靈活Web布局

點擊MapGuide Studio工具欄上的“Save”button，將該Web布局命名為“Aqua”，保存到資源目錄“Samples/Sheboygan/ FlexibleLayouts”中。

4) 預覽Web布局

點擊button“View in Browser…”，能夠使用Fusion Viewer在瀏覽器中預覽Web布局。用戶也能夠將文本框中的URL復制到瀏覽器的地址欄中，從而預覽此Web布局。

與基本Web布局同樣，假設要在瀏覽器中預覽Web布局，必須保存過該Web布局。假設希望在沒有保存Web布局之前預覽該Web布局，僅僅能使用Web布局編輯器的“Web Preview”，點擊button就可以預覽它。

圖 3?9 靈活Web布局編輯器的用戶界面

5. 創建MapGuide應用程序

記得在學習很多編程語言的時候，教授的第一個程序大多是“Hello, World!”，如今讓我們也體驗一下怎樣使用MapGuide實現你的第一個MapGuide應用程序——“Hello, MapGuide!”。 圖3?10顯示了這個程序在AJAX Viewer中的執行效果，點擊“Hello MapGuide”button，就會彈出一個對話框顯示字符串“Hello, MapGuide!”。

對于基本Web布局和靈活Web布局，實現上述功能的步驟不盡同樣，以下我們分別介紹怎樣在基本Web布局和靈活Web布局中實現這些功能。

圖3?10 “你好，MapGuide!”程序演示樣例在AJAX Viewer中的執行效果

5.1 在基本Web布局中創建“你好，MapGuide!”程序

在基本Web布局中創建“你好，MapGuide!”程序須要下面三步：

1） 創建自己定義命令“Hello MapGuide”。

MapGuide支持兩類自己定義命令“Invoke JavaScript”和“Invoke URL”。“Invoke JavaScript”用于調用JavaScript腳本，這寫JavaScript腳本有瀏覽器直接執行，主要用于和Viewer進行交互，可以調用Viewer API，屬于client命令；“Invoke URL”用于調用PHP、ASP.NET或JSP編寫的Webserver擴展頁面(Web Server Extensions Page)，這些Webserver擴展頁面可以調用MapGuide Web API，屬于Webserver端命令。

本節中，我們將使用“Invoke JavaScript”調用JavaScript函數alert(…)彈出一個“Hello, MapGuide!”對話框。

首先，在網站瀏覽器中選擇一個之前創建的基本Web布局，雙擊此節點打開基本Web布局編輯器。然后，點擊基本Web布局編輯器頭部的超鏈接“New Commands”，打開如圖3?11所看到的的用戶界面。接著，點擊下拉button“Add -> Invoke Script”創建一個“Invoke Script”類型的命令。最后，在“Additional Parameters”標簽頁中輸入JavaScript腳本“alert("Hello, MapGuide!");”。

普通情況下，我們還會為每一個命令賦予一個有意義的名稱、圖標、工具提示等，在“Setting”標簽頁中能夠改動這些命令屬性。本節中，我們將此命令命名為“Hello MapGuide”，設置工具提示為“Hello MapGuide”，圖標為默認圖標。

圖3?11 基本Web布局用于創建命令的用戶界面

2） 將“Hello MapGuide”命令加入到MapGuide Viewer的工具欄。

要調用這個新建的命令，須要將這個命令放置在工具欄、上下文菜單或任務欄菜單。本節中，我們將這個新建的命令放置在工具欄上。

首先，點擊基本Web布局編輯器頭部的超鏈接“Toolbar and Menus”，打開如圖3?12所看到的的用戶界面。接著，將右面命令列表中的“Hello MapGuide”命令拖拽到左面的工具欄樹形列表中。

圖3?12 加入命令到Viewer工具欄的用戶界面

3） 保存改動后的Web布局。

保存改動的Web布局后，拷貝“Preview in browser using DWF Viewer”文本框或“Preview in browser using AJAX Viewer”文本框中的URL復制到瀏覽器的地址欄中，就能夠使用DWF Viewer或AJAX Viewer在瀏覽器中執行該應用程序了。

5.2 在靈活Web布局中創建“你好，MapGuide!”程序

靈活Web布局提供了一系列Widget以實現一些通用的功能，通過對這些Widget進行簡單的定制能夠滿足用戶某些特定的需求，比如它提供了“Invoke Script”和“Invoke URL”Widget，這兩個Widget能夠實現和基本Web布局中“Invoke Script”和“Invoke URL”命令同樣的功能。本節中，我們使用“Invoke Script”Widget實現“你好，MapGuide!”程序。

在靈活Web布局中創建“你好，MapGuide!”程序須要下面三步：

1） 創建“Hello MapGuide”組件。

首先，在網站瀏覽器中選擇一個之前創建的靈活Web布局，雙擊此節點打開靈活Web布局編輯器，展開“Config components of the selected template”會顯示如圖3?13所看到的的用戶界面。然后，選擇“Toolbar (Primary)”標簽頁，點擊“Components available in this layout”部分的button“New”，會彈出如圖3?14所看到的的對話框。接著，選擇“Invoke Script”組件，點擊“OK”button將它增加當前Web布局。最后，在“Parameters for the selected item”部分的“ID”文本框中輸入新建組件的ID“Hello MapGuide”，“Script to invoke”文本框中輸入JavaScript腳本“alert("Hello, MapGuide!");”。假設須要，還能夠設置組件的工具提示、圖標等屬性信息。

圖3?13 靈活Web布局用于Viewer中組件的用戶界面

圖3?14 靈活Web布局用于創建新組件的用戶界面

2） 將“Hello MapGuide”命令加入到Fusion Viewer的工具欄。

在“Components available in this layout”中選中新建的“Hello MapGuide”組件，拖拽該組件到左面的“Items disaplayed in the container”列表中。

3） 保存改動后的Web布局。

保存改動的Web布局后，拷貝“Web address of this layout”文本框中的URL到瀏覽器的地址欄中，就能夠使用Fusion Viewer在瀏覽器中執行該應用程序了，執行結果如圖 3?15所看到的。

圖3?15 “你好，MapGuide!”程序演示樣例在Fusion Viewer中的執行效果