英文:
Set font size using an if statement condition for FeatureLayer labelingInfo using arcgis javascript api 4.x
问题
我正在尝试使用ArcGIS JavaScript API 4.x为FeatureLayer的labelingInfo属性使用if语句条件来设置字体大小。
这是FeatureLayer的部分代码：
const myLayer = new FeatureLayer({
title: "My Layer",
objectIdField: "ObjectID",
geometryType: "point",
source: myFeatures,
showLabels: true,
labelingInfo: myLabelingInfo,
outFields: ['*']
});
这是labelingInfo对象的部分代码：
var myLabelingInfo = [
{
symbol: {
type: "text",
color: "white",
font: {
family: "Arial",
size: "IIf($feature.customer.length == 1, 12, 8);", // 12,
weight: "bold",
decoration: "none"
}
}
}
];
如您所见，我尝试使用if语句设置字体大小：
size: "IIf($feature.customer.length == 1, 12, 8);", // 12,
但这不起作用。只有在硬编码的情况下才有效：
size: 12,
我的问题是，如何以动态/编程的方式更改字体大小？
英文:
I am trying to set font size using an if statement condition for FeatureLayer labelingInfo using arcgis javascript api 4.x.
This is the feature layer:
const myLayer = new FeatureLayer({
title: "My Layer",
objectIdField: "ObjectID",
geometryType: "point",
source: myFeatures,
showLabels: true,
labelingInfo: myLabelingInfo,
outFields : ['*']
});
This is the labelinginfo object:
var myLabelingInfo = [
{
symbol: {
type: "text",
color: "white",
font: {
family: "Arial",
size: "IIf($feature.customer.length == 1, 12, 8);", // 12,
weight: "bold",
decoration: "none"
}
}
}
];
As you can see, I tried setting the font size with an if statement:
size: "IIf($feature.customer.length == 1, 12, 8);", // 12,
But that does not work. If I set it hard-coded is the only way it works:
size: 12,
My question is, how can I dynamically/programmatically change the font size?
答案1
得分: 1
以下是您要翻译的内容：
"One way of achieving what you want is to have as many LabelClass as symbols you need, and then using the property where to apply correctly to each feature.
In this case, you will have two LabelClass, one for each font size,
const createLabelSymbol = (fontSize) => ({
symbol: {
type: "text",
color: "white",
font: {
family: "Arial",
size: fontSize,
weight: "bold",
decoration: "none"
}
}
});
const myLayer = new FeatureLayer({
title: "My Layer",
objectIdField: "ObjectID",
geometryType: "point",
source: myFeatures,
showLabels: true,
labelingInfo: [
{
labelExpressionInfo: {expression: "EXPRESSION"},
symbol: createLabelSymbol(12),
where: "CONDITION"
},
{
labelExpressionInfo: {expression: "EXPRESSION"},
symbol: createLabelSymbol(8),
where: "NOT CONDITION"
}
],
outFields : ['*']
});
Where EXPRESSION is an arcade label expression, and CONDITION is an sql where expression.
Take a look at the example I put for you base on one of ESRI,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Add labels to a FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript
4.27
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: black;
}
</style>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], (WebMap, MapView, FeatureLayer) => {
const labelClassOpen = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "green",
backgroundColor: [213, 184, 255, 0.75],
borderLineColor: "green",
borderLineSize: 1,
yoffset: 5,
font: {
// autocast as new Font()
family: "Playfair Display",
size: 12,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.MARKER_ACTIVITY"
},
where: "OPENSTATUS='open'"
};
const labelClassOther = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "grey",
backgroundColor: [213, 184, 255, 0.75],
borderLineColor: "grey",
borderLineSize: 1,
yoffset: 5,
font: {
// autocast as new Font()
family: "Playfair Display",
size: 8,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.MARKER_ACTIVITY"
},
where: "NOT OPENSTATUS='open'"
}
const view = new MapView({
container: "viewDiv",
map: new WebMap({
portalItem: {
// autocasts as new PortalItem
id: "372b7caa8fe340b0a6300df93ef18a7e"
},
layers: [
new FeatureLayer({
portalItem: {
// autocasts as new PortalItem
id: "6012738cd1c74582a5f98ea30ae9876f"
},
labelingInfo: [labelClassOpen, labelClassOther],
renderer: {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "rgba(0,100,0,0.6)",
size: 3,
outline: {
color: [0, 0, 0, 0.1],
width: 0.5
}
}
}
})
]
}),
center: [-116.925, 34.2501],
zoom: 12
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!-- end snippet -->"
英文:
One way of achieving what you want is to have as many LabelClass as symbols you need, and then using the property where to apply correctly to each feature.
In this case, you will have two LabelClass, one for each font size,
const createLabelSymbol = (fontSize) => ({
symbol: {
type: "text",
color: "white",
font: {
family: "Arial",
size: fontSize,
weight: "bold",
decoration: "none"
}
}
});
const myLayer = new FeatureLayer({
title: "My Layer",
objectIdField: "ObjectID",
geometryType: "point",
source: myFeatures,
showLabels: true,
labelingInfo: [
{
labelExpressionInfo: {expression: "EXPRESSION"},
symbol: createLabelSymbol(12),
where: "CONDITION"
},
{
labelExpressionInfo: {expression: "EXPRESSION"},
symbol: createLabelSymbol(8),
where: "NOT CONDITION"
}
],
outFields : ['*']
});
Where EXPRESSION is an arcade label expression, and CONDITION is an sql where expression.
Take a look at the example I put for you base on one of ESRI,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Add labels to a FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript
4.27
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: black;
}
</style>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], (WebMap, MapView, FeatureLayer) => {
const labelClassOpen = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "green",
backgroundColor: [213, 184, 255, 0.75],
borderLineColor: "green",
borderLineSize: 1,
yoffset: 5,
font: {
// autocast as new Font()
family: "Playfair Display",
size: 12,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.MARKER_ACTIVITY"
},
where: "OPENSTATUS='open'"
};
const labelClassOther = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "grey",
backgroundColor: [213, 184, 255, 0.75],
borderLineColor: "grey",
borderLineSize: 1,
yoffset: 5,
font: {
// autocast as new Font()
family: "Playfair Display",
size: 8,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.MARKER_ACTIVITY"
},
where: "NOT OPENSTATUS='open'"
}
const view = new MapView({
container: "viewDiv",
map: new WebMap({
portalItem: {
// autocasts as new PortalItem
id: "372b7caa8fe340b0a6300df93ef18a7e"
},
layers: [
new FeatureLayer({
portalItem: {
// autocasts as new PortalItem
id: "6012738cd1c74582a5f98ea30ae9876f"
},
labelingInfo: [labelClassOpen, labelClassOther],
renderer: {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: "rgba(0,100,0,0.6)",
size: 3,
outline: {
color: [0, 0, 0, 0.1],
width: 0.5
}
}
}
})
]
}),
center: [-116.925, 34.2501],
zoom: 12
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论