OpenLayers - Source簡介 （四）

這是我參與 8 月更文挑戰的第 14 天，活動詳情查看：8 月更文挑戰

Source是什麼

• 數據來源和格式。簡單理解就是在使用layers(圖層)時，不一樣的圖層須要傳入不一樣的數據類型，才能渲染地圖。它們須要的數據格式都是經過Source定義好的，咱們只須要把現有的數據，按照規定傳入數據源中，就不須要關心其餘操做。

Source的一些數據類型

• ol.source.BingMaps Bing 地圖圖塊數據的圖層源。
• ol.source.CartoDB CartoDB Maps API 的圖層源。
• ol.source.Cluster 聚簇矢量數據。
• ol.source.Vector 提供矢量圖層數據。
• ol.source.Image 提供單一圖片數據的類型。
• ol.source.ImageCanvas 數據來源是一個 canvas 元素，其中的數據是圖片。
• ol.source.ImageMapGuide Mapguide 服務器提供的圖片地圖數據。
• ol.source.ImageStatic 提供單一的靜態圖片地圖。
• ol.source.ImageVector數據來源是一個 canvas 元素，可是其中的數據是矢量來源。
• ol.source.ImageWMS WMS 服務提供的單一的圖片數據。
• ol.source.MapQuest MapQuest 提供的切片數據。
• ol.source.Stamen Stamen 提供的地圖切片數據。
• ol.source.Tile 提供被切分爲網格切片的圖片數據。
• ol.source.TileVector 被切分爲網格的矢量數據。
• ol.source.TileDebug 並不從服務器獲取數據。
• ol.source.TileImage 提供切分紅切片的圖片數據。
• ol.source.TileUTFGrid TileJSON 格式 的 UTFGrid 交互數據。
• ol.source.TileJSON TileJSON 格式的切片數據。
• ol.source.TileArcGISRest ArcGIS Rest 服務提供的切片數據。
• ol.source.WMTS WMTS 服務提供的切片數據。
• ol.source.Zoomify Zoomify 格式的切片數據。
• ol.source.OSM OpenStreetMap 提供的切片數據。
• ol.source.XYZ 具備在 URL 模板中定義的一組 XYZ 格式的 URL 的切片數據的圖層源。

經過Layer使用Source

ol.source.XYZ 切片數據源

• 在ol.layer.Tile圖層中使用。

var layerTile = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
      })
    })
複製代碼

• 經過url來獲取高德地圖的切片數據。

ol.source.Vector 矢量圖層的數據來源

• 經常使用屬性

1. attribution 地圖右下角的提示信息，傳入字符串。
2. features 地理要素。傳入ol.Feature對象。
3. url 要素數據的地址。
4. format url屬性設置後，設置url返回的要素格式。傳入ol.format下的格式。

• 使用features加載數據。

var polygon = new ol.geom.Polygon([
      [
        [37, 19],
        [43, 19],
        [43, 3],
        [37, 3],
        [37, 19]
      ]
    ])
    polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'))
    // 多邊形要素
    var polygonFeature = new ol.Feature(polygon)
    // 矢量圖層
    var source = new ol.source.Vector({ features: [polygonFeature] })

    var vectorLayer = new ol.layer.Vector({
      source: source,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          //線樣式
          color: '#ffcc33',
          width: 2
        })
      })
    })
    map.addLayer(vectorLayer)
複製代碼

• 除了使用函數建立要素數據，也但是使用GeoJSON格式數據。

// GeoJSON 格式數據
    const geojsonObject = {
      type: 'FeatureCollection',
      crs: {
        type: 'name',
        properties: {
          name: 'EPSG:3857'
        }
      },
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-5e6, 6e6],
                [-5e6, 8e6],
                [-3e6, 8e6],
                [-3e6, 6e6],
                [-5e6, 6e6]
              ]
            ]
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-2e6, 6e6],
                [-2e6, 8e6],
                [0, 8e6],
                [0, 6e6],
                [-2e6, 6e6]
              ]
            ]
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [1e6, 6e6],
                [1e6, 8e6],
                [3e6, 8e6],
                [3e6, 6e6],
                [1e6, 6e6]
              ]
            ]
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [-2e6, -1e6],
                [-1e6, 1e6],
                [0, -1e6],
                [-2e6, -1e6]
              ]
            ]
          }
        }
      ]
    }
    // 矢量圖層
    var source = new ol.source.Vector({ features: new ol.format.GeoJSON().readFeatures(geojsonObject) })
    var vectorLayer = new ol.layer.Vector({
      source: source,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          //線樣式
          color: '#ffcc33',
          width: 2
        })
      })
    })
    map.addLayer(vectorLayer)
複製代碼

1. GeoJSON 是一種用於編碼各類地理數據結構的格式。也是咱們最經常使用的數據格式。
2. 通常使用url獲取的也是這種格式。

• 由於Source的數據類型不少，每種都有本身的參數，事件等。就不一一介紹了，後面使用不一樣圖層時會作講解。
• 須要記住 source 是 layer 中必須的選項，定義着地圖數據的來源。並且source是支持多種數格式。