資訊爆炸催生新技術協助消化海量資料。多數人對圖形化資料處理較佳。地理資料(本例用美國人口普查資料)可借助 Google Maps 替代傳統 GIS 視覺化呈現。搜尋 "google maps" 有 6900 萬+ 結果,本文專注 PHP、Informix、DB2 與 Linux 整合,代碼清晰且由年僅 14 歲程式設計師提供。
範例基於人口普查資料。搜尋畫面提供表單輸入郵遞區號。結果頁顯示所選郵遞區號與相鄰區域人口密度,以彩色「大頭針」標示。滑鼠左鍵拖曳移動地圖,左上角縮放控制項調整比例。
清單 1. 範例資料(清理後)
state AL
zip 35004
longitude -86.502492000000
latitude 33.6063790000000
population 6998
housingunits 2815
sqmeters 49387881
... (更多州別資料)
清單 2. 資料庫結構描述
Column name Type
state char(2)
zip char(5)
longitude decimal(16)
latitude decimal(16)
population integer
housingunits integer
sqmeters int8
圖 1. 搜尋頁面(首次載入)

圖 2. 郵遞區號 02222 搜尋結果(不同人口密度彩色標記、右側文字清單、縮放控制、資訊視窗顯示詳細資訊)

如何依搜尋條件從資料庫取得記錄並呈現如圖 1、2 的畫面?資料源與 Google Maps API 結合稱為「mashup」。圖 3 展示伺服器架構:

核心概念:不同資料源在瀏覽器端整合。客戶端瀏覽器可承載資料大小限制對成功至關重要——若客戶需大量資料,網路限制與處理器速度會嚴重挫傷使用意願。
架構流程:瀏覽器請求 → Apache Web 伺服器 → PHP 頁面含 HTML/JavaScript → JavaScript 呼叫 Google Maps 伺服器 → 組合頁面呈現。輸入郵遞區號後,請求傳至使用 PHP ODBC 連接後端 Informix 資料庫的 Web 伺服器。本文代碼說明 Informix 用法;DB2 與 PHP 整合請參考「DB2 與開源碼:用 DB2、PHP、Linux 實現 Web 投票」。
所需資料從資料庫檢索,大頭針顏色依色譜顯示人口密度,選擇人口範圍獲取近似數量。
Google API、JavaScript、Ajax 構成應用主體。Google Maps API 需特定網站目錄金鑰:登錄 www.google.com/apis/maps 點擊 "Sign up for a Google Maps API key" 獲取。API 提供 Ajax HttpRequest 類與事件處理控制項。Google 提供完善文件。Ajax 為 JavaScript 與 XML 結合的想像力縮寫。呼叫 Ajax 解析 PHP 回傳 HTML,無需重新整理瀏覽器。主流瀏覽器(Firefox、IE6+)支援 JavaScript 與 Google API;舊版瀏覽器可能不支援部分 CSS。
中間層提供網頁、執行環境、資料庫存取。Apache 佔 70%+ 網站份額,支援外掛模組,使用 mod_php 提供 PHP 執行環境。命令列 php 可測試腳本;Apache + mod_php 處理程式碼執行與傳送。ODBC 早期效能差,現今大幅改善、提供良好可移植性。亦有支援 DB2/Informix 原生存取的庫檔(特定於客戶端 API)。
IBM 官網介紹:DB2 族群提供靈活具成本效益平台建構健壯隨需應變應用;Informix 族群針對交易密集環境提供高階應用效能(作者多年使用 Informix,證明其在資料倉庫/決策支援系統表現優異)。本文以 Informix 為例;DB2 實作參考作者其他文章。
清單 3
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\"?>";
$newloc = $_GET['location'];
$dbname = "census"; $username = "informix"; $password = "useyourown";
$conn = odbc_pconnect($dbname, $username, $password);
if ($conn == 0) { echo "Connection to database failed."; die(odbc_errormsg($conn)); }
$sql = "select longitude, latitude, zip from census_data where zip = '$newloc'";
$locResult = odbc_exec($conn, $sql);
$locData = odbc_fetch_object($locResult);
echo "\n<Results>";
if ($locData->latitude != "") {
echo "\n\t<Zip>";
echo "\n\t\t<Latitude>$locData->latitude</Latitude>";
echo "\n\t\t<Longitude>$locData->longitude</Longitude>";
echo "\n\t</Zip>";
}
echo "\n</Results>";
?>
連接名為 census 的 ODBC 資料源(Informix + unixODBC 配置,教程見 unixODBC 官網)。易轉換為 DB2。輸出優美 XML,Results 根標籤含 Zip、Latitude、Longitude。若無結果則 Results 內無 Zip。清單 4 為輸入 02222 (Boston, MA) 的範例輸出。
清單 5
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\"?>";
$dbname = "census"; $username = "informix"; $password = "useyourown";
$conn = odbc_pconnect($dbname, $username, $password);
if ($conn == 0) { echo "Connection to database failed."; die(odbc_errormsg($conn)); }
$sql = "select * from census_data where longitude > '$_POST[left]'
and longitude < '$_POST[right]'
and latitude > '$_POST[bottom]'
and latitude < '$_POST[top]'";
$locResult = odbc_exec($conn, $sql);
echo "\n<Results>";
while ($locData = odbc_fetch_object($locResult)) {
echo "\n\t<Zip>";
echo "\n\t\t<Code>$locData->zip</Code>";
echo "\n\t\t<State>$locData->state</State>";
echo "\n\t\t<Latitude>$locData->latitude</Latitude>";
echo "\n\t\t<Longitude>$locData->longitude</Longitude>";
echo "\n\t\t<Population>$locData->population</Population>";
echo "\n\t\t<Housing>$locData->housingunits</Housing>";
echo "\n\t\t<Area>$locData->sqmeters</Area>";
echo "\n\t</Zip>";
}
echo "\n</Results>";
?>
XML 結構類似腳本 1,但通常回傳多個 Zip。while 迴圈逐行輸出所有資料庫欄位。關鍵在 SQL 查詢:Ajax 使用 POST 傳送 left、right、bottom、top 四變數定義地圖可視邊界(經緯度),僅查詢邊界內郵遞區號,避免不必要頻寬、降低伺服器負載、縮短回應時間。
清單 6 含三部分:
<head>,定義 <div> 使用的類別,賦予頁面外觀、配色、版面組織GXMLHttp.create()(Google Maps API 內建 HttpRequest 類),為更新地圖與大多數 Ajax 應用的控制中心。請求發送至 PHP、收到 XML 後,搜尋所有 Zip 標籤,逐個加入地圖標記,並添加事件監聽器處理點擊標記事件(同為 API 內建)。另一重要監聽器:地圖移動完成後初始化,檢查縮放等級(避免超過 6 級導致頻寬過大/回應過慢),更新地圖與側欄或提示使用者縮放過度。地理資料顯示可能性僅受想像力限制。本文架構與方法可應用於任何自選資料。希望對您有用,歡迎依自建 mashup 經驗提供回饋。