How to use the vuelayers.core.easingHelper function in vuelayers
To help you get started, we’ve selected a few vuelayers examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ghettovoice / vuelayers / docs / components / demo-app.vue View on Github 
onMapPostCompose ({ vectorContext, frameState }) {
if (!this.$refs.marker || !this.$refs.marker.$feature) return
const feature = this.$refs.marker.$feature
if (!feature.getGeometry() || !feature.getStyle()) return
const flashGeom = feature.getGeometry().clone()
const duration = feature.get('duration')
const elapsed = frameState.time - feature.get('start')
const elapsedRatio = elapsed / duration
const radius = vlCore.easingHelper.easeOut(elapsedRatio) * 35 + 5
const opacity = vlCore.easingHelper.easeOut(1 - elapsedRatio)
const fillOpacity = vlCore.easingHelper.easeOut(0.5 - elapsedRatio)
vectorContext.setStyle(vlCore.styleHelper.style({
imageRadius: radius,
fillColor: [119, 170, 203, fillOpacity],
strokeColor: [119, 170, 203, opacity],
strokeWidth: 2 + opacity,
}))
vectorContext.drawGeometry(flashGeom)
vectorContext.setStyle(feature.getStyle()(feature)[0])
vectorContext.drawGeometry(feature.getGeometry())
if (elapsed > duration) {
feature.set('start', Date.now())
}onMapPostCompose ({ vectorContext, frameState }) {
if (!this.$refs.marker || !this.$refs.marker.$feature) return
const feature = this.$refs.marker.$feature
if (!feature.getGeometry() || !feature.getStyle()) return
const flashGeom = feature.getGeometry().clone()
const duration = feature.get('duration')
const elapsed = frameState.time - feature.get('start')
const elapsedRatio = elapsed / duration
const radius = vlCore.easingHelper.easeOut(elapsedRatio) * 35 + 5
const opacity = vlCore.easingHelper.easeOut(1 - elapsedRatio)
const fillOpacity = vlCore.easingHelper.easeOut(0.5 - elapsedRatio)
vectorContext.setStyle(vlCore.styleHelper.style({
imageRadius: radius,
fillColor: [119, 170, 203, fillOpacity],
strokeColor: [119, 170, 203, opacity],
strokeWidth: 2 + opacity,
}))
vectorContext.drawGeometry(flashGeom)
vectorContext.setStyle(feature.getStyle()(feature)[0])
vectorContext.drawGeometry(feature.getGeometry())
if (elapsed > duration) {
feature.set('start', Date.now())vuelayers
Web map Vue components with the power of OpenLayers
