Openlayers Layer (Layers) detailed

Disclaimer: Article for my original, reproduced or use please specify the author and source!! Thank you!

If you are not a professional map worker, see the map, you may think that the map is a three-dimensional world mapping to two-dimensional space, a lot of information mixed together to represent spatial information Dynamic interactive picture, in fact, this is only a superficial phenomenon. A map is actually made up of one or more layers that use different layers to store different types of figures, such as layers that are stored on roads, layers that show congestion, and typically a basemap layer that contains basic geographic information, such as a political division.

In Openlayers, layers are layer represented by objects, mainly with,, 热度图层(heatmaplayer) 图片图层(imagelayer) , 切片图层(tilelayer) and 矢量图层(vectorlayer) four types, which inherit the layer class.

1. Layer class

Openlayers Initializes a map, requires at least one visible area (view), one or more layers, and a map-loaded target HTML tag (target), the most important of which is the layer.

Here you can see the definition of the layer class, which is described below:

/**
* @classdesc
* Abstract base class; Normally only used for creating subclasses and not
* Instantiated in Apps.
* A visual representation of raster or vector map data.
* Layers group together those properties, pertain to how, the data is
* displayed, irrespective of the source of that data.
*/

A layer is a virtual base class that is only used to inherit and implement subtypes and cannot be instantiated by itself. The main function is to visualize the vector map data and raster map data. The appearance of a layer is primarily related to how data is rendered, and is not related to the source of the data.

When initializing, the parameters passed in are:

• brightness, brightness, default = 0 ,
• contrast, contrast, default 1 ,
• hue, hue, default 0
• Opacity, transparency, default to 1 , full transparency,
• saturation, saturation, 1 ,
• source, figure The source of the layer, if the corresponding parameter is not passed in the constructor, you can call the Ol.layer.layer#setsource method to set the source: Layer.setsource (source) ;
• visible, invisible, true ,
• extent, the area rendered by the layer, which is the area of the map that is visible in the browser window. Extent is a rectangular range, with the format [number, number, number, number] representing [left, Bottom, right, top] respectively. If this parameter is not set, the layer is not displayed;
• minresolution, the minimum resolution that the layer is visible, the layer is hidden when the layer's zoom level is smaller than this resolution, and
• maxresolution The maximum resolution that the layer is visible, The layer is hidden when the layer's zoom level equals or exceeds the resolution.

The common methods that are included are:
-Getlayersarray () to get an array of all the layers;
-Getlayerstatesarray () to get an array of all layer states;
-GetSource () to obtain the source of the corresponding layer;
-Getsourcestate () to obtain the source state of the corresponding layer;
-Handlesourcechange_ (), the function that handles the change of the source;
-Handlesourcepropertychange_ (), the function that handles the change of the source property;
-SetSource (), sets the layer's Source property, and the parameter is an source object.

The private methods that are included are:
-Visibleatresolution (), parameters are layerstate and resolution, if the layer is visible, returns true , if the resolution is passed in, the resolution is also compared to minresolution and Between the maxresolution.

In the parameters passed into the constructor, source is a relatively important property, without it, the layer has no substance, what is the source, open the Ol.source directory can be seen, there is a source base class, the rest are inherited its subclasses, these subclasses are very many:

• Imagesource.js (layer source base class for Imagelayer)

  • Imagecanvassource.js
  • Imagemapguidesource.js
  • Imagestaticsource.js
  • Imagevectorsource.js
  • Imagewmssource.js

• Tilesource.js (source base class for tile layer –tilelayer)

  • Tilearcgisrestsource.js
  • Tiledebugsource.js
  • Tilejsonsource.js
  • Tileutfgridsource.js
  • Tilevectorsource.js
  • Tilewmssource.js
  • Tileimagesource.js
    
    • Zoomifysource.js
    • Wmtssource.js, WMTS published tile layer for a functional server
    • Bingmapssource.js,bingmaps also belongs to the tile layer type, because Microsoft provides a slice
    • Xyzsource.js, a data set with XYZ format
      
      • Mapquestsource.js
      • Osmsource.js
      • Stamensource.js

• Vectorsource.js (layer source base class for Vectorlayer)

  • Clustersource.js

• Wmssource.js, including,,,, geoserver geoserver geoserver and geoserver so on, the WMS protocol-based layer services published by these map servers

Map layer data comes from a variety of sources and formats. Practical application, should be based on the actual situation to choose.

2. Types of Layers

The Layer types in Openlayers 3.x include the Heatmaplayer, Imagelayer, Tilelayer, and Vectorlayer four types, all of which inherit ol.layer.Layer classes, and the events that are monitored and triggered are defined in the ol.render.Event , shared Properties and states are defined in layerbase, and they ol.layer.Layer define their own properties and methods in addition to the arguments inherited from the class. Let's take a look at these layer types separately.

PS: Based on the previous code, we have downloaded the source link in Openlayers using AJAX and modified the map in Map_utils.js to see the effect.

Regardless of the layer type, initialize the map and if you do not explicitly specify the control object, then the default inclusion 缩放 and 鼠标拖拽 function, about the control object, will be described in the following blog, now that control is a tool that controls the interaction with the map Good.

2.1 Heatmaplayer

The class that renders the vector data as a heat map inherits the class, ol.layer.Vector ol.layer.Vector inherits the class, and the ol.layer.Layer additional parameters are olx.layer.HeatmapOptions defined as follows:

/** * @enum {string} */ol.layer.HeatmapLayerProperty = {  ‘blur‘,  ‘gradient‘,  ‘radius‘};

Notice that the HEATMAP layer has three more properties than the other types of layers, often blur and radius, what the two properties do, and we can adjust to see the effect:

Yes, blur controls the edges of the dots, blurs the edges, and radius specifies the radius of the dots. 注: not points, but circles.

2.1.1 Instances

First create a Heatmaplayer object:

varnew ol.layer.Heatmap({  new ol.source.KML({    ‘data/kml/2012_Earthquakes_Mag5.kml‘,    ‘EPSG:3857‘,    false  }),  blur: parseInt(blur.value10),  radius: parseInt(radius.value10)});

Here Heatmap uses the KML format, the local file data/kml/2012_Earthquakes_Mag5.kml as the source of the heatmap, the data is a simple description of the location and magnitude of the 2012 global earthquake, and then adds the HEATMAP layer to the map:

mapnew ol.Map({  //初始化map    ‘map‘,    layers: [      new ol.layer.Tile({        new‘sat‘})      }),      heatmap    ],    new ol.View({      center: ol.proj.transform([37.41, 8.82‘EPSG:4326‘‘EPSG:3857‘),      zoom: 4    

To view the effect of running:

2.2 Imagelayer

Mainly refers to the server-side rendering of images, may be already rendered good image, or every request, according to the request content is customized to generate a picture, the layer type supports any range and resolution.

2.2.1 Instances

First instantiate a picture layer:

/** * create an imageLayer  */var extent = [0032642448];varnew ol.proj.Projection({            ‘EPSG:4326‘,            extent: extent        }),varnew ol.layer.Image({    new ol.source.ImageStatic({        ‘sample.jpg‘,        projection: projection,        imageExtent: extent    })})

Like Heatmap, you first need to pass in the URL parameter, which is the image address, which can be the address of the network picture, or the local file address, and then need to pass in the reference coordinate system Projection,code is an identity, can be any string, if it is EPSG：4326 or is EPSG：3857 , then the two coordinate systems will be used, if not, using the default coordinate system, extent is a rectangular range, mentioned above; the third parameter of Imagelayer is the size of the imageExtent picture, and here we can't change the original proportions of the picture. The image will only be enlarged or shrunk according to the original proportions.

Finally, add the Imagelayer to the map:

map=new ol.Map({  //初始化map    ‘map‘,    [],    view: new ol.View({      projection: projection,      center: ol.extent.getCenter(extent),      zoom: 2    })}); 

The effect is as follows:

It feels like a Bing search interface after zooming in, with wood ^_^ |:

2.3 Tilelayer

Slice map is a more commonly used layer type, the concept of slicing is to use the grid to cut a map into small squares of equal size,

This will understand how we use maps such as Baidu Map when the speed of the slow, will be a piece of the reason for the load! Yes, because it's a slice.

When a map is requested, the tiles that are included in the viewport (that is, the area of the browser visible) are requested, and the rest of the tiles are not requested, saving network bandwidth, and generally these slices are pre-cut and are divided into different zoom levels, divided into different directories according to different zoom levels. If you put these tiled maps in the cache, the access speed will be faster.

Inherited ol.layer.Layer , the additional argument is olx.layer.TileOptions that it is defined as follows:

/**
* @typedef {{brightness: (number|undefined),
* Contrast: (number|undefined),
* Hue: (number|undefined),
* Opacity: (number|undefined),
* Preload: (number|undefined),
* Saturation: (number|undefined),
* Source: (ol.source.tile|undefined),
* Visible: (boolean|undefined),
* Extent: (OL. extent|undefined),
* Minresolution: (number|undefined),
* Maxresolution: (number|undefined),
* Useinterimtilesonerror: (boolean|undefined)}}
* @api
*/

As can be seen, more than preload and useinterimtilesonerror two parameters, preload is not to render the corresponding resolution, the low-resolution slices are first magnified to the current resolution (may be blurred), populated to the corresponding location, the default is 0, now also comes speed slow, why the map will first blurred, and then become clear, it is the process! Useinterimtilesonerror refers to whether a temporary slice is used instead of the default value when an error occurs when the tile is loaded true .

2.3.1 Instances

In fact, in the example of loading the map, we are asking for a sliced map of MapQuest:

map  =  New  ol. Map ({//Initialize map  target:  ' map ' , layers: [
    
     new  ol.layer.Tile ({source: 
     new  Ol.source.MapQue St ({layer: 
      ' Sat ' })], view: 
     new  ol. View ({center:ol.proj.transform (
     [37.41 , 
      8.82 ], 
      ' epsg:4326 ' , 
      ' epsg:3857 ' ), Zoom:
      2 })}); 
    

Which is the ol.layer.Tile slice layer type, the source is MapQuest, layer
Is the type of the requested layer, MapQuest has three types of layers: osm , sat and, is the abbreviation for OPENSTREETMAP, the hyb osm data it provides, the sat satellite graph, and the hyb two types of mixed layers.

We can take a look at the Web request content of the browser:

Here is the FIREBUG Network request panel of the Firefox browser, which can be seen the requested picture, is a block, and is based on a certain number sequence number.

2.4 Vectorlayer

Once used in the openlayers vector layer, vector layers are actually layer types that are rendered on the client, and the data or files returned by the server are rendered by openlayers and the corresponding vector layers are obtained.

The vector data layer, which is rendered on the client side, inherits the ol.layer.Layer additional parameters olx.layer.VectorOptions , which are defined as follows:

>/** * @typedef{{Brightness: ( Number|undefined), *contrast: ( Number|undefined), *Renderorder: (function(ol. Feature,ol. Feature): Number|NULL|undefined), *Hue: ( Number|undefined), *minresolution: ( Number|undefined), *maxresolution: ( Number|undefined), *Opacity: ( Number|undefined), *Renderbuffer: ( Number|undefined), *saturation: ( Number|undefined), *Source: (Ol.source.Vector|undefined), *style: (Ol.style.Style|Array.<Ol.style.Style>|ol.style.StyleFunction|undefined), *updatewhileanimating: (Boolean|undefined), *updatewhileinteracting: (Boolean|undefined), *Visible: (Boolean|undefined)}}* @api * *

The Renderorder, Renderbuffer, style, updatewhileanimating, and updatewhileinteracting five parameters are more than the normal layer. Renderorder refers to the order of rendering, 地理要素 in general, before rendering, the features are based on a certain sort of rules, and rendering is based on this order to render sequentially, this parameter specifies the collation, if the assignment is null , then it will not be 地理要素 sorted , rendering does not have a certain order; Renderbuffer represents the buffer of the viewport area of the map, the style specifies the vector layer's styles, the color and shape, and so on; updatewhileanimating indicates whether the animation effect is 地理要素 recreated when By default false , performance may be affected when set to, true updatewhileinteracting indicates 地理要素 whether it will be re-rendered when interacting.

2.4.1 Instances

First create a vector layer:

vectorlayer = new  Ol.layer.Vector ({//initialize vector layer  Source: new  Ol.source.GeoJSON ({projection:  ' epsg:3857 ' , url:  ' data /geojson/countries.geojson '  //geographic information such as loading boundaries from a file }), Style: function   (feature, resolution)  { style.gettext (). SetText (resolution < 5000 ? Feature.get  ( ' name ' ): );    //when zoomed to 1:5,000 resolution, the country name is displayed  return   [Style]; }});

The GeoJSON format file returned by the server data/geojson/countries.geojson contains the border data of the country, which belongs to the polygon type, and the results are as follows after Openlayers rendering:

You can see the blue Line as the border of each country, when the mouse is over a country, the corresponding chunk will turn red, this is the added event, we can change its style, notice that the vectorlayer is relative to other types of layers, also contains a style parameter, This parameter controls the appearance style of the vector layer, which is defined as follows:

/** * Defining vector layers * Where style is the display style of a vector layer * /varstyle =NewOl.style.Style ({fill:NewOl.style.Fill ({//Vector layer fill color, and transparencyColor' Rgba (255, 255, 255, 0.6) '}), Stroke:NewOl.style.Stroke ({//Border styleColor' #319FD3 ', Width:1}), Text:NewOl.style.Text ({//Text styleFont' 12px calibri,sans-serif ', fill:NewOl.style.Fill ({color:' #000 '}), Stroke:NewOl.style.Stroke ({color:' #fff ', Width:3})  })});

The style is a ol.style.Style type, and vector layers can be adjusted for transparency, as follows:

fillnewol.style.Fill({ //矢量图层填充颜色，以及透明度    color: ‘rgba(255, 255, 255, 0.6)‘  })

The last variable in RGBA is a variable that controls transparency, ranging from 0~1,0 to opaque, and 1 to full transparency. Because the main Layer here, so about ol.style.Style the other content, here is not much to say.

3. Discussion

What layer types are the most popular maps, such as Baidu maps or the high-D map, provided? Let's take a look at the network request graph they see in Firefox:

Baidu Map:

German map:

From the above discussion, we can conclude that they are all of the network tile layer types provided, and some of the loaded geographic features, such as hotels, are loaded in a vector layer, so they are mixed with tile layers and vector layers.

4. Summary

In fact, the layer can be divided into two categories according to the rendering, one is the server-side rendering good, to return to the browser as a picture, Imagelayer and Tilelayer belong to this type, the other is the browser rendered layer type, vectorlayer and Heatmaplayer is this type.

OK, finally finished, good tired good tired!

Disclaimer: Article for my original, reproduced or use please specify the author and source!! Thank you!

Openlayers Layer (Layers) detailed