OpenLayers入門教程詳細_第1頁
OpenLayers入門教程詳細_第2頁
OpenLayers入門教程詳細_第3頁
OpenLayers入門教程詳細_第4頁
OpenLayers入門教程詳細_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

2、Map4View4Source5Layer5總結(jié)6Openlayers 3實踐71 地圖顯示71.1創(chuàng)建一副地圖71.2 剖析你的地圖81.3 Openlayers的資源112 圖層與資源122.1 網(wǎng)絡(luò)地圖服務(wù)圖層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 設(shè)置矢量圖層的樣式38基本概念MapViewSourceLayerMapOpenLayers 3的核心部件是Map（

3、ol.Map）。它被呈現(xiàn)到對象target容器（例如，包含在地圖的網(wǎng)頁上的div元素）。所有地圖的屬性可以在構(gòu)造時進行配置，或者通過使用setter方法，如setTarget（）。<div id="map" style="width: 100%, height: 400px"></div><script> var map = new ol.Map(target: 'map');</script>Viewol. View負責地圖的中心點，放大，投影之類的設(shè)置。一個ol.View實例包含投影pr

4、ojection，該投影決定中心center 的坐標系以及分辨率的單位，如果沒有指定（如下面的代碼段），默認的投影是球墨卡托（EPSG：3857），以米為地圖單位。放大zoom 選項是一種方便的方式來指定地圖的分辨率，可用的縮放級別由maxZoom （默認值為28）、zoomFactor （默認值為2）、maxResolution （默認由投影在256×256像素瓦片的有效成都來計算） 決定。起始于縮放級別0，以每像素maxResolution 的單位為分辨率，后續(xù)的縮放級別是通過zoomFactor區(qū)分之前的縮放級別的分辨

5、率來計算的，直到縮放級別達到maxZoom 。map.setView(new ol.View( center: 0, 0, zoom: 2 );SourceOpenLayers 3使用子類獲取遠程數(shù)據(jù)圖層，包含免費的和商業(yè)的地圖瓦片服務(wù)，如OpenStreetMap、Bing、OGC資源（WMS或WMTS）、矢量數(shù)據(jù)（GeoJSON格式、KML格式）等。var osmSource = new ol.source.OSM();Layer一個圖層是資源中數(shù)據(jù)的可視化顯示，OpenLayers 3包含三種基本圖層類型：、 和 。 用于顯示瓦片資源，這些瓦片提供了預渲染，

6、并且由特定分別率的縮放級別組織的瓦片圖片網(wǎng)格組成。 用于顯示支持渲染服務(wù)的圖片，這些圖片可用于任意范圍和分辨率。用于顯示在客戶端渲染的矢量數(shù)據(jù)。 var osmLayer = new ol.layer.Tile(source: osmSource); map.addLayer(osmLayer);總結(jié)上述片段可以合并成一個自包含視圖和圖層的地圖配置：<div id="map" style="width: 100%, height: 400px"></div><script> new ol.Map( layers: ne

7、w ol.layer.Tile(source: new ol.source.OSM() , view: new ol.View( center: 0, 0, zoom: 2 ), target: 'map' );</script>Openlayers 3實踐1 地圖顯示1.1創(chuàng)建一副地圖在openlayers中，Map是圖層、各種交互以及處理用戶交互控件的集合，地圖由三個基本成分生成：標記，樣式聲明和初始化代碼。以下是一個完整的OpenLayers3地圖示例。<!doctype html><html lang="en">

8、<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"></scri

9、pt> </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: '

10、;/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） 下載（2） 創(chuàng)建一個新的文件，命名為map.html，

11、將以上代碼復制進該文件后放入下載的文件夾的根目錄下；（3） 在瀏覽器中輸入：http:/localhost:8000/ol_workshop/map.html，我們將打開一個工作的地圖。成功地創(chuàng)建了第一張地圖，我們將繼續(xù)關(guān)注地圖的組成部分，詳見1.2 剖析你的地圖。1.2 剖析你的地圖正如前一部分演示的那樣，一副地圖通過將標記，樣式聲明和初始化代碼三部分組織在一起而生成，接下來將詳細的介紹這三個組成部分。1.2.1 地圖標記標記為上例中的地圖生成的一個文檔元素：<div id="map"></div>在此示例中，我們用<div>元素作為地

12、圖顯示的容器，其他塊級元素也能做視圖的容器。在這種情況下，我們設(shè)置容器的id屬性，所以我們可以將其作為地圖的對象。1.2.2 地圖樣式OpenLayers帶有一個默認的樣式表，指定地圖相關(guān)的元素應(yīng)如何顯示，我們明確的將樣式表引用到map.html頁面中。OpenLayers不對地圖的大小做預定義，因此在默認樣式表之后，我們需要包括至少一個自定義樣式聲明來說明地圖在頁面上的空間。<link rel="stylesheet" href="ol3/ol.css" type="text/css"><style> #ma

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

14、9;, layers: new ol.layer.Tile( source: 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 ) );<

15、;/script>注：這些步驟的順序很重要，OpenLayers庫必須在在自定義腳本執(zhí)行之前加載，在此示例中，OpenLayers庫在文檔的<head>部分加載（<script src="ol3/ol.js"></script>）。同樣的，在文檔中作為顯示容器的元素（該實例中為<div id="map"></div>）準備好之前，自定義地圖初始化代碼是不能執(zhí)行的，將初始化代碼添加到文檔中<body>的后面，我們能在地圖生成前，確保庫已加載，顯示容器已準備好。

16、接下來，將詳細介紹初始化腳本的內(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( url: 'http:/maps

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

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

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

20、上，修改圖層來理解其運行機制。layers: new ol.layer.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構(gòu)造函數(shù)在1.1創(chuàng)建一副地圖創(chuàng)建的示例中，使用的數(shù)據(jù)資源是，我們可以從t

21、itle關(guān)鍵字的字面上理解它的含義，但是基本上來說，這里的關(guān)鍵字可以是任意名稱，在OpenLayers 3中，圖層和資源有一個區(qū)別，而在OpenLayers 2中，這兩部分一起組成了一個圖層。表示圖像的規(guī)則網(wǎng)格，而表示單個圖像，基于圖層類型，我們將使用不同的資源（與）。2.1.3 The S構(gòu)造函數(shù)url指向的是WMS服務(wù)的在線資源，params是對象參數(shù)名稱及其值，由于在OpenLayers中，默認WMS版本是，如果WMS不支持該版本，需要在params中提供一個低版本。（1） 該示例中WMS提供了一個名為“openstreetmap”的圖層，將LAYERS 參數(shù)的值由“

22、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修改為 ，將LA

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

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

25、>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 ) );<

26、/script>（2） 在文檔的<head>中，添加以下圖層屬性的樣式說明：<style> #map width: 512px; height: 256px; .ol-attribution a color: black; </style>（3） 保存修改，在瀏覽器中查看該頁面：http:/localhost:8000/ol_workshop/map.html： 投影回顧地圖的視圖定義：view: new ol.View( center: j.transform(-93.27, 44.98, 'EPSG:4326

27、9;, 'EPSG:3857'), zoom: 9)地理空間數(shù)據(jù)可能來自各種坐標參照系，一個數(shù)據(jù)集可能是以度為單位的地理（經(jīng)緯）坐標系，另一個可能是以米為單位的投影坐標系，對坐標系的全面討論超出了本實踐的范圍，但了解其基本概念是很重要的。OpenLayers 3需要知道所使用數(shù)據(jù)的坐標系，在內(nèi)部，由對象展現(xiàn)，j命名空間中的transform 方法使用字符串表示坐標參考系（上述示例中的"EPSG:4326"以及"EPSG:3857"）。OpenStreetMap 瓦片數(shù)據(jù)是墨卡托投影，因此，我們需要

28、使用墨卡托坐標了設(shè)置初始化時的中心點。由于一個地方的地理坐標相對來說更容易知道，使用方法將地理坐標系（"EPSG:4326"）轉(zhuǎn)化為墨卡托坐標系（"EPSG:3857"）。OpenLayers 3包含地理坐標系與墨卡托坐標系間相互轉(zhuǎn)換的方法，因此我們可以使用方法而不需要任何額外的工作。如果想要使用其他投影的數(shù)據(jù)，再使用方法之前需要添加一些額外的信息。例如，使用"EPSG:21781" 坐標參照系的數(shù)據(jù)，添加以下兩條script標簽到頁面中：<script src=" type="text/

29、javascript"></script><script src="http:/epsg.io/21781-1753.js" type="text/javascript"></script>然后在應(yīng)用程序代碼中，注冊該投影并設(shè)置其有效范圍，代碼如下：/ This creates a projection object for the EPSG:21781 projection/ and sets a "validity extent" in that projection objec

30、t.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;如何處理地圖控件是本章節(jié)意外的

31、內(nèi)容，但是這里的樣式聲明讓你先睹為快。默認情況下控件被添加到所有地圖中，這使得地圖視窗中顯示圖層資源的歸屬信息來源，上述聲明改變了地圖中歸屬信息的樣式（版權(quán)行再地圖的右下方）。掌握了公開可用的緩存瓦片集的圖層用法，接下來將介紹專有的柵格圖層，詳見2.3 專有柵格圖層。 屬性控件配置默認情況下，控件在頁面上添加了一個i（information）按鈕，點擊即可顯示歸屬地信息。為了符合OpenStreetMap的使用條款，并且將OpenStreetMap的歸屬地信息一直展現(xiàn)出來，可添加以下代碼在ol.Map構(gòu)造函數(shù)中最為可選對象。controls: ol.control.default

32、s( attributionOptions: collapsible: false )這段代碼移除了i按鈕，使得歸屬地信息一直展現(xiàn)在視圖中。2.3 專有柵格圖層（Bing）在前面的章節(jié)中，圖層是基于符合標準的WMS以及自定義瓦片緩存顯示的，在線地圖（或者瓦片地圖客戶端）主要是通過可用的專有地圖瓦片服務(wù)進行廣泛推廣，OpenLayers提供的圖層類型能通過使用它們的API來調(diào)用這些專有服務(wù)。本章節(jié)使用的示例，是在上一章節(jié)示例的基礎(chǔ)上，添加一個使用Bing瓦片的圖層。（1） 將map.html文件中配置OSM資源的代碼替換為：source: new ol.source.BingMaps( imag

33、erySet: 'Road', key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3')注：Bing瓦片API要求用戶注冊一個API密鑰，該密鑰將在地圖應(yīng)用程序中使用，示例中的密鑰不能再產(chǎn)品中使用。（1） 保存修改，在瀏覽器中查看該頁面：http:/localhost:8000/ol_workshop/map.html：完整示例代碼如下：<!doctype html><html lang="en"> <head> <

34、;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

35、 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( image

36、rySet: 'Road', key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3' ) ) , view: new ol.View( center: j.transform(-93.27, 44.98, 'EPSG:4326', 'EPSG:3857'), zoom: 9 ) ); </script> </body></html>2.4 矢量圖層矢量圖層由展示，并處理客戶端矢量數(shù)據(jù)的顯示。以下將

37、使用最初的WMS示例來獲取一個世界地圖，并在其基礎(chǔ)上添加一個帶有一些要素的矢量圖層。<!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&

38、lt;/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

39、: new ol.layer.Tile( title: "Global Imagery", source: 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, maxRes

40、olution: 0.703125 ) ); </script> </body></html>2.4.1 添加矢量圖層（1）打開map.html文件，將初始化WMS的示例復制其中，保存修改后在瀏覽器中確定地圖正常顯示：http:/localhost:8000/ol_workshop/map.html。（2）在地圖初始化代碼中，找到瓦片圖層的加載，在其后添加一下新的圖層，以下代碼實現(xiàn)請求一組存放在GeoJSON中的要素：new ol.layer.Vector( title: 'Earthquakes', source: new ol.sourc

41、e.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數(shù)據(jù)坐標系與地圖視圖的相同，均為EPSG:4326，因此無需再次設(shè)置投影，只有在資源與視圖的投影不同的情況下，才需要在資源中明確指定projection 屬性來表示要素緩存的

42、投影，這以為著地圖視圖的投影通常可以被指定。2.4.2 詳細說明上述示例中，設(shè)置圖層的標題title為“Earthquakes”，使用類型的資源source，該資源指向一個明確的url。如果你希望要素的樣式基于其屬性，可以使用一個樣式函數(shù)替代，從而配置的樣式。（1） 上述示例中地圖上白色的圓圈代表圖層中的ol.Feature對象，每一個要素都包含title 和summary 屬性信息。地圖中注冊一個命名為forEachFeatureAtPixel的單擊監(jiān)聽事件，并在地圖視圖下在顯示地震信息。（2） 矢量圖層的數(shù)據(jù)來自于美國地質(zhì)調(diào)查局（USGS）公布的地震資料()，找到Ope

43、nLayers 3支持格式的矢量圖層信息保存為文檔，將該文檔放置在項目的data文件夾下，就能在地圖中顯示該矢量圖層。2.5 矢量影像在上一章節(jié)的示例中，使用了類，在動態(tài)縮放的過程中，要素不斷重新渲染（點符號大小保持固定），在矢量圖層中，OpenLayers 基于每一動畫幀重新渲染資源數(shù)據(jù)，這使得在視圖的分辨率變化后，筆劃、點符號、標簽持續(xù)的渲染。另一種渲染策略是避免在視圖轉(zhuǎn)換的過程中重渲染，并將之前視圖的狀態(tài)下的渲染輸出重定位和改變其規(guī)模。通過使用包含的可以實現(xiàn)以上效果。這種結(jié)合，使得當視圖沒有動態(tài)變化時，保存渲染數(shù)據(jù)的“快照”，在視圖轉(zhuǎn)換過程中，重利用這些“快照”。以下示例使用了

44、包含的類，實現(xiàn)分塊渲染，使用該類可以僅渲染數(shù)據(jù)的一小部分，這種結(jié)合將適用于包含大量相對靜態(tài)數(shù)據(jù)渲染的應(yīng)用程序?；仡?.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( image: n

45、ew ol.style.Circle( radius: 3, fill: new ol.style.Fill(color: 'white') ) ) )通過以上方式，矢量數(shù)據(jù)由圖像描繪，但視覺上仍是要素的形式，實現(xiàn)了性能和質(zhì)量之間本質(zhì)的折中。2.5.2 詳細說明在上述代碼中，使用代替，然而，仍可以通過連接原始的類型數(shù)據(jù)，從而使用是矢量數(shù)據(jù)，這里的樣式提供了對的配置，而不是直接配置圖層。3 控件與交互3.1 顯示比例尺比例尺是顯示在地圖上的典型窗口小部件，OpenLayers 3提供了來實現(xiàn)。創(chuàng)建比例尺在地圖配置的范圍內(nèi)，添加如下代碼，給地圖創(chuàng)建一個新的比例尺控件：co

46、ntrols: ol.control.defaults().extend( new ol.control.ScaleLine(),一個默認的比例尺將出現(xiàn)在地圖視圖的左下角。3.1.2 移動比例尺控件如果覺得比例尺控件在圖形中看不清，一下提供幾種策略來提高比例尺的可見性。在文檔的CSS中添加一些樣式聲明，可以包括背景色，填充等，以下代碼可作為參考：.ol-scale-line, .ol-scale-line:not(ie8andbelow) background: black; padding: 5px;如果地圖視圖擁擠難耐，為了避免過度擁擠，可以將比例尺控件移到其他位置。實現(xiàn)此功能，需要在標記

47、中創(chuàng)建一個額外元素來存放比例尺控件。（1） 在map.html頁面的<body>范圍內(nèi)創(chuàng)建一個新的塊級元素，為了更好的指向該元素，設(shè)置其id屬性scale-line，代碼如下：<div id="scale-line" class="scale-line"></div>將以上代碼放置在<div id="map"></div> 后最合理。（2） 修改比例尺控件的創(chuàng)建代碼，使其指向scale-line元素：controls: ol.control.defaults().e

48、xtend( 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：實現(xiàn)

49、比例尺控件在地圖視圖以外。注：想要創(chuàng)建自定義控件，可以從繼承（通過使用ol.inherits）。3.2 選擇要素矢量數(shù)據(jù)服務(wù)的一大優(yōu)點是，用戶可以和數(shù)據(jù)交互，在本節(jié)示例中，將創(chuàng)建一個矢量圖層，用戶可以選擇和查看要素信息。之前的示例展示了的用法，控件可以在地圖上直接顯示，或者在文檔中添加一個DOM元素，負責處理用戶交互，但是通常沒有視覺上的展現(xiàn)。一下示例將展示的使用，實現(xiàn)與矢量圖層上的要素交互?；仡?.4 矢量圖層中矢量圖層的創(chuàng)建，在其基礎(chǔ)上，添加選擇交互工具，完整代碼如下：<!doctype html><html lang="en"> <hea

50、d> <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>

51、</head> <body> <h1>My Map</h1> <div id="map"></div> <script type="text/javascript"> var map = new ol.Map( interactions: eraction.defaults().extend( new eraction.Select( style: new ol.style.Style( image: new ol.style.Circle( ra

52、dius: 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: '/geowebcache/service/wms&

53、#39;, 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: &

54、#39;#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 繪制要素通過使用可以繪制

55、新的要素，一個繪制交互工具由矢量資源和幾何類型構(gòu)成?；仡?.4 矢量圖層中矢量圖層的創(chuàng)建，在其基礎(chǔ)上，添加繪制交互工具，完整代碼如下：<!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</titl

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論