前言

要在網站應用中加入互動式地圖介面Google Maps API是一般最常見的選擇，使用 Google MapsAPI可以讓你迅速、輕鬆地將互動式地圖加入至網站應用中。但是因此要顯示其它地圖資料的功能也就被限制住了。若你想顯示自有的資料，或其它並非來自 Google 的資料，OpenLayers 可以提供你更多選擇。

OpenLayers簡介

OpenLayers是一套開放源碼的 JavaScript 函式庫。最大的特色是：使用OpenLayers可以很容易的使用各種地圖資料，包括Google Maps、Yahoo Maps、Bing Maps與Open Street Map，也支援Web Map Service、GeoRSS、KML、GML, 與 GeoJSON等各種圖資格式，並提供非常豐富的地圖操作介面及元件，而且是實實在在的開放式軟體，不用擔心未來在使用上會碰到收費的問題。接下來筆者將對Open Layers做一些簡單的介紹，讓各位對它有一些概念。

網頁上看到的動態地圖組成上分成兩個部分：操控介面和地圖圖資，Open Layers屬於前者，只有提供操控的介面，而地圖圖資則是透過Open Layers提供的函式庫，可以向Google 或者 Yahoo下載圖資。由於Open Layers是一個JavaScript語言構成的套件，所以在開始使用Open Layers之前，讀者要有JavaScript和JSON的基礎概念，當然也得有使用FireBug工具的技巧。接下來筆者挑兩個Open Layers文件上面的例子來做說明，讓讀者們能有比較實際的瞭解。

一、多個Layers之間的轉換：

這是一個擁有三個基礎地圖圖層的例子，可以透過Radio Button來選擇要顯示哪一個圖層，資料來源是Bing Map，這是一個Microsoft的地圖圖資，對應的部分程式碼如下：



完整程式連結：http://openlayers.org/dev/examples/bing.html

二、選擇不同的地圖圖資以及對應的小地圖：



這個例子有多種功能，對應的部分程式碼如下：



完整程式連結：http://openlayers.org/dev/examples/controls.html

結語

本文兩個例子僅只介紹整個Open Layers所提供功能當中的一小部分，也只有簡單的基本顯示功能，其他還有像是在地圖上做繪圖的功能、透過滑鼠拖曳選取特定範圍、把圖片貼到地圖上面等等，筆者因應案子的需求，也正在瞭解當中；透過Open Layers 提供的例子，可以更快速且有效的瞭解使用方法，再佐以函式庫的使用說明文件，用起來將會更加順手，有興趣的讀者不妨到Open Layers的官方網站做更深入的閱讀以及了解，當需要在網頁上嵌入地圖的時候，就可以多一種操控介面的選擇。