vuelayers how to support v6

[moxiaobei2]

the version said v.12.x is supported with v6 of ol,how to install? openlayers6

[ghettovoice]

Hello @moxiaobei2 , sorry for the late response, I was a bit busy last weeks.

v0.12.0 now finally ready to install. You can install with npm install vuelayers@next. But take a note that something maybe broke your app, fill free to ask me about errors.

[hairypalm]

@ghettovoice I am using v0.12 now with ol6. It generally works great! I cannot seem to make work. If I use the same code as with v0.11 it seems to do nothing, including never calling the returned styleFunc. Not sure if this is a bug or I am just not using the feature correctly.

See below for example of a style function that takes a line string and puts a dot at the beginning of the line and an arrow at the end of each segment. This works in v0.11, but in v0.12 __odStyleFunc is never called. I have tried to simplify even to draw a red circle at a point, but also does not work.

Do you have an example somewhere of working with v0.12? The demo seems to target 0.11 still.

styleFunc () {
        return function __odStyleFunc (feature) {
          const geometry = feature.getGeometry()
          var styles = []
          styles.push(createStyle({
            geom: geometry,
            strokeColor: [33, 31, 48, 1],
            strokeWidth: 3
          }))

          geometry.forEachSegment(function (start, end) {
            var dx = end[0] - start[0]
            var dy = end[1] - start[1]
            var rotation = -Math.atan2(dy, dx)
            // arrows
            styles.push(createStyle({
              geom: createPointGeom(start),
              imageRadius: 6,
              strokeColor: [33, 31, 48, 1],
              fillColor: [33, 31, 48, 1],
              strokeWidth: 1
            }))

            styles.push(createStyle({
              geom: createPointGeom(end),
              imageSrc: 'https://mysite.com/statics/icons/arrow.png',
              imageRotation: rotation,
              imageOpacity: 1
            }))
          })
          return styles
        }

[ghettovoice]

I guess you not correctly setup it to the vl-style-func. In vuelayers v0.12 the factory prop is deprecated and later will be replaced func prop. The difference between them is:

• factory accept style function factory, i.e () => (feature, resolution) => styles
• func accept style function, i.e. (feature, resolution) => styles.

There is a demo to show the difference https://jsfiddle.net/ghettovoice/ypx0qvsn/

[hairypalm]

@ghettovoice Thank you for the demo fiddle -- perfect. I appreciate all your work on this library!