入门基础(四)Source详解

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 矢量图层的数据来源

  • 常用属性

    • attribution 地图右下角的提示信息,传入字符串。
    • features 地理要素。传入ol.Feature对象。
    • url 要素数据的地址。
    • 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)
  • GeoJSON 是一种用于编码各种地理数据结构的格式。也是我们最常用的数据格式。

  • 一般使用url获取的也是这种格式。

ch3
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。