Leaflet 1.xx vs Openlayers 4.xx Part 2. How maps are drawn

    In a previous article, he promised that this would be about communities and plugins, but then he decided that it would be more correct to first talk about how maps are drawn in these frameworks. I'll start with Openlayers, then Leaflet, then its plugins.


    First, common and commonplace: both frameworks change the internal state of the card during user actions (or the internal state changes from a callback or timer), and it already gives a command to redraw.

    How draws openlayers

    Openlayers uses two drawing options - Canvas and WebGL (the DOM renderer for tiles and images has been removed from the modern 3rd version). The map component creates a div, in which these two renderings work. A highly simplified call sequence is something like this:

    1. The renderFrame function is called in the map component
    2. Defines layers that are visible at a given scale.
    3. Each of the visible layers draws an image with its own render. In addition to dividing by driver type (canvas and webgl), further renders are also divided by layer type (ol.renderer.canvas.TileLayer, ol.renderer.canvas.VectorLayer, etc.).
    4. To the obtained layer images, transparency, transformations and cutting (clip, if any) are added and they are all drawn in the general context of the map.

    Both renders work well, however, if you switch to webgl, you should remember that resources (for example, tile images) will need to be launched through a proxy, otherwise you will 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 still generates an error, put crossOrigin in the image source settings: 'anonymous'

    How drawlet draws

    For starters, here is a good class diagram , which is displayed again through the leaflet.
    A leaflet for drawing maps creates several panels (Pane), which are DOM elements (divs) that layers already work with.
    mapPanethe main panel contains all the restauto
    tilePanepanel for tile layers200
    overlayPanepanel for vector layers400
    shadowPaneshadow panel500
    markerPanepanel for markers600
    popupPanepanel for appearing data on objects700

    And here lies the first interesting detail, if in Openlayers zIndex numbering is cross-cutting for all layers by default, then in Leaflet, the layers are grouped. If you suddenly want your tile layer to be “above” the vector one, you need to either force a specific tile layer in options pane: overlay, or if all layers need end-to-end numbering, then add them all to one. By the way, you can create your own pane and optionally it must be inside mapPane.

    And then the fun begins, if Openlayers uses the same set of renders for all layers, then Leaflet, each of the layers chooses how and what to draw with. For example, tile layers and ImageOverlay are drawn only by DOM elements (although there are variations on the topic of drawing tiles using WebGl and Canvas in the plugins). For vector layer layers, SVG or Canvas is used, if both are supported by the browser, SVG is used by default.

    Features of drawing in different plugins Leaflet

    As I said, despite the fact that Leaflet does not have a webgl render out of the box, some plugins use this technology. Leaflet.TileLayer.GL , for example, creates a canvas tile instead of an image, into which it renders a Webgl render. With this plugin, you can play with pixels in tiles with GPU performance. Here is an example of coloring pixels in tiles in latitude:

    Or, from the same author, Leaflet.GLMarkers allows you to draw large volumes of points on the map (markers can be animated), although it looks crooked, especially inoperative zoom animation is annoying.

    There are difficult cases for plugins that are served by serious companies. For example, esri-leafletin DynamicMapLayer with each refresh creates a new ImageOverlay layer, and creates it when the corresponding picture is loaded, i.e. the order of the layers on the map is constantly shuffled, it is impossible to work with z-index. Your humble servant even had to make an improved version of this layer , also there is a transition through 180 meridian, which is not in the original plugin.

    Another common problem: different plugins support for 2 major leaflet versions - 0.7 and 1.0. There are a lot of critical changes between them, and plugins may not work in a specific version. It happens this way: one plugin works only in version 1.0, and the author we have not yet updated the other plugin we need or completely forgot about its maintenance (although now there are less of them) and it only works under the old one.

    In short, the main problem with drawing a leaflet is that each plugin does whatever it pleases, someone creates html img, someone draws in canvas, someone draws webgl into canvas and so on. And further work with this in a complex becomes problematic.

    PS: The next article will be about the sources of cartographic data and the possibilities of working with them in each of the frameworks, as well as the final conclusions about which framework to choose in your case.

    Also popular now: