Leaflet 1.x.x vs Openlayers 4.x.x. Part 2. How maps are drawn
last article promised that this will be about the community and the plugins, but then decided that it would be correct to first talk about how in these frameworks are drawn in the map. Start with Openlayers, then a Leaflet, then its plugins.
First, the common and banal: both framework when user operations change the internal state of the card ( or the internal state will change itself from the callback or timer ), and it already commands a redraw.
the
Openlayers uses two drawing — Canvas and WebGL ( DOM renderer for map tiles and images have been removed from modern 3rd version). Map component creates a div, which employs two of these render. A highly simplified sequence of calls is:
Both render are working well, however, if switch to webgl, it is worth remembering that assets (e.g. image tiles) will need to be passed through a proxy, otherwise we get:
If the server supports cross-origin, but the error still claims to put in the settings of the source image by adding crossorigin: 'anonymous'
the
For starters, here class diagram that is displayed again through the leaflet.
Leaflet for drawing the maps create several panels (Pane), which are the DOM elements (div) that already work layers.
the
And here lies the first interesting detail if Openlayers numbering on a zIndex through for all of the default layers, Leaflet, layers are grouped. If you suddenly want your tile layer ever been "over" vector, you need, or you can specify a specific tile layer in the options pane: overlay, or if sequential numbering is needed at all layers, then stack them all in one. By the way, you can create a pane and it is not necessary to be inside mapPane.
And then the fun begins, if in Openlayers for all layers, using a same set of renders, Leaflet, each layer chooses how and what to draw. For example, tiled layers and ImageOverlay drawn only DOM elements (although the plugins are variations on the theme of drawing tiles using WebGl and Canvas). For vector layers use SVG or Canvas, if both are supported by the browser, the default is SVG.
the
As I said, despite the fact that have out of the box Leaflet no webgl render, some plugins use this technology. Leaflet.TileLayer.GL, for example, creates a image of the tile canvas, which draws the Webgl renderer. With the help of this plugin you can GPUшной performance to play with the pixels in the tiles. Here is an example of the coloring of pixels in tiles in latitude:
Or this from the same author, Leaflet.GLMarkers allows you to draw large amounts of points on the map (markers can be animated), although it looks weird to me, especially after hours animation zooms annoying.
There are severe cases and plugins that are served by big companies. For example, esri leaflet in DynamicMapLayer each represe creates a new ImageOverlay layer, and creates it when it is loaded the corresponding picture, i.e., the order of layers on the map constantly stirred, to work with z-index is impossible. Yours truly even had to do an improved version of this layer also there is a crossing 180 Meridian, which is not in the original plugin.
Another common problem: different support plugins 2 main versions of the leaflet — 0.7 and 1.0. In between a lot of critical changes, and plugins may not work in specific versions. Sometimes even so: one plugin only works in version 1.0, and the other we need a plugin author haven't updated or really scored on its service ( although these are less) and it only works under the old.
In short, the main problem of drawing the leaflet, what each plugin is doing everything as he pleases, someone creates an html img, someone draws on the canvas, someone webgl'ohms draws in canvas in tayl, and so on. And further work with this complex becomes problematic.
PS: the Next article will be about the sources of the map data and the possibility of working with them in each of the frameworks, as well as the final conclusions about which framework to choose in your case.
Article based on information from habrahabr.ru
First, the common and banal: both framework when user operations change the internal state of the card ( or the internal state will change itself from the callback or timer ), and it already commands a redraw.
the
As draws openlayers
Openlayers uses two drawing — Canvas and WebGL ( DOM renderer for map tiles and images have been removed from modern 3rd version). Map component creates a div, which employs two of these render. A highly simplified sequence of calls is:
-
the
- In the component of the map function is called renderFrame the
- Defines the layers that are visible on this scale the
- Each of the visible layers draws your render image. In addition to the separation according to the types of drivers (canvas and webgl), then the renders are divided also on the types of layers (ol.renderer.canvas.TileLayer, ol.renderer.canvas.VectorLayer, etc.). the
- To images received added layers of transparency, transformation and clipping ( clip, if any) and they are all drawn in the overall context map.
Both render are working well, however, if switch to webgl, it is worth remembering that assets (e.g. image tiles) will need to be passed through a proxy, otherwise we get:
Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at may not be loaded.
If the server supports cross-origin, but the error still claims to put in the settings of the source image by adding crossorigin: 'anonymous'
the
As draws Leaflet
For starters, here class diagram that is displayed again through the leaflet.
Leaflet for drawing the maps create several panels (Pane), which are the DOM elements (div) that already work layers.
| Name | Description | zIndex |
|---|---|---|
| mapPane | the main panel contains all the rest | auto |
| tilePane | a pane for tile layers | 200 |
| overlayPane | panel for feature layers | 400 |
| shadowPane | panel for shadow | 500 |
| markerPane | panel for markers | 600 |
| tooltipPane | panel for tooltips | 650 |
| popupPane | panel for emerging data on objects | 700 |
And here lies the first interesting detail if Openlayers numbering on a zIndex through for all of the default layers, Leaflet, layers are grouped. If you suddenly want your tile layer ever been "over" vector, you need, or you can specify a specific tile layer in the options pane: overlay, or if sequential numbering is needed at all layers, then stack them all in one. By the way, you can create a pane and it is not necessary to be inside mapPane.
And then the fun begins, if in Openlayers for all layers, using a same set of renders, Leaflet, each layer chooses how and what to draw. For example, tiled layers and ImageOverlay drawn only DOM elements (although the plugins are variations on the theme of drawing tiles using WebGl and Canvas). For vector layers use SVG or Canvas, if both are supported by the browser, the default is SVG.
the
Features drawing in different Leaflet plugins
As I said, despite the fact that have out of the box Leaflet no webgl render, some plugins use this technology. Leaflet.TileLayer.GL, for example, creates a image of the tile canvas, which draws the Webgl renderer. With the help of this plugin you can GPUшной performance to play with the pixels in the tiles. Here is an example of the coloring of pixels in tiles in latitude:
Or this from the same author, Leaflet.GLMarkers allows you to draw large amounts of points on the map (markers can be animated), although it looks weird to me, especially after hours animation zooms annoying.
There are severe cases and plugins that are served by big companies. For example, esri leaflet in DynamicMapLayer each represe creates a new ImageOverlay layer, and creates it when it is loaded the corresponding picture, i.e., the order of layers on the map constantly stirred, to work with z-index is impossible. Yours truly even had to do an improved version of this layer also there is a crossing 180 Meridian, which is not in the original plugin.
Another common problem: different support plugins 2 main versions of the leaflet — 0.7 and 1.0. In between a lot of critical changes, and plugins may not work in specific versions. Sometimes even so: one plugin only works in version 1.0, and the other we need a plugin author haven't updated or really scored on its service ( although these are less) and it only works under the old.
In short, the main problem of drawing the leaflet, what each plugin is doing everything as he pleases, someone creates an html img, someone draws on the canvas, someone webgl'ohms draws in canvas in tayl, and so on. And further work with this complex becomes problematic.
PS: the Next article will be about the sources of the map data and the possibility of working with them in each of the frameworks, as well as the final conclusions about which framework to choose in your case.
Комментарии
Отправить комментарий