What is Source?

• Data source and format. The simple understanding is that when using layers (layer) Different layers need to pass in different data types in order to render the map. The data formats they need are all defined by Source. We only need to transfer the existing data into the data source in accordance with the regulations, and we do not need to care about other operations.

Some data types of Source

• Ol.source.BingMaps Layer source of the map block data.

• ol.source.CartoDB The layer source of the CartoDB Maps API.

• Ol.source.Cluster Cluster vector data.

• Ol.source.Vector Provides vector layer data.

• Ol.source.Image Provides the type of single image data.

• ol.source.ImageCanvas The data source is a canvas element, in which the data is a picture.

• ol.source.ImageMapGuide Image map data provided by Mapguide server.

• ol.source.ImageStatic Provide a single static picture map.

• ol.source.ImageVector The data source is a canvas element, but the data in it is a vector source.

• ol.source.ImageWMS WMS A single picture data provided by WMS service.

• ol.source.MapQuest MapQuest Slice data provided.

• ol.source.Stamen Stamen Map slice data provided.

• ol.source.Tile Provide image data cut into grid slices.

• ol.source.TileVector Vector data cut into grids.

• ol.source.TileDebug Data is not obtained from the server.

• ol.source.TileImage Provide image data cut into slices.

• ol.source.TileUTFGrid UTFGrid interactive data in TileJSON format.

• ol.source.TileJSON Slice data in TileJSON format.

• ol.source.TileArcGISRest Slice data provided by ArcGIS Rest service.

• ol.source.WMTS Slice data provided by the WMTS service.

• ol.source.Zoomify Slice data in Zoomify format.

• ol.source.OSM Slice data provided by OpenStreetMap.

• ol.source.XYZ Layer source of slice data with a set of URLs in XYZ format defined in the URL template.

Using Source with Layer

Ol.source.XYZ slicing data source

1.Used in the ol.layer.Tile layer.

<pre> 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}' }) }) </pre>

2.The slice data of Amap is obtained by url.

Data Source of ol.source.Vector Vector layer

1.Common attribut.

• attribution The prompt message in the lower right corner of the map is passed in a string.

• features geographic elements. Pass in an ol.Feature object.

• url The address of the element data.

• format urlAfter property setting， set the element format returned by url. The format under ol. format is passed in.

2.Use features to load data.

<pre class="brush:py;"> 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 featur Var polygonFeature = new ol.Feature (polygon) / / Vector layer Translation merge failed

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)

</pre>

• In addition to using functions to create feature data,
• you can also use GeoJSON format data.

<pre> / / data in 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 layer 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) </pre>

1.GeoJSON is a format used to encode various geographic data structures. It is also our most commonly used data format.

2.This format is also commonly used to obtain the URL.

• Because Source has many data types, each has its own parameters, events, and so on. It will not be introduced one by one, which will be explained later when using different layers.
• You need to keep in mind that source is a necessary option in layer that defines the source of map data， and source supports a variety of number formats.