OpenLayers 3 入門教程

1、OpenLayers 3 入門教程 | 41OpenLayers 3 入門教程Derect By: 黃進摘要OpenLayers 3對OpenLayers網(wǎng)絡地圖庫進行了根本的重新設計。版本2雖然被廣泛使用，但從JavaScript開發(fā)的早期發(fā)展階段開始，已日益現(xiàn)實出它的落后。 OL3已運用現(xiàn)代的設計模式從底層重寫。最初的版本旨在支持第2版提供的功能，提供大量商業(yè)或免費的瓦片資源以及最流行的開源矢量數(shù)據(jù)格式。與版本2一樣，數(shù)據(jù)可以被任意投影。最初的版本還增加了一些額外的功能，如能夠方便地旋轉(zhuǎn)地圖以及顯示地圖動畫。OpenLayers 3同時設計了一些主要的新功能，如顯示三維地圖，或使用WebG

2、L快速顯示大型矢量數(shù)據(jù)集，這些功能將在以后的版本中加入。目錄基本概念4Map4View4Source5Layer5總結(jié)6Openlayers 3實踐71 地圖顯示71.1創(chuàng)建一副地圖71.2 剖析你的地圖81.3 Openlayers的資源112 圖層與資源122.1 網(wǎng)絡地圖服務圖層122.2 瓦片緩存142.3 專有柵格圖層（Bing）182.4 矢量圖層202.5 矢量影像233 控件與交互243.1 顯示比例尺243.2 選擇要素263.3 繪制要素293.4 修改要素314 矢量樣式334.1矢量圖層格式334.2矢量圖層樣式354.3 設置矢量圖層的樣式38基本概念MapViewS

3、ourceLayerMapOpenLayers 3的核心部件是Map（ol.Map）。它被呈現(xiàn)到對象target容器（例如，包含在地圖的網(wǎng)頁上的div元素）。所有地圖的屬性可以在構(gòu)造時進行配置，或者通過使用setter方法，如setTarget（）。 var map = new ol.Map(target: map);Viewol. View負責地圖的中心點，放大，投影之類的設置。一個ol.View實例包含投影projection，該投影決定中心center的坐標系以及分辨率的單位，如果沒有指定（如下面的代碼段），默認的投影是球墨卡托（EPSG：3857），以米為地圖單位。放大zoom選項是一

4、種方便的方式來指定地圖的分辨率，可用的縮放級別由maxZoom（默認值為28）、zoomFactor（默認值為2）、maxResolution（默認由投影在256256像素瓦片的有效成都來計算） 決定。起始于縮放級別0，以每像素maxResolution的單位為分辨率，后續(xù)的縮放級別是通過zoomFactor區(qū)分之前的縮放級別的分辨率來計算的，直到縮放級別達到maxZoom。map.setView(new ol.View( center: 0, 0, zoom: 2 ); SourceOpenLayers 3使用ol.source.Source子類獲取遠程數(shù)據(jù)圖層，包含免費的和商業(yè)的地圖瓦片服

5、務，如OpenStreetMap、Bing、OGC資源（WMS或WMTS）、矢量數(shù)據(jù)（GeoJSON格式、KML格式）等。var osmSource = new ol.source.OSM();Layer一個圖層是資源中數(shù)據(jù)的可視化顯示，OpenLayers 3包含三種基本圖層類型：ol.layer.Tile、ol.layer.Image和ol.layer.Vector。ol.layer.Tile 用于顯示瓦片資源，這些瓦片提供了預渲染，并且由特定分別率的縮放級別組織的瓦片圖片網(wǎng)格組成。 ol.layer.Image用于顯示支持渲染服務的圖片，這些圖片可用于任意范圍和分辨率。ol.layer.

6、Vector用于顯示在客戶端渲染的矢量數(shù)據(jù)。 var osmLayer = new ol.layer.Tile(source: osmSource); map.addLayer(osmLayer);總結(jié)上述片段可以合并成一個自包含視圖和圖層的地圖配置： new ol.Map( layers: new ol.layer.Tile(source: new ol.source.OSM() , view: new ol.View( center: 0, 0, zoom: 2 ), target: map );Openlayers 3實踐1 地圖顯示1.1創(chuàng)建一副地圖在openlayers中，Map是圖

7、層、各種交互以及處理用戶交互控件的集合，地圖由三個基本成分生成：標記，樣式聲明和初始化代碼。以下是一個完整的OpenLayers3地圖示例。 #map height: 256px; width: 512px; OpenLayers 3 example My Map var map = new ol.Map( target: map, layers: new ol.layer.Tile( title: Global Imagery, source: new ol.source.TileWMS( url: /geowebcache/service/wms

8、, params: LAYERS: bluemarble, VERSION: 1.1.1 ) ) , view: new ol.View( projection: EPSG:4326, center: 0, 0, zoom: 0, maxResolution: 0.703125 ) ); （1） 下載（2） 創(chuàng)建一個新的文件，命名為map.html，將以上代碼復制進該文件后放入下載的文件夾的根目錄下；（3） 在瀏覽器中輸入：http:/localhost:8000/ol_workshop/map.html，我們將打開一個工作的地圖。成功地創(chuàng)建了第一張地圖，我們將繼續(xù)關注地圖的組成部分，詳見1.

9、2 剖析你的地圖。1.2 剖析你的地圖正如前一部分演示的那樣，一副地圖通過將標記，樣式聲明和初始化代碼三部分組織在一起而生成，接下來將詳細的介紹這三個組成部分。1.2.1 地圖標記標記為上例中的地圖生成的一個文檔元素：在此示例中，我們用元素作為地圖顯示的容器，其他塊級元素也能做視圖的容器。在這種情況下，我們設置容器的id屬性，所以我們可以將其作為地圖的對象。1.2.2 地圖樣式OpenLayers帶有一個默認的樣式表，指定地圖相關的元素應如何顯示，我們明確的將樣式表引用到map.html頁面中。OpenLayers不對地圖的大小做預定義，因此在默認樣式表之后，我們需要包括至少一個自定義樣式聲明

10、來說明地圖在頁面上的空間。 #map height: 256px; width: 512px; 在該示例中，我們使用地圖容器的id值作為選擇器，并明確定義地圖容器的高為256px，寬為512px。樣式聲明直接包含在文檔的部分。在大多數(shù)情況下，地圖相關的樣式說明是鏈接到外部樣式表的一個大型主題網(wǎng)站的一部分。1.2.3 地圖初始化生成地圖的下一步包含一些初始化代碼，在該示例中，我們在文檔的前添加元素來實現(xiàn)。 var map = new ol.Map( target: map, layers: new ol.layer.Tile( source: new ol.source.TileWMS( url

11、: /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 ) );注：這些步驟的順序很重要，OpenLayers庫必須在在自定義腳本執(zhí)行之前加載，在此示例中，OpenLayers庫在文檔的部分加載（）。同樣的，在文檔中作為顯示容器的元素（該實例中為）準備好之前，自定義地圖初始化代碼

12、是不能執(zhí)行的，將初始化代碼添加到文檔中的后面，我們能在地圖生成前，確保庫已加載，顯示容器已準備好。接下來，將詳細介紹初始化腳本的內(nèi)容。腳本創(chuàng)建了一個包含一些配置選項的ol.Map對象：target: map我們使用顯示容器的id屬性來告訴地圖構(gòu)造函數(shù)將地圖交付到何處，在該示例中，我們通過字符串“map”作為地圖構(gòu)造函數(shù)的對象。這個語法方便快捷，也可以更詳細的使用元素的直接引用（e.g.document.getElementById(map)）。圖層配置創(chuàng)建了一個顯示在地圖中的圖層：layers: new ol.layer.Tile( source: new ol.source.TileWMS(

13、 url: /geowebcache/service/wms, params: LAYERS: bluemarble, VERSION: 1.1.1 ) ),不用擔心對以上的語法不了解，圖層創(chuàng)建在后續(xù)章節(jié)中會有詳細的介紹。最重要的是理解地圖顯示的是圖層的集合。為了顯示一副地圖，至少需要添加一個圖層。最后一步是定義視圖，指定投影、中心點，放大級別，在該示例中，還指定了maxResolution，以確保請求的范圍不超過GeoWebCache能處理的范圍。view: new ol.View( projection: EPSG:4326, center: 0

14、, 0, zoom: 0, maxResolution: 0.703125)以上，成功剖析了一副地圖的顯示，接下來將介紹更多關于OpenLayers的開發(fā)。1.3 Openlayers的資源OpenLayers庫提供豐富的功能，盡管開發(fā)者對每個功能都提供了示例，并且讓其他有經(jīng)驗的程序員找到屬于他們自己的方式來組織代碼，很多用戶仍覺得從頭開始是一個挑戰(zhàn)。1.3.1 通過示例學習新用戶很可能會發(fā)現(xiàn)研究OpenLayer的示例代碼以及庫的功能是開始起步最有效的方式。 /en/master/examples/1.3.2查看API參考在理解了構(gòu)成以及控制一幅地圖的

15、基本組成之后，搜索API幫助文檔以了解方法簽名、對象屬性的詳細信息。 /en/master/apidoc/2 圖層與資源2.1 網(wǎng)絡地圖服務圖層當向地圖中添加圖層，圖層的資源通常用來獲取將要顯示的數(shù)據(jù)，數(shù)據(jù)請求可以是影像數(shù)據(jù)，也可以是矢量數(shù)據(jù)。柵格數(shù)據(jù)是服務端提供的圖片信息，矢量數(shù)據(jù)是服務器交付的結(jié)構(gòu)化信息，在客戶端（瀏覽器）進行顯示。有許多不同類型的服務提供柵格地圖數(shù)據(jù)，這部分涉及到符合OGC網(wǎng)絡地圖服務（WMS）規(guī)范的供應商。2.1.1 創(chuàng)建圖層在1.1創(chuàng)建一副地圖 創(chuàng)建的地圖示例的基礎上，修改圖層來理解其運行機制。layers: new ol.la

16、yer.Tile( title: Global Imagery, source: new ol.source.TileWMS( url: /geowebcache/service/wms, params: LAYERS: bluemarble, VERSION: 1.1.1 ) )完整示例代碼詳見1.1創(chuàng)建一副地圖。2.1.2 The ol.layer.Tile構(gòu)造函數(shù)在1.1創(chuàng)建一副地圖創(chuàng)建的示例中，使用的數(shù)據(jù)資源是ol.source.TileWMS，我們可以從title關鍵字的字面上理解它的含義，但是基本上來說，這里的關鍵字可以是任意名稱，在Op

17、enLayers3中，圖層和資源有一個區(qū)別，而在OpenLayers 2中，這兩部分一起組成了一個圖層。ol.layer.Tile表示圖像的規(guī)則網(wǎng)格，而ol.layer.Image表示單個圖像，基于圖層類型，我們將使用不同的資源（ol.source.TileWMS與ol.source.ImageWMS）。2.1.3 The ol.source.TileWMS構(gòu)造函數(shù)url指向的是WMS服務的在線資源，params是對象參數(shù)名稱及其值，由于在OpenLayers中，默認WMS版本是1.3.0，如果WMS不支持該版本，需要在params中提供一個低版本。（1） 該示例中WMS提供了一個名為“ope

18、nstreetmap”的圖層，將LAYERS參數(shù)的值由“bluemarble”改為“openstreetmap”，代碼如下：new ol.layer.Tile( title: Global Imagery, source: new ol.source.TileWMS( url: /geowebcache/service/wms, params: LAYERS: openstreetmap, VERSION: 1.1.1 )（2） 改變圖層與資源，用單一圖像取代瓦片，再這個過程中，需要將資源的url修改為/

19、geoserver/wms，將LAYERS參數(shù)的值修改為“opengeo:countries”，完成修改后，利用瀏覽器的開發(fā)工具，確保請求的是單一圖像而不是256256像素的瓦片。了解了從網(wǎng)絡地圖服務動態(tài)獲取數(shù)據(jù)的機制，接下來將深入了解瓦片緩存服務。2.2 瓦片緩存默認情況在，瓦片圖層請求一個256256像素的圖像來填充地圖視窗，當你平移或縮放地圖，將發(fā)出更多圖片請求來填充你沒有訪問過的地方。瀏覽器會緩存一些請求的圖像，這通常需要大量的處理器來動態(tài)渲染圖像。由于瓦片圖層以規(guī)律的網(wǎng)格請求圖像，這使得服務器能夠緩存這些圖片請求并且在下次瀏覽相同區(qū)域的時候返回該緩存結(jié)果，從而獲得更好的性能。2.2.

20、1 ol.source.XYZ網(wǎng)絡地圖服務規(guī)范使得客戶端能夠請求的內(nèi)容具有靈活性，如果沒有限制，在實踐中，緩存會變得困難甚至不可能實現(xiàn)。另一種幾段情況是，服務器可能只提供固定縮放級別和規(guī)律網(wǎng)格的瓦片，這種情況可以概括為XYZ資源的瓦片圖層X/Y代表網(wǎng)格的行與列，Z代表縮放級別。2.2.2 ol.source.OSMOpenStreetMap (OSM)投影是為了收集并免費提供世界地圖的數(shù)據(jù)，OSM提供了一些不同的數(shù)據(jù)渲染作為瓦片緩存集，這些渲染符合基本的XYZ網(wǎng)格配置，并且可以在OpenLayers地圖中使用。ol.source.OSM圖層可以訪問OpenStreetMap瓦片資源。（1） 打

21、開1.1創(chuàng)建一副地圖創(chuàng)建的map.html文件，將地圖初始化代碼替換為以下代碼：var map = new ol.Map( target: map, layers: new ol.layer.Tile( source: new ol.source.OSM() ) , view: new ol.View( center: j.transform(-93.27, 44.98, EPSG:4326, EPSG:3857), zoom: 9 ), controls: ol.control.defaults( attributionOptions: collapsible: false )

22、);（2） 在文檔的中，添加以下圖層屬性的樣式說明： #map width: 512px; height: 256px; .ol-attribution a color: black; （3） 保存修改，在瀏覽器中查看該頁面：http:/localhost:8000/ol_workshop/map.html： 投影回顧地圖的視圖定義：view: new ol.View( center: j.transform(-93.27, 44.98, EPSG:4326, EPSG:3857), zoom: 9)地理空間數(shù)據(jù)可能來自各種坐標參照系，一個數(shù)據(jù)集可能是以度為單位的地理

23、（經(jīng)緯）坐標系，另一個可能是以米為單位的投影坐標系，對坐標系的全面討論超出了本實踐的范圍，但了解其基本概念是很重要的。OpenLayers3需要知道所使用數(shù)據(jù)的坐標系，在內(nèi)部，由j.Projection對象展現(xiàn)，j命名空間中的transform方法使用字符串表示坐標參考系（上述示例中的EPSG:4326以及EPSG:3857）。OpenStreetMap瓦片數(shù)據(jù)是墨卡托投影，因此，我們需要使用墨卡托坐標了設置初始化時的中心點。由于一個地方的地理坐標相對來說更容易知道，使用j.transform方法將地理坐標系（EPSG:4326）轉(zhuǎn)化為墨卡托坐標系（EPSG

24、:3857）。OpenLayers3包含地理坐標系與墨卡托坐標系間相互轉(zhuǎn)換的方法，因此我們可以使用j.transform方法而不需要任何額外的工作。如果想要使用其他投影的數(shù)據(jù)，再使用j.transform方法之前需要添加一些額外的信息。例如，使用EPSG:21781坐標參照系的數(shù)據(jù)，添加以下兩條script標簽到頁面中：然后在應用程序代碼中，注冊該投影并設置其有效范圍，代碼如下：/ This creates a projection object for the EPSG:21781 projection/ and sets a validity extent in t

25、hat projection object.var projection = j.get(EPSG:21781);projection.setExtent(485869.5728, 76443.1884, 837076.5648, 299941.7864); 圖層創(chuàng)建layers: new ol.layer.Tile( source: new ol.source.OSM() ),之前的示例中，創(chuàng)建一個新圖層后，將其添加到地圖配置對象的圖層數(shù)組中，以上代碼接受資源的所有默認選項。 樣式.ol-attribution a color: black;如何處理地

26、圖控件是本章節(jié)意外的內(nèi)容，但是這里的樣式聲明讓你先睹為快。默認情況下ol.control.Attribution控件被添加到所有地圖中，這使得地圖視窗中顯示圖層資源的歸屬信息來源，上述聲明改變了地圖中歸屬信息的樣式（版權行再地圖的右下方）。掌握了公開可用的緩存瓦片集的圖層用法，接下來將介紹專有的柵格圖層，詳見2.3 專有柵格圖層。 屬性控件配置默認情況下，ol.control.Attribution控件在頁面上添加了一個i（information）按鈕，點擊即可顯示歸屬地信息。為了符合OpenStreetMap的使用條款，并且將OpenStreetMap的歸屬地信息一直展現(xiàn)出來，

27、可添加以下代碼在ol.Map構(gòu)造函數(shù)中最為可選對象。controls: ol.control.defaults( attributionOptions: collapsible: false )這段代碼移除了i按鈕，使得歸屬地信息一直展現(xiàn)在視圖中。2.3 專有柵格圖層（Bing）在前面的章節(jié)中，圖層是基于符合標準的WMS以及自定義瓦片緩存顯示的，在線地圖（或者瓦片地圖客戶端）主要是通過可用的專有地圖瓦片服務進行廣泛推廣，OpenLayers提供的圖層類型能通過使用它們的API來調(diào)用這些專有服務。本章節(jié)使用的示例，是在上一章節(jié)示例的基礎上，添加一個使用Bing瓦片的圖層。（1） 將map.htm

28、l文件中配置OSM資源的代碼替換為ol.source.BingMaps：source: new ol.source.BingMaps( imagerySet: Road, key: Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3)注：Bing瓦片API要求用戶注冊一個API密鑰，該密鑰將在地圖應用程序中使用，示例中的密鑰不能再產(chǎn)品中使用。（1） 保存修改，在瀏覽器中查看該頁面：http:/localhost:8000/ol_workshop/map.html：完整示例代碼如下： #map height: 256p

29、x; width: 512px; .ol-attribution a color: black; OpenLayers 3 example My Map 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: j.

30、transform(-93.27, 44.98, EPSG:4326, EPSG:3857), zoom: 9 ) ); 2.4 矢量圖層矢量圖層由ol.layer.Vector展示，并處理客戶端矢量數(shù)據(jù)的顯示。以下將使用最初的WMS示例來獲取一個世界地圖，并在其基礎上添加一個帶有一些要素的矢量圖層。 #map height: 256px; width: 512px; OpenLayers 3 example My Map var map = new ol.Map( target: map, layers: new ol.layer.Tile( title: Global Imagery, s

31、ource: new ol.source.TileWMS( url: /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 ) ); 2.4.1 添加矢量圖層（1）打開map.html文件，將初始化WMS的示例復制其中，保存修改后在瀏覽器中確定地圖正常顯示：http:/localh

32、ost:8000/ol_workshop/map.html。（2）在地圖初始化代碼中，找到瓦片圖層的加載，在其后添加一下新的圖層，以下代碼實現(xiàn)請求一組存放在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)

33、 ) )以上示例顯示 了世界地圖，附以白色的圓圈代表地震帶。注：GeoJSON數(shù)據(jù)坐標系與地圖視圖的相同，均為EPSG:4326，因此無需再次設置投影，只有在資源與視圖的投影不同的情況下，才需要在資源中明確指定projection屬性來表示要素緩存的投影，這以為著地圖視圖的投影通常可以被指定。2.4.2 詳細說明上述示例中，設置圖層的標題title為“Earthquakes”，使用ol.source.GeoJSON類型的資源source，該資源指向一個明確的url。如果你希望要素的樣式基于其屬性，可以使用一個樣式函數(shù)替代ol.style.Style，從而配置ol.layer.Vector的樣式

34、。（1） 上述示例中地圖上白色的圓圈代表ol.layer.Vector圖層中的ol.Feature對象，每一個要素都包含title和summary屬性信息。地圖中注冊一個命名為forEachFeatureAtPixel的單擊監(jiān)聽事件，并在地圖視圖下在顯示地震信息。（2） 矢量圖層的數(shù)據(jù)來自于美國地質(zhì)調(diào)查局（USGS）公布的地震資料(/earthquakes/catalogs/)，找到OpenLayers 3支持格式的矢量圖層信息保存為文檔，將該文檔放置在項目的data文件夾下，就能在地圖中顯示該矢量圖層。2.5 矢量影像在上一章節(jié)的示例中，使用

35、了ol.layer.Vector類，在動態(tài)縮放的過程中，要素不斷重新渲染（點符號大小保持固定），在矢量圖層中，OpenLayers基于每一動畫幀重新渲染資源數(shù)據(jù)，這使得在視圖的分辨率變化后，筆劃、點符號、標簽持續(xù)的渲染。另一種渲染策略是避免在視圖轉(zhuǎn)換的過程中重渲染，并將之前視圖的狀態(tài)下的渲染輸出重定位和改變其規(guī)模。通過使用包含ol.source.ImageVector的ol.layer.Image可以實現(xiàn)以上效果。這種結(jié)合，使得當視圖沒有動態(tài)變化時，保存渲染數(shù)據(jù)的“快照”，在視圖轉(zhuǎn)換過程中，重利用這些“快照”。以下示例使用了包含ol.source.ImageVector的ol.layer.Im

36、age類，實現(xiàn)分塊渲染，使用該類可以僅渲染數(shù)據(jù)的一小部分，這種結(jié)合將適用于包含大量相對靜態(tài)數(shù)據(jù)渲染的應用程序。2.5.1 ol.source.ImageVector回顧2.4 矢量圖層添加的包含地震數(shù)據(jù)的地圖示例，將此示例改為分塊渲染，將矢量圖層替換為如下代碼：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( i

37、mage: new ol.style.Circle( radius: 3, fill: new ol.style.Fill(color: white) ) ) )通過以上方式，矢量數(shù)據(jù)由圖像描繪，但視覺上仍是要素的形式，實現(xiàn)了性能和質(zhì)量之間本質(zhì)的折中。2.5.2 詳細說明在上述代碼中，使用ol.layer.Image代替ol.layer.Vector，然而，仍可以通過ol.source.ImageVector連接原始的ol.source.GeoJSON類型數(shù)據(jù)，從而使用是矢量數(shù)據(jù)，這里的樣式提供了對ol.source.ImageVector的配置，而不是直接配置圖層。3 控件與交互3.1 顯示

38、比例尺比例尺是顯示在地圖上的典型窗口小部件，OpenLayers3提供了ol.control.SaleLine來實現(xiàn)。3.1.1創(chuàng)建比例尺在地圖配置的范圍內(nèi)，添加如下代碼，給地圖創(chuàng)建一個新的比例尺控件：controls: ol.control.defaults().extend( new ol.control.ScaleLine(),一個默認的比例尺將出現(xiàn)在地圖視圖的左下角。3.1.2 移動比例尺控件如果覺得比例尺控件在圖形中看不清，一下提供幾種策略來提高比例尺的可見性。在文檔的CSS中添加一些樣式聲明，可以包括背景色，填充等，以下代碼可作為參考：.ol-scale-line, .ol-sca

39、le-line:not(ie8andbelow) background: black; padding: 5px;如果地圖視圖擁擠難耐，為了避免過度擁擠，可以將比例尺控件移到其他位置。實現(xiàn)此功能，需要在標記中創(chuàng)建一個額外元素來存放比例尺控件。（1） 在map.html頁面的范圍內(nèi)創(chuàng)建一個新的塊級元素，為了更好的指向該元素，設置其id屬性scale-line，代碼如下：將以上代碼放置在后最合理。（2） 修改比例尺控件的創(chuàng)建代碼，使其指向scale-line元素：controls: ol.control.defaults().extend( new ol.control.ScaleLine(cla

40、ssName: 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：實現(xiàn)比例尺控件在地圖視圖以外。注：想要創(chuàng)建自定義控件，可以從ol.control.Control繼承（通過使用ol

41、.inherits）。3.2 選擇要素矢量數(shù)據(jù)服務的一大優(yōu)點是，用戶可以和數(shù)據(jù)交互，在本節(jié)示例中，將創(chuàng)建一個矢量圖層，用戶可以選擇和查看要素信息。之前的示例展示了ol.control.Control的用法，控件可以在地圖上直接顯示，或者在文檔中添加一個DOM元素，eraction.Interaction負責處理用戶交互，但是通常沒有視覺上的展現(xiàn)。一下示例將展示eraction.Select的使用，實現(xiàn)與矢量圖層上的要素交互?；仡?.4 矢量圖層中矢量圖層的創(chuàng)建，在其基礎上，添加選擇交互工具，完整代碼如下： #map height: 256px; width: 512px; OpenLayers 3 example My Map var map = new ol.Map( interactions: eraction.defaults().extend( new eraction.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 ) ) ) ) )