const edges = data.polygon.geom.coordinates[0][0];
let features = [];
const offsetDistance = -0.03;
for (let i = 0; i < edges.length - 1; i++) {
const line = turf.lineString([edges[i], edges[i + 1]]);
const offsetLine = turf.lineOffset(line, -0.02, { units: 'kilometers' });
const midPoint = turf.midpoint(
turf.point(offsetLine.geometry.coordinates[0]),
turf.point(offsetLine.geometry.coordinates[1]),
);
features.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: midPoint.geometry.coordinates,
},
properties: {
order: i + 1,
},
});
}
{polyEdgeData && (
<Source id="polyEdgeSymbol" type="geojson" data={polyEdgeData}>
<Layer {...polyEdgeSymbolLayer}></Layer>
</Source>
)}
export const polyEdgeSymbolLayer: LayerSpecification = {
minzoom: 15,
id: 'polyEdgeSymbol',
source: 'polyEdgeSymbol',
type: 'symbol',
layout: {
'icon-image': 'square',
'icon-size': 0.3,
'text-field': ['get', 'order'],
'text-size': 14,
'icon-anchor': 'center',
},
paint: {
'icon-color': 'rgba(0, 0, 0, 0.5)',
'text-color': '#fff',
},
};