Dynamic point diffusion effect of Openlayers 3

When something happens, if we add a static point on the map, and it doesn't pay attention, then we can place a dynamic point, similar to the effect of putting a stone in water, the effects of a wave spreading, a symbol of the occurrence of events that have a certain impact area, then, how do we use OPENLAYERS3 To do this effect? The effect we want to achieve, such as the previous Yaan earthquake, we placed a point in Yaan, indicating that Yaan an earthquake occurred.

Figure 1 Point diffusion

How do we first think of adding a point to a vector layer, giving it a ol.style.Icon style, and then assigning the property of the picture src to a GIF picture, then we'll try.

ol.style.Icon

We first initialize a vector layer and add the Icon style and add it to the map:

varnew ol.layer.Vector({    new ol.source.Vector(),    new ol.style.Style({        new ol.style.Icon({            [0.5, 45],            ‘fraction‘,            ‘pixel‘,            opacity: 0.75,            ‘image/test_gif.gif‘        })    })});map.addLayer(gif_vector);

We then add points to the vector layer:

gif_vector.getSource().addFeature(new ol.Feature({    geometry: new ol.geom.Point([0,0]),    "testGif"}));

The implementation effect is not the expected scenario:

Figure 2 ol.style.Icon Effects

This thought will appear dynamic icon, the results found, and no, the dynamic picture into a static picture. The reasons for this are not specifically unfolded in this article, and will be explained in further studies. So, this road does not go through, there is no other solution? We use CSS3 to make an animated effect, it is not difficult, but the animation effect needs to be attached to an HTML element, we think that when we use openlayers to implement the popup effect, the popup is an HTML element, its use of the technology is ol.Overlay , then, Let's try ol.Overlay this road to get through.

ol.Overlay

First, create a DIV element, limit its shape to a circle, and animate it with CSS3:

HTML elements

<divid="css_animation"></div>

CSS3 animations and their styles

<style>    #css_animation{ height:px ; width:px ; Border-radius: px ; background: rgba (255, 0, 0, 0.9)  ; Transform: Scale (0)  ; animation: myfirst 3s ; animation-iteration-count: Infinite ;}    @keyframes myfirst{ to{  transform: Scale (2);  background: Rgba (0, 0, 0, 0)         ; }}</style>

In this way, the effect in the page is as follows:

Figure 3 CSS3 Point diffusion animation effect

Next, we create an overlay instance that adds this HTML element to the overlay:

vardocument.getElementById("css_animation");varnew ol.Overlay({    element: point_div,    positioning‘center-center‘});map.addOverlay(point_overlay);point_overlay.setPosition([11468382.41282299,3502038.887913635]);

Let's explain this code: first, var point_div = document.getElementById("css_animation"); get an animated HTML element, and then assign it to the overlay element parameter, overlay also has a parameter that represents the orientation of the positioning: ‘center-center‘ HTML element relative to the overlay's anchor point, " Center-center "indicates that the center of the element is aligned to the center of the anchor, and finally the map.addOverlay(point_overlay); overlay is added to the map, at which point the overlay is not visible, and the last line: point_overlay.setPosition([11468382.41282299,3502038.887913635]); sets the location of the overlay visible element (that is, the animated element). The animation element is then set to the appropriate point.

In this way, we achieve the original effect of the beginning of the article.

Summarize

In this article, we try two methods to achieve dynamic point diffusion: One is to assign a style to a point, to ol.style.Icon overlay a animated GIF image at the corresponding point, but not to succeed, and the other is to use ol.Overlay the combination CSS3 animation to achieve the corresponding effect.

It is important to note that CSS3 animations are supported by modern browsers such as Ie10+, Firefox (Firefox), Chorme (Google), and we know that OPENLAYERS3 uses the modern browser technology of HTML5 and CSS3 and also needs IE9 + support is not the only line. So, for good results, use a modern browser.

OK, just write here, what's the problem, you can leave a message under the article.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Dynamic point diffusion effect of Openlayers 3