LabelClass repeatLabel to have option to display only once per polyline not per segment.
535
0
04-12-2023 07:04 AM
by
Hi!
Currently LabelClass property repeatLabel has two options: true, flase. Where:
If false, the label will display once per polyline segment.
We use polyline feature layers to display very complex polyline geometries with more than one segments, similar to svg symbols. But unfortunatly there is no option to display lables for such features in readable userfriendly way.
Here is an example:
The ideal option would be the ability to display label once per whole polyline, not per segment.
So the main idea here is to extand repeatLabel property with possibility to define exact number of repeats or just a limit "one per polyline".
You can find repropduction of this geometry here: https://stackblitz.com/edit/js-lwwmfb?file=index.html or in a code below.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Intro to graphics | Sample | ArcGIS Maps SDK for JavaScript 4.26
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
'esri/Map',
'esri/views/MapView',
'esri/Graphic',
'esri/geometry/Extent',
'esri/geometry/projection',
'esri/layers/FeatureLayer',
], (Map, MapView, Graphic, Extent, projection, FeatureLayer) => {
const map = new Map({
basemap: 'osm',
});
const view = new MapView({
center: [21.0248409, 52.1934005],
container: 'viewDiv',
map: map,
zoom: 25,
});
// Create a symbol for drawing the line
const lineSymbol = {
type: 'simple-line', // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4,
};
const symbolGraphic = new Graphic({
attributes: {
OBJECTID: 5452,
COMMONNAME: 'TEST NAME',
TYPE: 'Cell',
},
symbol: lineSymbol,
geometry: {
type: 'polyline', // autocasts as new Polyline()
paths: [
[
[21.0248409, 52.1934005],
[21.0248409, 52.1927893],
[21.0258354, 52.1927893],
[21.0258354, 52.1934005],
[21.0248409, 52.1934005],
],
[
[21.0248409, 52.1927893],
[21.0258354, 52.1934005],
],
[
[21.0248409, 52.1934005],
[21.0258354, 52.1927893],
],
[
[21.0255, 52.1931],
[21.0255, 52.1930226],
[21.0257815, 52.1930226],
[21.0257815, 52.1931],
[21.0255, 52.1931],
],
[
[21.0251755, 52.1929739],
[21.0251755, 52.1928172],
[21.0252257, 52.1928725],
[21.0252819, 52.1928172],
[21.025496, 52.1928172],
[21.0254328, 52.1928788],
[21.025496, 52.1929722],
[21.0253827, 52.1929241],
[21.0253827, 52.1929722],
[21.0253078, 52.1929722],
[21.0253078, 52.1928831],
[21.0251755, 52.1929739],
],
[
[21.0253287, 52.193184],
[21.0253639, 52.1931845],
[21.025385, 52.1931866],
[21.0254056, 52.1931903],
[21.0254253, 52.1931956],
[21.0254437, 52.1932024],
[21.0254606, 52.1932105],
[21.0254757, 52.1932199],
[21.0254888, 52.1932304],
[21.0254997, 52.1932418],
[21.0255081, 52.193254],
[21.0255141, 52.1932667],
[21.0255173, 52.1932798],
[21.0255173, 52.193293],
[21.0255141, 52.1933061],
[21.0255081, 52.1933189],
[21.0254997, 52.1933312],
[21.0254888, 52.1933428],
[21.0254757, 52.1933535],
[21.0254606, 52.1933632],
[21.0254437, 52.1933716],
[21.0254253, 52.1933787],
[21.0254056, 52.1933843],
[21.025385, 52.1933884],
[21.0253639, 52.1933909],
[21.0253287, 52.193395],
[21.0253305, 52.1933909],
[21.0253093, 52.1933884],
[21.0252889, 52.1933843],
[21.0252694, 52.1933787],
[21.0252512, 52.1933716],
[21.0252346, 52.1933632],
[21.0252199, 52.1933535],
[21.0252072, 52.1933428],
[21.0251969, 52.1933312],
[21.0251889, 52.1933189],
[21.0251836, 52.1933061],
[21.0251809, 52.193293],
[21.0251809, 52.1932798],
[21.0251836, 52.1932667],
[21.0251889, 52.193254],
[21.0251969, 52.1932418],
[21.0252072, 52.1932304],
[21.0252199, 52.1932199],
[21.0252346, 52.1932105],
[21.0252512, 52.1932024],
[21.0252694, 52.1931956],
[21.0252889, 52.1931903],
[21.0253093, 52.1931866],
[21.0253305, 52.1931845],
[21.0253287, 52.193184],
],
[
[21.0249392, 52.1932265],
[21.0249392, 52.1929576],
[21.0252059, 52.1931064],
[21.0249392, 52.1932265],
],
],
},
});
//Create array of graphics
const graphics = [symbolGraphic];
//Create labelClass
const labelClass = {
// autocasts as new LabelClass()
symbol: {
type: 'text', // autocasts as new TextSymbol()
color: 'green',
font: {
// autocast as new Font()
family: 'Playfair Display',
size: 12,
weight: 'bold',
},
},
labelPlacement: 'center-along',
labelExpressionInfo: {
expression: '$feature.COMMONNAME',
},
repeatLabel: false,
labelPosition: 'parallel',
};
//Create feature layer
const layer = new FeatureLayer({
// create an instance of esri/layers/support/Field for each field object
title: 'Demo layer',
fields: [
{
name: 'OBJECTID',
alias: 'OBJECTID',
type: 'oid',
},
{
name: 'TYPE',
alias: 'TYPE',
type: 'string',
},
{
name: 'COMMONNAME',
alias: 'COMMONNAME',
type: 'string',
},
],
objectIdField: 'OBJECTID', // inferred from fields array if not specified
geometryType: 'polyline', // geometryType and spatialReference are inferred from the first feature
// in the source array if they are not specified.
source: graphics, // an array of graphics with geometry and attributes
renderer: {
type: 'simple', // autocasts as new SimpleRenderer()
symbol: {
type: 'simple-line', // autocasts as new SimpleLineSymbol()
width: '2px',
color: 'black',
},
},
spatialReference: {
wkid: 4326,
},
labelingInfo: [labelClass],
});
map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>