序
OpenLayers 是一個專為Web GIS 客戶端開發提供的JavaScript 類庫包，用於實現標准格式發布的地圖數據訪問。
例子
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="../css/ol.css"> <?--鏈接一個外部樣式表-->
<style>
.map2 { <?--前邊的點必不可少-->
height: 400px;
width: 100%;
}
</style>
<script src="../build/ol.js"></script> <?--鏈接一個外部腳本文件-->
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map2"></div> <?--ID如人的身份證，唯一標示（1對1）。Class如人穿的衣服，用於定義這個DIV的樣式（n對1），這里用到了上面stype定義的map2樣式-->
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>
運行圖示
為了調用map，一個web頁面需要做3件事情：
- 調用OpenLayers
- <div>map容器 (<div>標簽用來定義文檔中的分區或節)
- JavaScript新建map
調用OpenLayers
第一部分是調用JavaScript庫。
<script src="../css/ol.js" type="text/javascript"></script>
<div>用來包含地圖
<div id="map" class="map"></div>
map包含在html的<div></div>內。通過<div>地圖的屬性如長度、寬度、邊框等通過css控制。該例中css設定地圖的高度和寬度都為400像素。
<style> .map { height: 400px; width: 100%; }
</style>
JavaScript來創建map
<script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }) ], view: new ol.View({ center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), zoom: 4 }) }); </script>
步驟一：通過以下代碼創建一個OpenLayers的Map對象，這里只是單純的建立一個對象，由於沒有圖層信息和交互所以沒有其他任何信息。
var map = new ol.Map({ ... });
步驟二：為了把map對象和<div>信息關聯起來，map對象通過target作為它的參數，其值為<div>中的id
target: 'map'
步驟三：layers:[ ... ]數組用來定義map中可用的圖層列表。
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
]
本例的圖層用一個類型(Image，Tile或Vector)來定義，它包含了一個源。【參考available layer sources here】
步驟四：map對象的下一部分是View。通過View可以指定中心、分辨率、旋轉等信息。最簡單的設置方式是指定中心點和縮放級別。注：縮放級別為0表示“縮小”。
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
這里指定的中心點是經緯坐標(EPSG:4326)。
原文：鏈接