issue with label placement in feature

[ghansham]

Dear Sir

I am trying to draw concentric circles. And I want to place their labels on the circle boundary. I am trying to use placement="line" property mentioned in:

https://openlayers.org/en/latest/examples/vector-labels.html My template section in the .vue file is as follows.

It is giving some exception: Uncaught TypeError: ends is undefined drawText TextReplay.js:171 renderCircleGeometry vector.js:84 renderFeatureInternal vector.js:138 renderFeature vector.js:115 renderFeature$1 VectorLayer.js:400 render VectorLayer.js:351 prepareFrame VectorLayer.js:368 renderFrame Map.js:157 renderFrame PluggableMap.js:1226 animationDelay PluggableMap.js:189

Digging deep I found that when placement gets updated, it is updating font. I am using 0.11.25.

regards Ghansham

[ghettovoice]

Hello @ghansham , this error comes from oopenlayers renderer because it doesn't support such feature. https://openlayers.org/en/v5.3.0/apidoc/module-ol_style_TextPlacement.html. Only linestrings and polygons are supported. As you can see here https://jsfiddle.net/ghettovoice/sdx98e2f/16/ it is not working even with just openlayers.

So I can't make here anything. I can only suggest you to switch to the circular polygons: https://jsfiddle.net/ghettovoice/sdx98e2f/21/ https://jsfiddle.net/ghettovoice/qa8p913o/99/

[ghansham]

I am trying this with 0.11.28

but unsuccessful. label_placement.txt

And I want different captions for different circles

[ghettovoice]

Because vl-geom-circle create ol/geom/Circle geometry instance which not work with text line placement. You should use vl-geom-polygon and make a circular polygon from circle center and radius. For geojson geometries you can use great gis lib turf, there is a helper circle that can make circular polygons http://turfjs.org/docs/#circle.

As for dynamic captions, just bind you caption data to the :text input proerty:

<vl-feature v-for="rc in radii_captions" :key="rc.caption" :id="rc.caption">
        <vl-geom-polygon :coordinates="makeCircleCoords(rc.center, rc.radius)" />
        <vl-style-box>
            <vl-style-stroke color="#423e9e" :width="2"></vl-style-stroke>
            <vl-style-fill :color="[0, 0, 0, 0]"></vl-style-fill>
            <vl-style-text :text="rc.caption" placement="line"></vl-style-text>
        </vl-style-box>
    </vl-feature>

<script>
import makeCircle from '@turf/circle'

export default {
  methods: {
    makeCircleCoords (center, radiusKm) {
      const feature = makeCircle(center, radius, { units: 'kilometers' })
     return feature.geometry.coordinates
    },
  },
}
</script>

[ghansham]

I must appreciate that you gave a solution. This is bad at ol end. They should have supported simple geometries.

On Tue, 3 Nov, 2020, 8:59 pm Vladimir Vershinin, notifications@github.com wrote:

Because vl-geom-circle create ol/geom/Circle geometry instance which not work with text line placement. You should use vl-geom-polygon and make a circular polygon from circle center and radius. For geojson geometries you can use great gis lib turf, there is a helper circle that can make circular polygons http://turfjs.org/docs/#circle.

As for dynamic captions, just bind you caption data to the :text input proerty:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/381#issuecomment-721199355, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAYXFJEQGVYJ7SIEWI7ITVTSOAOUVANCNFSM4TGIZDIQ .

[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.