display country names on a simple vl-layer-vector

[benams]

I need to have the country names on a simple vector layer:

          <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
            <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
            <vl-layer-vector>
              <vl-style-box>
                <vl-style-stroke color="#ededf1"></vl-style-stroke>
              </vl-style-box>
              <vl-source-vector url="https://openlayers.org/en/latest/examples/data/geojson/countries.geojson"></vl-source-vector>
            </vl-layer-vector>
          </vl-map>

I need to add an extra layer? any other way to do it?

[become-iron]

https://openlayers.org/en/latest/examples/vector-labels.html

[benams]

https://openlayers.org/en/latest/examples/vector-labels.html

I've seen this example, but I can't understand how I can "translate" it from JS to VueLayers

[become-iron]

<vl-layer-vector>
  <vl-source-vector :features="features" />
  <vl-style-func :factory="styleFunctionFactory" />
</vl-layer-vector>

function styleFunctionFactory () {
  const baseStyle = {
    textFontSize: 12
  }
  const cache = {}

  return (olFeature, resolution) => {
    const featureId = olFeature.getId()

    if (!cache[featureId]) {
      cache[featureId] = [createStyle({
        ...baseStyle,
        text: olFeature.get('some_text')
      })]
    }

    return cache[featureId]
  }
}

[ghettovoice]

Hi @benams , I can only add to @become-iron example that you can find createStyle helper in vuelayers/lib/ol-ext module. This helper not from ol package.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.