634
Hello Openlayers
由於項目需要，需要用到geoserver和openlayers,再此將對openlayers的學習記錄下來。學習Openlayers的第一步是要熟悉javascript語法。
1.什麼是openlayers
OpenLayers是用於製作交互式Web地圖的開源客戶端JavaScript類庫，製作的地圖幾乎可以在所有的瀏覽器中查看。因為是客戶端類庫，它不需要特殊的服務器端軟件或配置，甚至不用下載任何東西就可以使用它。OpenLayers最初由Metacarta開發，現在它已經成為一個擁有眾多開發者和幫助社區的成熟、流行的框架。
2.Openlayers下載
2.1打開官網https://openlayers.org/，會看到如下界麵
可以看到openlayers最新版是3.0版，點擊下載，由於本人水平有限，下載了第三版不知道如何使用，又重新下了2.13.1版。
2.2 點擊如下圖所示.zip。下載openlayers2.13.1版
2.3 把下載到的openlayers壓縮包解壓縮，得到的文件夾如圖所示：
2.4 複製上麵圖中用矩形框框住的3個文件：img theme 和openlayers.js到一個新文件夾中，這裏取的是C盤下麵的code文件夾。拷貝完成後code文件夾的結構如下：
3.創建地圖
3.1在code文件夾中新建一個文件，此處為index.html
3.2打開index.html,編輯如下：
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<meta charset='utf-8' />
<title>My First OpenLayers Map</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>
var map;
function init() {
map = new OpenLayers.Map('map', {});
var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'https://vmap0.tiles.osgeo.org/wms/vmap0',
{
layers: 'basic'
},
{}
);
map.addLayer(wms);
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
</script>
</head>
<body >
<div id='map' style='width: 500px; height: 500px;'>
</div>
</body>
</html>4.顯示地圖用瀏覽器打開index.html文件，看到瀏覽器顯示如下，則說明顯示成功。
最後更新：2017-04-03 05:40:09