This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

What is the Source

  • Data source and format. The simple idea is to uselayers(layer), different layers need to pass in different data types before the map can be rendered. The data format they need is passedSourceBy definition, we just need to pass the existing data into the data source according to the rules, and we don’t need to care about other operations.

Some data types for the Source

  • ol.source.BingMapsBing Map block data layer source.
  • ol.source.CartoDBCartoDB Maps API layer source.
  • ol.source.ClusterCluster vector data.
  • ol.source.VectorProvides vector layer data.
  • ol.source.ImageProvides a single image data type.
  • ol.source.ImageCanvasThe data source is a Canvas element, where the data is an image.
  • ol.source.ImageMapGuideMapguide server provides picture map data.
  • ol.source.ImageStaticProvides a single static picture map.
  • ol.source.ImageVectorThe data source is a Canvas element, but the data in it is a vector source.
  • ol.source.ImageWMSSingle image data provided by the WMS service.
  • ol.source.MapQuestSlice data provided by MapQuest.
  • ol.source.StamenMap slice data provided by Stamen.
  • ol.source.TileProvides image data that is segmented into grid slices.
  • ol.source.TileVectorVector data divided into grids.
  • ol.source.TileDebugData is not fetched from the server.
  • ol.source.TileImageProvide picture data for cutting into slices.
  • ol.source.TileUTFGridUTFGrid interactive data in TileJSON format.
  • ol.source.TileJSONSlice data in TileJSON format.
  • ol.source.TileArcGISRestSlice data provided by ArcGIS Rest service.
  • ol.source.WMTSSlice data provided by the WMTS service.
  • ol.source.ZoomifySlice data in Zoomify format.
  • ol.source.OSMSlice data provided by OpenStreetMap.
  • ol.source.XYZLayer source with slice data for a set of URLS in XYZ format defined in the URL template.

Use Source through Layer

Ol.source. XYZ Slice data source

  • inol.layer.TileLayer.
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}'})})Copy the code
  • Obtain amap slice data through URL.

Ol.source. Vector Indicates the data source of the Vector layer

  • Commonly used attributes
  1. attributionThe prompt message in the lower right corner of the map, passing in the string.
  2. featuresGeographical elements. The incomingol.FeatureObject.
  3. urlThe address of the element data.
  4. format urlProperties are seturlThe format of the returned element. The incomingol.formatFormat.
  • usefeaturesLoad data.
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'))
    // Polygon elements
    var polygonFeature = new ol.Feature(polygon)
    // Vector layers
    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({
          / / line style
          color: '#ffcc33'.width: 2
        })
      })
    })
    map.addLayer(vectorLayer)
Copy the code

  • In addition to using functions to create element data, you can also use GeoJSON format data.
    // The data is in the GeoJSON format
    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[]]}}]}// Vector layers
    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({
          / / line style
          color: '#ffcc33'.width: 2
        })
      })
    })
    map.addLayer(vectorLayer)
Copy the code

  1. GeoJSONIs a format for encoding various geographic data structures. It is also our most common data format.
  2. General useurlThis is also the format that you get.
  • becauseSourceThere are many data types, each with its own parameters, events, and so on. I’m not going to go through all of this, but we’ll talk about how to use different layers later.
  • Need to remembersource 是 layerDefines the source of the map data. andsourceSupports multiple number formats.