This article shares the specific code of the dynamic points for Openlayers to realize diffusion for your reference. The specific content is as follows
Making hazard source identifiers in openlayers can require dynamic diffusion points (there are many methods: you can add jpg animations or write css animations) Here we provide an idea to write using the method provided by openlayer and give detailed method annotations for beginners to learn (all jar packages are online codes that can be copied in the past and used directly)
<!DOCTYPE html>
<html>
<head>
<title>Icon Symbolizer</title>
<link rel="stylesheet" href="/en/v3.20.1/css/" rel="external nofollow" type="text/css">
<script src="/v2/?features=requestAnimationFrame,,URL"></script>
<script src="/en/v3.20.1/build/"></script>
<script src="/jquery-2.2."></script>
<link rel="stylesheet" href="/bootstrap/3.3.6/css/" rel="external nofollow" >
<script src="/bootstrap/3.3.6/js/"></script>
<style>
#map {
position: relative;
}
#popup {
cursor: pointer;
}
</style>
</head>
<body>
<div class="map"></div>
<div >
</div>
<script>
//Dispersed water lines var bingMap = new ({
source :new ({
crossOrigin: 'anonymous',
url:'/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
})
});
var map = new ({
layers: [bingMap],
target: 'map',
view: new ({
center: ([112.91, 28.21], 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});
var source = new ({
wrapX: false
});
var vector = new ({
source: source
});
(vector);
function addRandomFeature() {
var geom = new (([112.91, 28.21]));
var feature = new (geom);
(feature);
}
var duration = 1000;
function flash(feature) {
var start = new Date().getTime();
//Resource the map water wave var listenerKey = ('postcompose', animate);
function animate(event) {
//Get geometric figures var vectorContext = ;
//Get the current rendered frame status var frameState = ;
//Add a geometric object var flashGeom = ().clone();
//The rendering frame has taken time var elapsed = - start;
//Accounted var elapsedRatio = elapsed / duration;
// radius is 5 and ends with 30 var radius = (elapsedRatio) * 25 + 5;
//The impermeable gradient disappears var opacity = (1 - elapsedRatio);
//Circle style var style = new ({
image: new ({
radius: radius,
stroke: new ({
color: 'rgba(255, 0, 0, ' + opacity + ')',
width: 1 + opacity
})
})
});
//Add a style to the geometric figure (style);
// Render the geometry into the canvas (flashGeom);
if (elapsed > duration) {
start = ;
;
}
//Request map rendering (at the next animation frame) ();
}
}
//Add layer in the data source ('addfeature', function(e) {
flash();
});
addRandomFeature()
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.