Dynamic style based on geometry? #428
Description
I have a layer which has both points and polygons in it. I am able to render them both properly as polygons and as markers like this:
<ol-vector-layer> <ol-source-vector :projection="projection" ref="vectorLayerTemplateRef"> <ol-feature v-for="(windFarmSiteFeature, index) in windFarmSiteFeatures" :key="index" :properties="windFarmSiteFeature.properties" > <ol-geom-polygon v-if="windFarmSiteFeature.type == 'Polygon'" :coordinates="windFarmSiteFeature.geometry.coordinates" /> <ol-style v-if="windFarmSiteFeature.type == 'Polygon'"> <ol-style-stroke color="blue" :width="2"></ol-style-stroke> <ol-style-fill color="rgba(255,255,255,0.5)"></ol-style-fill> </ol-style> <ol-geom-point v-else-if="windFarmSiteFeature.type == 'Point'" :coordinates="windFarmSiteFeature.geometry.coordinates" /> <ol-style v-if="windFarmSiteFeature.type == 'Point'"> <ol-style-icon :src="markerIcon"></ol-style-icon> </ol-style> </ol-feature> </ol-source-vector> </ol-vector-layer> But I need to be able to select individual features. I was able to do this when it was just polygons, but now I need a dynamic style to be able to style points and polygons differently. Right now, whenever I select something, the feature just disappears until I deselect it, and it seems as though my selectStyleFunction function never gets executed because I don't see the console.log statements in the console. Can someone tell me what is the proper way to do this?
<ol-interaction-select v-if="!drawMode && !measureDrawEnable" ref="selectInteractionTemplateRef" :style="selectStyleFunction" @select="handleSelect" /> ... import markerIcon from "@/assets/marker-icon.png"; import { Style, Stroke, Fill, Icon } from 'ol/style'; const selectStyleFunction = (feature) => { const geometry = feature.getGeometry(); const type = geometry.getType(); console.log('Selected geometry:', geometry); console.log('Type:', type); if (type === 'Polygon') { return new Style({ stroke: new Stroke({ color: 'red', width: 2, }), fill: new Fill({ color: 'rgba(255, 100, 100, 0.5)', }), }); } else if (type === 'Point') { return new Style({ image: new Icon({ src: markerIcon, scale: 0.1, anchor: [0.5, 1], }), }); } return null; };