序
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)。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)