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

LayerWhat is the

  1. Layers are like images that contain elements like text or graphics. They are placed on top of each other in sequence and combined to form the final look of the page.LayerIt’s the function that creates this graph by graph.

  1. LayerIs the base class from which all layer types are derived. Defines features and methods that are common to many different layer types.
  2. In order to useLayerNeed to start withsourceThe data is received and then added tomapIn the.

Commonly used parameters

  • classNameSet the CSS class name for the layer element.
  • extentLayer render boundary range.
  • zIndexLayer renderedz-index. When rendering, the layers will be sorted, first by z-index, then by position.
  • sourceThe data source for this layer.
  • mapMap example.
  • renderOverrides the default rendering of the layer.

Common Listening Events

  • prerenderBefore the layer starts rendering.
  • postrenderWhen the rendering is complete.
  • errorAny errors occur.
  • changeThe layer has been changed.

The layer type in OpenLayers

  • Graticule, overlay the grid ruler layer on the map.
  • HeatMap, the heat diagram.
  • Vector, vector graph.
  • VectorImage, a single vector layer.
  • VectorTile, vector tile layer.
  • WebGLPoints, the WebGL rendering of the massive point layer.
  • Tile, raster layer.

Using the layer

The Graticule layer

  • Render the layer of the grid for the coordinate system (currently EPSG:4326 only). Note that the view projection must define both scope and world scope.
    var gra = new ol.layer.Graticule({
      strokeStyle: new ol.style.Stroke({
        color: 'rgba(255,120,0,0.9)'.width: 2.lineDash: [0.5.4]}),showLabels: true.wrapX: false
    })
    map.addLayer(gra)
Copy the code

HeatMap layer

  • A layer used to render vector data as a heat map.
    var vector = new ol.layer.Heatmap({
      source: new ol.source.Vector({
        url: 'https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml'.format: new ol.format.KML({
          extractStyles: false})}),blur: parseInt(5),
      radius: parseInt(2)
    })

    map.addLayer(vector)
Copy the code

  • throughblurControl the edges of the dots and blur the edges.radiusSpecifies the radius of the dot.

The Vector layer

  • A vector layer is a layer type used to render vector data, usually used to draw regional overlays.
    var source = new ol.source.Vector({
      url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson'.format: new ol.format.GeoJSON()
    })

    vectorLayer = new ol.layer.Vector({
      // Initialize the vector layer
      source: source,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          / / line style
          color: '#ffcc33'.width: 2
        })
      })
    })
    map.addLayer(vectorLayer)
Copy the code

WebGLPoint Massive point layer

  • When the data is large, we need to draw points on the layer. useWebGLPointCan greatly improve performance.
  • WebGLPointLayer is a point Layer with WebGL as the rendering engine. As is known to all, The efficiency of WebGL in rendering a large amount of data (> 10K) is significantly better than Canvas or SVG, so WebGL as the rendering engine is almost the only choice for front-end rendering with large amount of data.
   const vectorSource = new ol.source.Vector({
      url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson'.format: new ol.format.GeoJSON()
    })
    let pointLayer = new ol.layer.WebGLPoints({
      source: vectorSource,
      style: {
        symbol: {
          symbolType: 'circle'.size: ['interpolate'['linear'], ['get'.'population'].40000.8.2000000.28].color: '# 006688'.rotateWithView: false.offset: [0.0].opacity: ['interpolate'['linear'], ['get'.'population'].40000.0.6.2000000.0.92]
        }
      }
    })

    map.addLayer(pointLayer)
Copy the code

conclusion

  • inThe GIS mapLayers are a very central concept in the development of the. As you get deeper, you’ll find that the map is presented on different layers, one on top of the other.

– Layer first class citizen in OpenLayers, which simply means that all functions are based on layers. For example, with the Massive points function, the first layer loads the raster tile layer, then draws the image through the massive points layer, and then overlays the raster tile layer.

Refer to the article

Examples of layers in Openlayers