How to use vuelayers - 6 common examples

geom (feature) {
            // geometry is an LineString, convert it to MultiPoint to style vertex
            return vlCore.geomHelper.multiPoint(feature.getGeometry().getCoordinates())
          },
        }),

pacmanStyleFunc () {
      const pacman = [
        vlCore.styleHelper.style({
          strokeColor: '#de9147',
          strokeWidth: 3,
          fillColor: [222, 189, 36, 0.8],
        }),
      ]
      const path = [
        vlCore.styleHelper.style({
          strokeColor: 'blue',
          strokeWidth: 1,
        }),
        vlCore.styleHelper.style({
          imageRadius: 5,
          imageFillColor: 'orange',
          geom (feature) {
            // geometry is an LineString, convert it to MultiPoint to style vertex
            return vlCore.geomHelper.multiPoint(feature.getGeometry().getCoordinates())

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())

return function __clusterStyleFunc (feature) {
        const size = feature.get('features').length
        let style = cache[size]

        if (!style) {
          style = vlCore.styleHelper.style({
            imageRadius: 10,
            strokeColor: '#fff',
            fillColor: '#3399cc',
            text: size.toString(),
            textFillColor: '#fff',
          })
          cache[size] = style
        }
        return [style]
      }
    },