這里簡單介紹一些基礎知識還讓如何基於OpenLayers加載電子地圖，邊學習邊記錄，希望自己能堅持下去！
1. OpenLayers
OpenLayers是一個用於開發WebGIS客戶端的JavaScript包，是一個開源的項目，其設計目的是為互聯網客戶端提供強大的地圖展示功能，包括地圖數據顯示與相關操作，並具有靈活的擴展機制。目前OpenLayers已經成為一個擁有眾多開發者和幫助社區的成熟、流行的框架。
在地圖數據以服務的方式提供的前提下，OpenLayers實習訪問地理空間數據的方法符合行業標准，支持各種公開的和私有的數據標准和資源。OpenLayers支持Open GIS協會制定的WMS、WFD等網絡服務規范，可以通過遠程服務的方式，將以OGC服務形式發布的地圖數據加載到基於瀏覽器的OpenLayers客戶端中進行顯示，目前OpenLayers所支持的數據格式有：XML JSON GML GeoRSS KML WFS WKT(Well-Known Text)等。
在OpenLayers里一個主要的概念就是Map，Map可以包含一些圖層，這些圖層既可以是矢量的，也可以是柵格的；柵格的圖片一般指航拍、遙感等技術得到的圖片，其本質就是一些照片，放大的時候圖片會有所失真，照片一般會攜帶一些信息比如降雨量等等；而矢量圖片是基於數學格式的，基於相應的坐標系勾畫出來的，一般包含點、線、面等幾何形式，圖片無論如何放大都不會失真。每個圖層的數據源可以是圖片，也可以是kml文件等。當然Map也包含一些控件，主要是交互所用的比如：平移、縮放、要素的選擇等等。
2. 加載地圖
要創建一個電子地圖應用，首先要創建一個地圖。這里介紹如何創建一個簡單的電子地圖應用。當然一些必要的基礎知識是需要的，比如 HTML，CSS ，Javascript 等是要學習的；
OpenLayers是主要是通過HTML和Javascript編寫的，所以我們得有一個編輯器，這個就很多了這里我使用的是Dreamweaver，當然你可以選擇更好的一些編輯器，它會高亮顯示語法和自動提示功能。
3. 去官網下載OpenLayers的源碼
下載地址http://www.openlayers.org/download/OpenLayers-3.19.1.zip（目前最新的）
解壓后里面有很多內容，其實我們只需要拷貝目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄 theme目錄 到自己的網站目錄下。
當然你也可以是使用OpenLayers中文官方站的api，加載地圖的速度也是很快的，即 http://www.openlayers.cn/olapi/OpenLayers.js
4. 編寫代碼加載地圖
下面我使用OpenLayers中文官方站的api 創建一個空的OpenLayersLoadMap.html文件
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用OpenLayers加載地圖</title>
<!-- 加載OpenLayers 類庫 -->
<script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js">
</script>
<style>
html,body{ width:100%; height:100%; margin:0; padding:0;}
</style>
<!-- 關鍵代碼在這里了 -->
<script type="text/javascript">
function init(){
//使用指定的文檔元素創建地圖
var map = new OpenLayers.Map("rcp1_map");
//創建一個OpenStreetMap raster layer
//創建一個OSM圖層，該層封裝了地圖服務地址，即服務調用URL
var osm = new OpenLayers.Layer.OSM();
//將已經建好的圖層添加到地圖容器中
map.addLayer(osm);
//設定視圖縮放地圖程度為最大
map.zoomToMaxExtent();
//添加地圖導航控件
map.addControl(new OpenLayers.Control.PanZoomBar());
}
</script>
</head>
<body onload="init()">
<div id="rcp1_map" style="width:100%; height:100%;"
</div>
</body>
</html>
5. 運行結果如下：
