openlayer3 基礎學習一建立&顯示地圖

ucsb發表於2018-05-07
地圖
<!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只能有一個。 

相關文章