标注子图层中的要素
当 labelsVisible 属性被设置为 true 的时候，标注将被应用到图层。labelingInfo 属性至少要包含一个 LabelClass ，LabelClass 定义了标注的表达式、摆放位置和符号属性。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>MapImageLayer - label sublayer features - 4.6</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"dojo/domReady!"
], function(
Map, MapView, MapImageLayer
) {
/*****************************************************************
* 创建渲染器
*****************************************************************/
var citiesRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
size: 0.5,
color: "white",
style: "circle",
outline: null
},
label: "Cities"
};
var statesRenderer = {
type: "simple",
symbol: {
type: "simple-fill",
style: "none",
outline: {
width: 2,
color: "white"
}
},
label: "State boundaries"
};
var countiesRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
style: "none",
outline: {
width: 0.5,
color: "white"
}
},
label: "County boundaries"
};
/*****************************************************************
* 创建图层 并设置标注
*****************************************************************/
var layer = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
sublayers: [{
id: 3,
renderer: countiesRenderer,
opacity: 0.5,
labelsVisible: true, //设置标注可见
minScale: 9250000,
labelingInfo: [{ //标注信息
labelExpression: "[name]", //标注表达式
labelPlacement: "always-horizontal", //标注摆放位置
symbol: { // 标注符号
type: "text",
color: [255, 0,0, 0.7],
haloColor: [1, 0, 0, 0.7],
haloSize: 1,
font: {
size: 11
}
},
minScale: 2400000,
maxScale: 73000
}]
}, {
id: 2,
renderer: statesRenderer,
opacity: 0.7,
labelsVisible: true,
labelingInfo: [{
labelExpression: "[state_abbr]",
labelPlacement: "always-horizontal",
symbol: {
type: "text",
color: [0, 255, 255, 0.85],
font: {
size: 16,
weight: "bolder"
}
},
minScale: 18500000,
maxScale: 9250000
}, {
labelExpression: "[state_name]",
labelPlacement: "always-horizontal",
symbol: {
type: "text",
color: [255, 255, 255, 0.85],
haloColor: "gray",
haloSize: 1,
font: {
size: 14,
weight: "bold"
}
},
minScale: 9250000,
maxScale: 2400000
}]
}, {
id: 0,
renderer: citiesRenderer,
labelsVisible: true,
labelingInfo: [{
where: "pop2000 > 500000",
labelExpression: "[areaname]",
labelPlacement: "above-right",
symbol: {
type: "text",
color: "white",
font: {
size: 10
},
backgroundColor: [0, 0, 0, 0.5]
},
minScale: 18500000,
maxScale: 4800000
}, {
where: "pop2000 > 500000",
labelExpression: "[areaname]",
labelPlacement: "above-right",
symbol: {
type: "text",
color: "white",
font: {
size: 16
},
backgroundColor: [0, 0, 0, 0.5]
},
minScale: 4800000
}, {
where: "pop2000 <= 500000",
labelExpression: "[areaname]",
labelPlacement: "above-right",
symbol: {
type: "text",
color: "white",
font: {
size: 7
},
backgroundColor: [0, 0, 0, 0.5]
},
minScale: 4800000
}]
}]
});
/*****************************************************************
* 添加图层到地图
*****************************************************************/
var map = new Map({
basemap: "satellite",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [-100, 39]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
程序运行效果：
沙箱地址：（完）