openlayer3 基礎學習一創建&顯示地圖
阿新 • • 發佈:2018-05-07
創建 構造 ext 業務 HR var open 基礎 rip
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <title>OpenLayers example</title> </head> <body><h2>My Map</h2> <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.OSM()}) ],
view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 }) }); </script></body> </html>
註意,其實上面這段代碼就只有一條語句:
new ol.Map({...});
其他代碼只是用於設置地圖的構造參數。由此可以推測出ol.Map
是最主要的地圖類,創建地圖就需要構造這麽一個對象。接下來依次分析每一個參數部分的代碼。
-
參數
layers
:layers: [ // 創建一個使用Open Street Map地圖源的瓦片圖層 new ol.layer.Tile({source: new ol.source.OSM()}) ],
從名字和具體的值可見這個地方可以設置多個
layer
,它是OpenLayers 3地圖的組成結構單元,地圖是由多個layer
組成的,這種設計類似於Photoshop裏面的圖層,多個圖層是可以疊加的,在最上面的會覆蓋下面的,以此類推。在代碼中我們添加了一個Open Street Map的地圖layer
。 -
參數
view
:view: new ol.View({ center: [0, 0], // 定義地圖顯示中心於經度0度,緯度0度處 zoom: 2 // 並且定義地圖顯示層級為2 }),
通過字面意思可以看出,它為地圖定義顯示窗口,對應
ol.View
類,可以自定義地圖顯示的中心點,縮放層級等。 -
參數
target
:target: ‘map‘
指定地圖在頁面中具體哪個位置進行顯示,為此要記住地圖顯示還是離不開使用dom來實現。雖然和地圖業務沒什麽關系,但也必不可少,因為它是
Web GIS
,最基本的還是依賴於HTML。
通過上面的源碼解讀,我們可以發現OpenLayers 3地圖主要是由layer
和view
組成,layer
可以有多個,view
只能有一個。
openlayer3 基礎學習一創建&顯示地圖