OpenLayers 3 入門教程

時間 2019-11-26

標籤 openlayers 入門教程简体版

原文原文鏈接

OpenLayers 3 入門教程
摘要
OpenLayers 3對OpenLayers網絡地圖庫進行了根本的從新設計。版本2雖然被普遍使用，但從JavaScript開發的早期發展階段開始，已日益現實出它的落後。 OL3已運用現代的設計模式從底層重寫。javascript

最初的版本旨在支持第2版提供的功能，提供大量商業或免費的瓦片資源以及最流行的開源矢量數據格式。與版本2同樣，數據能夠被任意投影。最初的版本還增長了一些額外的功能，如可以方便地旋轉地圖以及顯示地圖動畫。css

OpenLayers 3同時設計了一些主要的新功能，如顯示三維地圖，或使用WebGL快速顯示大型矢量數據集，這些功能將在之後的版本中加入。html

目錄
基本概念 4
Map 4
View 4
Source 5
Layer 5
總結 6
Openlayers 3實踐 7
1 地圖顯示 7
1.1建立一副地圖 7
1.2 剖析你的地圖 8
1.3 Openlayers的資源 11
2 圖層與資源 12
2.1 網絡地圖服務圖層 12
2.2 瓦片緩存 14
2.3 專有柵格圖層（Bing） 18
2.4 矢量圖層 20
2.5 矢量影像 23
3 控件與交互 24
3.1 顯示比例尺 24
3.2 選擇要素 26
3.3 繪製要素 29
3.4 修改要素 31
4 矢量樣式 33
4.1矢量圖層格式 33
4.2矢量圖層樣式 35
4.3 設置矢量圖層的樣式 38java

基本概念

Map
OpenLayers 3的核心部件是Map（ol.Map）。它被呈現到對象target容器（例如，包含在地圖的網頁上的div元素）。全部地圖的屬性能夠在構造時進行配置，或者經過使用setter方法，如setTarget（）。
<div id="map" style="width: 100%, height: 400px"></div>
<script>
var map = new ol.Map({target: 'map'});
</script>git

View
ol. View負責地圖的中心點，放大，投影之類的設置。
一個ol.View實例包含投影projection，該投影決定中心center 的座標系以及分辨率的單位，若是沒有指定（以下面的代碼段），默認的投影是球墨卡託（EPSG：3857），以米爲地圖單位。
放大zoom 選項是一種方便的方式來指定地圖的分辨率，可用的縮放級別由maxZoom （默認值爲28）、zoomFactor （默認值爲2）、maxResolution （默認由投影在256×256像素瓦片的有效成都來計算）決定。起始於縮放級別0，以每像素maxResolution 的單位爲分辨率，後續的縮放級別是經過zoomFactor區分以前的縮放級別的分辨率來計算的，直到縮放級別達到maxZoom 。
map.setView(new ol.View({
center: [0, 0],
zoom: 2
}));

Source
OpenLayers 3使用ol.source.Source子類獲取遠程數據圖層，包含免費的和商業的地圖瓦片服務，如OpenStreetMap、Bing、OGC資源（WMS或WMTS）、矢量數據（GeoJSON格式、KML格式…）等。
var osmSource = new ol.source.OSM();程序員

Layer
一個圖層是資源中數據的可視化顯示，OpenLayers 3包含三種基本圖層類型：ol.layer.Tile、ol.layer.Image 和 ol.layer.Vector。
ol.layer.Tile 用於顯示瓦片資源，這些瓦片提供了預渲染，而且由特定分別率的縮放級別組織的瓦片圖片網格組成。
ol.layer.Image用於顯示支持渲染服務的圖片，這些圖片可用於任意範圍和分辨率。
ol.layer.Vector用於顯示在客戶端渲染的矢量數據。
var osmLayer = new ol.layer.Tile({source: osmSource});
map.addLayer(osmLayer);
總結
上述片斷能夠合併成一個自包含視圖和圖層的地圖配置：
<div id="map" style="width: 100%, height: 400px"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map'
});
</script>github

Openlayers 3實踐
1 地圖顯示
1.1建立一副地圖
在openlayers中，Map是圖層、各類交互以及處理用戶交互控件的集合，地圖由三個基本成分生成：標記，樣式聲明和初始化代碼。如下是一個完整的OpenLayers3地圖示例。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
（1）下載https://github.com/openlayers/ol3-workshop/archive/resources.zip，並將該文件夾放在網絡服務器的根目錄下；
（2）建立一個新的文件，命名爲map.html，將以上代碼複製進該文件後放入下載的文件夾的根目錄下；
（3）在瀏覽器中輸入：http://localhost:8000/ol_workshop/map.html，咱們將打開一個工做的地圖。

成功地建立了第一張地圖，咱們將繼續關注地圖的組成部分，詳見1.2 。
1.2 剖析你的地圖
正如前一部分演示的那樣，一副地圖經過將標記，樣式聲明和初始化代碼三部分組織在一塊兒而生成，接下來將詳細的介紹這三個組成部分。
1.2.1 地圖標記
標記爲上例中的地圖生成的一個文檔元素：
<div id="map"></div>
在此示例中，咱們用<div>元素做爲地圖顯示的容器，其餘塊級元素也能作視圖的容器。在這種狀況下，咱們設置容器的id屬性，因此咱們能夠將其做爲地圖的對象。
1.2.2 地圖樣式
OpenLayers帶有一個默認的樣式表，指定地圖相關的元素應如何顯示，咱們明確的將樣式表引用到map.html頁面中。
OpenLayers不對地圖的大小作預約義，所以在默認樣式表以後，咱們須要包括至少一個自定義樣式聲明來講明地圖在頁面上的空間。
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
在該示例中，咱們使用地圖容器的id值做爲選擇器，並明肯定義地圖容器的高爲256px，寬爲512px。樣式聲明直接包含在文檔的<head>部分。在大多數狀況下，地圖相關的樣式說明是連接到外部樣式表的一個大型主題網站的一部分。
1.2.3 地圖初始化
生成地圖的下一步包含一些初始化代碼，在該示例中，咱們在文檔的<body>前添加<script> 元素來實現。
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
注：這些步驟的順序很重要，OpenLayers庫必須在在自定義腳本執行以前加載，在此示例中，OpenLayers庫在文檔的<head>部分加載（<script src="ol3/ol.js"></script>）。一樣的，在文檔中做爲顯示容器的元素（該實例中爲<div id="map"></div>）準備好以前，自定義地圖初始化代碼是不能執行的，將初始化代碼添加到文檔中<body>的後面，咱們能在地圖生成前，確保庫已加載，顯示容器已準備好。
接下來，將詳細介紹初始化腳本的內容。腳本建立了一個包含一些配置選項的ol.Map對象：
target: 'map'
咱們使用顯示容器的id屬性來告訴地圖構造函數將地圖交付到何處，在該示例中，咱們經過字符串「map」做爲地圖構造函數的對象。這個語法方便快捷，也能夠更詳細的使用元素的直接引用（e.g. document.getElementById("map")）。
圖層配置建立了一個顯示在地圖中的圖層：
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
不用擔憂對以上的語法不瞭解，圖層建立在後續章節中會有詳細的介紹。最重要的是理解地圖顯示的是圖層的集合。爲了顯示一副地圖，至少須要添加一個圖層。
最後一步是定義視圖，指定投影、中心點，放大級別，在該示例中，還指定了maxResolution，以確保請求的範圍不超過GeoWebCache能處理的範圍。
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
以上，成功剖析了一副地圖的顯示，接下來將介紹更多關於OpenLayers的開發。
1.3 Openlayers的資源
OpenLayers 庫提供豐富的功能，儘管開發者對每一個功能都提供了示例，而且讓其餘有經驗的程序員找到屬於他們本身的方式來組織代碼，不少用戶仍以爲從頭開始是一個挑戰。
1.3.1 經過示例學習
新用戶極可能會發現研究OpenLayer的示例代碼以及庫的功能是開始起步最有效的方式。
• http://openlayers.org/en/master/examples/
1.3.2查看API參考
在理解了構成以及控制一幅地圖的基本組成以後，搜索API幫助文檔以瞭解方法簽名、對象屬性的詳細信息。
• http://openlayers.org/en/master/apidoc/
2 圖層與資源
2.1 網絡地圖服務圖層
當向地圖中添加圖層，圖層的資源一般用來獲取將要顯示的數據，數據請求能夠是影像數據，也能夠是矢量數據。柵格數據是服務端提供的圖片信息，矢量數據是服務器交付的結構化信息，在客戶端（瀏覽器）進行顯示。
有許多不一樣類型的服務提供柵格地圖數據，這部分涉及到符合OGC網絡地圖服務（WMS）規範的供應商。
2.1.1 建立圖層
在1.1 建立的地圖示例的基礎上，修改圖層來理解其運行機制。
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
]
完整示例代碼詳見1.1。
2.1.2 The ol.layer.Tile構造函數
在1.1建立的示例中，使用的數據資源是ol.source.TileWMS，咱們能夠從title關鍵字的字面上理解它的含義，可是基本上來講，這裏的關鍵字能夠是任意名稱，在OpenLayers 3中，圖層和資源有一個區別，而在OpenLayers 2中，這兩部分一塊兒組成了一個圖層。
ol.layer.Tile表示圖像的規則網格，而ol.layer.Image表示單個圖像，基於圖層類型，咱們將使用不一樣的資源（ol.source.TileWMS與ol.source.ImageWMS）。
2.1.3 The ol.source.TileWMS構造函數
url指向的是WMS服務的在線資源，params是對象參數名稱及其值，因爲在OpenLayers中，默認WMS版本是1.3.0，若是WMS不支持該版本，須要在params中提供一個低版本。
（1）該示例中WMS提供了一個名爲「openstreetmap」的圖層，將LAYERS 參數的值由「bluemarble」改成「openstreetmap」，代碼以下：
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'openstreetmap', VERSION: '1.1.1'}
})
})
（2）改變圖層與資源，用單一圖像取代瓦片，再這個過程當中，須要將資源的url修改成 http://suite.opengeo.org/geoserver/wms，將LAYERS 參數的值修改成「opengeo:countries」，完成修改後，利用瀏覽器的開發工具，確保請求的是單一圖像而不是256×256像素的瓦片。

瞭解了從網絡地圖服務動態獲取數據的機制，接下來將深刻了解瓦片緩存服務。
2.2 瓦片緩存
默認狀況在，瓦片圖層請求一個256×256像素的圖像來填充地圖視窗，當你平移或縮放地圖，將發出更多圖片請求來填充你沒有訪問過的地方。瀏覽器會緩存一些請求的圖像，這一般須要大量的處理器來動態渲染圖像。
因爲瓦片圖層以規律的網格請求圖像，這使得服務器可以緩存這些圖片請求而且在下次瀏覽相同區域的時候返回該緩存結果，從而得到更好的性能。
2.2.1 ol.source.XYZ
網絡地圖服務規範使得客戶端可以請求的內容具備靈活性，若是沒有限制，在實踐中，緩存會變得困難甚至不可能實現。
另外一種幾段狀況是，服務器可能只提供固定縮放級別和規律網格的瓦片，這種狀況能夠歸納爲XYZ資源的瓦片圖層——X/Y表明網格的行與列，Z表明縮放級別。
2.2.2 ol.source.OSM
OpenStreetMap (OSM)投影是爲了收集並免費提供世界地圖的數據，OSM提供了一些不一樣的數據渲染做爲瓦片緩存集，這些渲染符合基本的XYZ網格配置，而且能夠在OpenLayers地圖中使用。ol.source.OSM圖層能夠訪問OpenStreetMap瓦片資源。
（1）打開1.1建立的map.html文件，將地圖初始化代碼替換爲如下代碼：
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
</script>
（2）在文檔的<head>中，添加如下圖層屬性的樣式說明：
<style>
#map {
width: 512px;
height: 256px;
}
.ol-attribution a {
color: black;
}
</style>
（3）保存修改，在瀏覽器中查看該頁面：http://localhost:8000/ol_workshop/map.html：

2.2.2.1 投影
回顧地圖的視圖定義：
view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
地理空間數據可能來自各類座標參照系，一個數據集多是以度爲單位的地理（經緯）座標系，另外一個多是以米爲單位的投影座標系，對座標系的全面討論超出了本實踐的範圍，但瞭解其基本概念是很重要的。
OpenLayers 3須要知道所使用數據的座標系，在內部，由ol.proj.Projection對象展示，ol.proj命名空間中的transform 方法使用字符串表示座標參考系（上述示例中的"EPSG:4326"以及"EPSG:3857"）。
OpenStreetMap 瓦片數據是墨卡託投影，所以，咱們須要使用墨卡託座標了設置初始化時的中心點。因爲一個地方的地理座標相對來講更容易知道，使用ol.proj.transform方法將地理座標系（"EPSG:4326"）轉化爲墨卡託座標系（"EPSG:3857"）。
OpenLayers 3包含地理座標系與墨卡託座標系間相互轉換的方法，所以咱們可使用ol.proj.transform方法而不須要任何額外的工做。若是想要使用其餘投影的數據，再使用ol.proj.transform方法以前須要添加一些額外的信息。
例如，使用"EPSG:21781" 座標參照系的數據，添加如下兩條script標籤到頁面中：
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"
type="text/javascript"></script>
<script src="http://epsg.io/21781-1753.js" type="text/javascript"></script>
而後在應用程序代碼中，註冊該投影並設置其有效範圍，代碼以下：
// This creates a projection object for the EPSG:21781 projection
// and sets a "validity extent" in that projection object.
var projection = ol.proj.get('EPSG:21781');
projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
2.2.2.2 圖層建立
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
以前的示例中，建立一個新圖層後，將其添加到地圖配置對象的圖層數組中，以上代碼接受資源的全部默認選項。
2.2.2.3 樣式
.ol-attribution a {
color: black;
}
如何處理地圖控件是本章節意外的內容，可是這裏的樣式聲明讓你先睹爲快。默認狀況下ol.control.Attribution控件被添加到全部地圖中，這使得地圖視窗中顯示圖層資源的歸屬信息來源，上述聲明改變了地圖中歸屬信息的樣式（版權行再地圖的右下方）。
掌握了公開可用的緩存瓦片集的圖層用法，接下來將介紹專有的柵格圖層，詳見2.3 。
2.2.2.4 屬性控件配置
默認狀況下，ol.control.Attribution控件在頁面上添加了一個i（information）按鈕，點擊便可顯示歸屬地信息。爲了符合OpenStreetMap的使用條款，而且將OpenStreetMap的歸屬地信息一直展示出來，可添加如下代碼在ol.Map構造函數中最爲可選對象。
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
這段代碼移除了i按鈕，使得歸屬地信息一直展示在視圖中。
2.3 專有柵格圖層（Bing）
在前面的章節中，圖層是基於符合標準的WMS以及自定義瓦片緩存顯示的，在線地圖（或者瓦片地圖客戶端）主要是經過可用的專有地圖瓦片服務進行普遍推廣，OpenLayers提供的圖層類型能經過使用它們的API來調用這些專有服務。
本章節使用的示例，是在上一章節示例的基礎上，添加一個使用Bing瓦片的圖層。
（1）將map.html文件中配置OSM資源的代碼替換爲ol.source.BingMaps：
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
})
注：Bing瓦片API要求用戶註冊一個API密鑰，該密鑰將在地圖應用程序中使用，示例中的
密鑰不能再產品中使用。
（1）保存修改，在瀏覽器中查看該頁面：http://localhost:8000/ol_workshop/map.html：

完整示例代碼以下：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
.ol-attribution a {
color: black;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h1>My Map</h1>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Road',
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
})
})
],
view: new ol.View({
center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});
</script>
</body>
</html>
2.4 矢量圖層
矢量圖層由ol.layer.Vector展現，並處理客戶端矢量數據的顯示。如下將使用最初的WMS示例來獲取一個世界地圖，並在其基礎上添加一個帶有一些要素的矢量圖層。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
2.4.1 添加矢量圖層
（1）打開map.html文件，將初始化WMS的示例複製其中，保存修改後在瀏覽器中肯定地圖正常顯示：http://localhost:8000/ol_workshop/map.html。
（2）在地圖初始化代碼中，找到瓦片圖層的加載，在其後添加一下新的圖層，如下代碼實現請求一組存放在GeoJSON中的要素：
new ol.layer.Vector({
title: 'Earthquakes',
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
以上示例顯示了世界地圖，附以白色的圓圈表明地震帶。

注：GeoJSON數據座標系與地圖視圖的相同，均爲EPSG:4326，所以無需再次設置投影，只有在資源與視圖的投影不一樣的狀況下，才須要在資源中明確指定projection 屬性來表示要素緩存的投影，這覺得着地圖視圖的投影一般能夠被指定。
2.4.2 詳細說明
上述示例中，設置圖層的標題title爲「Earthquakes」，使用ol.source.GeoJSON類型的資源source，該資源指向一個明確的url。
若是你但願要素的樣式基於其屬性，可使用一個樣式函數替代ol.style.Style，從而配置ol.layer.Vector的樣式。
（1）上述示例中地圖上白色的圓圈表明ol.layer.Vector圖層中的ol.Feature對象，每個要素都包含title 和summary 屬性信息。地圖中註冊一個命名爲forEachFeatureAtPixel的單擊監聽事件，並在地圖視圖下在顯示地震信息。
（2）矢量圖層的數據來自於美國地質調查局（USGS）公佈的地震資料(http://earthquake.usgs.gov/earthquakes/catalogs/)，找到OpenLayers 3支持格式的矢量圖層信息保存爲文檔，將該文檔放置在項目的data文件夾下，就能在地圖中顯示該矢量圖層。
2.5 矢量影像
在上一章節的示例中，使用了ol.layer.Vector類，在動態縮放的過程當中，要素不斷從新渲染（點符號大小保持固定），在矢量圖層中，OpenLayers 基於每一動畫幀從新渲染資源數據，這使得在視圖的分辨率變化後，筆劃、點符號、標籤持續的渲染。
另外一種渲染策略是避免在視圖轉換的過程當中重渲染，並將以前視圖的狀態下的渲染輸出重定位和改變其規模。經過使用包含ol.source.ImageVector的ol.layer.Image能夠實現以上效果。這種結合，使得當視圖沒有動態變化時，保存渲染數據的「快照」，在視圖轉換過程當中，重利用這些「快照」。
如下示例使用了包含ol.source.ImageVector的ol.layer.Image類，實現分塊渲染，使用該類能夠僅渲染數據的一小部分，這種結合將適用於包含大量相對靜態數據渲染的應用程序。
2.5.1 ol.source.ImageVector
回顧2.4 添加的包含地震數據的地圖示例，將此示例改成分塊渲染，將矢量圖層替換爲以下代碼：
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
經過以上方式，矢量數據由圖像描繪，但視覺上還是要素的形式，實現了性能和質量之間本質的折中。
2.5.2 詳細說明
在上述代碼中，使用ol.layer.Image代替ol.layer.Vector，然而，仍能夠經過ol.source.ImageVector鏈接原始的ol.source.GeoJSON類型數據，從而使用是矢量數據，這裏的樣式提供了對ol.source.ImageVector的配置，而不是直接配置圖層。web

3 控件與交互
3.1 顯示比例尺
比例尺是顯示在地圖上的典型窗口小部件，OpenLayers 3提供了ol.control.SaleLine來實現。
3.1.1建立比例尺
在地圖配置的範圍內，添加以下代碼，給地圖建立一個新的比例尺控件：
controls: ol.control.defaults().extend([
new ol.control.ScaleLine()
]),
一個默認的比例尺將出如今地圖視圖的左下角。

3.1.2 移動比例尺控件
若是以爲比例尺控件在圖形中看不清，一下提供幾種策略來提升比例尺的可見性。在文檔的CSS中添加一些樣式聲明，能夠包括背景色，填充等，如下代碼可做爲參考：
.ol-scale-line, .ol-scale-line:not([ie8andbelow]) {
background: black;
padding: 5px;
}
若是地圖視圖擁擠難耐，爲了不過分擁擠，能夠將比例尺控件移到其餘位置。實現此功能，須要在標記中建立一個額外元素來存放比例尺控件。
（1）在map.html頁面的<body>範圍內建立一個新的塊級元素，爲了更好的指向該元素，設置其id屬性scale-line，代碼以下：
<div id="scale-line" class="scale-line"></div>
將以上代碼放置在<div id="map"></div> 後最合理。
（2）修改比例尺控件的建立代碼，使其指向scale-line元素：
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
className: 'ol-scale-line',
target: document.getElementById('scale-line')
})
]),
（3）添加比例尺控件的樣式聲明：
.scale-line {
position: absolute;
top: 350px;
}
.ol-scale-line {
position: relative;
bottom: 0px;
left: 0px;
}
保存修改，在瀏覽器中查看該頁面：http://localhost:8000/ol_workshop/map.html：

實現比例尺控件在地圖視圖之外。
注：想要建立自定義控件，能夠從ol.control.Control繼承（經過使用ol.inherits）。
3.2 選擇要素
矢量數據服務的一大優勢是，用戶能夠和數據交互，在本節示例中，將建立一個矢量圖層，用戶能夠選擇和查看要素信息。
以前的示例展現了ol.control.Control的用法，控件能夠在地圖上直接顯示，或者在文檔中添加一個DOM元素，ol.interaction.Interaction負責處理用戶交互，可是一般沒有視覺上的展示。一下示例將展現ol.interaction.Select的使用，實現與矢量圖層上的要素交互。
回顧2.4 中矢量圖層的建立，在其基礎上，添加選擇交互工具，完整代碼以下：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([
new ol.interaction.Select({
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#FF0000'
}),
stroke: new ol.style.Stroke({
color: '#000000'
})
})
})
})
]),
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
}),
new ol.layer.Vector({
title: 'Earthquakes',
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#0000FF'
}),
stroke: new ol.style.Stroke({
color: '#000000'
})
})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
})
});
</script>
</body>
</html>
保存修改，在瀏覽器中打開：http://localhost:8000/ol_workshop/map.html.使用鼠標點擊事件選擇地震帶，查看要素選擇的效果。

3.3 繪製要素
經過使用ol.interaction.Draw能夠繪製新的要素，一個繪製交互工具由矢量資源和幾何類型構成。
回顧2.4 中矢量圖層的建立，在其基礎上，添加繪製交互工具，完整代碼以下：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var source = new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
});
var draw = new ol.interaction.Draw({
source: source,
type: 'Point'
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([draw]),
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
}),
new ol.layer.Vector({
title: 'Earthquakes',
source: source,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#0000FF'
}),
stroke: new ol.style.Stroke({
color: '#000000'
})
})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
})
});
</script>
</body>
</html>
保存修改，在瀏覽器中打開：http://localhost:8000/ol_workshop/map.html.點擊地圖來添加新的要素，實現點幾何對象的繪製。

3.4 修改要素
修改要素須要聯合使用ol.interaction.Select和ol.interaction.Modify，它們有一個共同的要素集(ol.Collection)。ol.interaction.Modify對ol.interaction.Select選擇的要素進行修改。
回顧2.4 中矢量圖層的建立，在其基礎上，添加選擇與修改交互工具，完整代碼以下：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<script src="ol3/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var source = new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
});
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: [0, 153, 255, 1]
}),
stroke: new ol.style.Stroke({
color: [255, 255, 255, 0.75],
width: 1.5
})
}),
zIndex: 100000
});
var select = new ol.interaction.Select({style: style});
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
}),
new ol.layer.Vector({
title: 'Earthquakes',
source: source,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#0000FF'
}),
stroke: new ol.style.Stroke({
color: '#000000'
})
})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 1
})
});
</script>
</body>
</html>
保存修改，在瀏覽器中打開：http://localhost:8000/ol_workshop/map.html.使用鼠標點擊事件選擇地震帶，拖動該點，實現要素修改。
4 矢量樣式
4.1矢量圖層格式
基礎的ol.layer.Vector構造函數提供了一個相對固定的圖層類型，默認狀況下，當建立一個新的矢量圖層時，並不知道圖層的要素來源，由於這是的ol.source.Vector內容。接下來將介紹自定義渲染風格，以及矢量數據的基本格式。
4.1.1 ol.format
OpenLayers 3中的ol.format類負責解析服務器中表明是兩要素的數據，大多數狀況下，不會直接使用該類，可是會使用其相應的資源（好比：ol.source.KML）。該格式將原始要素數據轉變爲ol.Feature對象。
考慮如下兩個數據塊，它們都表示同一個ol.Feature對象（西班牙巴塞羅那的一個點）。第一種序列化爲GeoJSON（使用ol.format.GeoJSON解析），第二種序列化爲KML（使用ol.format.KML解析）。
（1）GeoJSON Example
{
"type": "Feature",
"id": "OpenLayers.Feature.Vector_107",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-104.98, 39.76]
}
}
（2）KML Example
<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Placemark>
<Point>
<coordinates>-104.98,39.76</coordinates>
</Point>
</Placemark>
</kml>
4.2矢量圖層樣式
設置HTML元素樣式，使用以下CSS：
.someClass {
background-color: blue;
border-width: 1px;
border-color: olive;
}
.someClass是一個選擇器（選擇全部Class屬性值爲"someClass"的對象），後面的內容是一組已命名的屬性與其對應的值，稱之爲樣式聲明。
4.2.1 基礎樣式
一個矢量圖層能夠有樣式，更明確的說法是，一個矢量圖層能夠由一個ol.style.Style對象、一組ol.style.Style對象或者一個返回值爲一組ol.style.Style對象的方法配置。
（1）由靜態樣式配置的矢量圖層：
var layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
// ...
})
});
（2）由樣式方法配置的矢量圖層，將全部Class屬性值爲"someClass"的對象設置爲同同樣式：
var layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: function(feature, resolution) {
if (feature.get('class') === 'someClass') {
// create styles...
return styles;
}
},
});
4.2.2 符號化
OpenLayers 3中的符號化至關於CSS中聲明的塊（下面是關於ol.style.*的典型示例）。在一個藍色的背景下用1像素寬的線條繪製區要素，將運用的以下兩個符號化對象：
new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'olive',
width: 1
})
});
不一樣的符號化對象使用於不一樣的幾何類型，區能夠由線組成，但沒有填充，點能夠用ol.style.Circle和ol.style.Icon進行樣式說明。前者呈現圓形的形狀，後者使用文件中的圖片（好比：png圖像）。下面是用圓形樣式的示例：
new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: '#ff9900',
opacity: 0.6
}),
stroke: new ol.style.Stroke({
color: '#ffcc00',
opacity: 0.4
})
});
4.2.3 ol.style.Style
一個ol.style.Style對象有四個關鍵屬性：fill, image, stroke 和 text，外加一個zIndex屬性選項。下面的樣式方法將返回一組ol.style.Style對象。
如下示例實現將class 屬性值爲的"someClass"對象中的要素設置爲1像素寬的藍色，其他全部要素設置爲紅色。（最好將樣式方法在對象外建立，以便重用，但如下代碼爲簡單起見，將方法寫在對象內。）
style: (function() {
var someStyle = [new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'olive',
width: 1
})
})];
var otherStyle = [new ol.style.Style({
fill: new ol.style.Fill({
color: 'red'
})
})];
return function(feature, resolution) {
if (feature.get('class') === "someClass") {
return someStyle;
} else {
return otherStyle;
}
};
}())
注：一個要素也有樣式配置選項，只需設置resolution 參數就能實現對個別要素的樣式設置（基於分辨率）。
4.2.4 僞類
CSS容許選擇器中存在僞類，這限制了基於上下文的樣式聲明的應用，使得樣式聲明不容器在選擇器中表示，好比鼠標位置，附近的元素或者瀏覽器歷史。在OpenLayers 3中，有一種相似的概念：在ol.interaction.Select中添加樣式配置選項，示例代碼以下：
var select = new ol.interaction.Select({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.5)'
})
})
});
瞭解了基礎的樣式，接下來將介紹矢量圖層的樣式設置。
4.3 設置矢量圖層的樣式
本節示例將展現矢量圖層中的建築平面圖，完整示例代碼以下：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
background-color: gray;
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Vector({
title: 'Buildings',
source: new ol.source.KML({
url: 'data/layers/buildings.kml',
extractStyles: false
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: 'red', width: 2})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [-122.791859392, 42.3099154789],
zoom: 16
})
});
</script>
</body>
</html>
在瀏覽器中打開map.html文件：http://localhost:8000/ol_workshop/map.html，將看到帶有紅色輪廓的建築羣。
建立一個樣式方法，根據面積的大小，使建築顯示爲不一樣的顏色，將一下代碼，將Buildings 圖層的樣式配置選項替換爲以下代碼：
style: (function() {
var defaultStyle = [new ol.style.Style({
fill: new ol.style.Fill({color: 'navy'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
})];
var ruleStyle = [new ol.style.Style({
fill: new ol.style.Fill({color: 'olive'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
})];
return function(feature, resolution) {
if (feature.get('shape_area') < 3000) {
return ruleStyle;
} else {
return defaultStyle;
}
};
})()
保存修改，在瀏覽器中查看：http://localhost:8000/ol_workshop/map.html。

最後給建築添加標籤，爲了簡單化，咱們使用黑色輪廓的樣式，並只使用一種標籤。
style: (function() {
var stroke = new ol.style.Stroke({
color: 'black'
});
var textStroke = new ol.style.Stroke({
color: '#fff',
width: 3
});
var textFill = new ol.style.Fill({
color: '#000'
});
return function(feature, resolution) {
return [new ol.style.Style({
stroke: stroke,
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: feature.get('key'),
fill: textFill,
stroke: textStroke
})
})];
};
})()
保存修改，在瀏覽器中查看：http://localhost:8000/ol_workshop/map.html。
ajax

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。