*使用ArcGIS JS API 4.20
一、 动态地图标注
由Sublayer类的labelingInfo属性控制, labelingInfo属性又是一个LabelClass类的数组,具体描述参见官网:https://developers.arcgis.com/javascript/latest/labeling/
这里参考的就是这个label sublayer features的例子,做了一些简化。
二、 透明度的设置
其中点线面的符号化是由renderer 来控制的,而label注记的符号化则是通过 labelingInfo属性控制。所以二者并不冲突,比如在调整面要素透明度的时候, 不会影响label标注的透明度。
完整测试代码:
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
MapImageLayer - label sublayer features | Sample | ArcGIS API for
JavaScript 4.20
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer"], (
Map,
MapView,
MapImageLayer
) => {
/*****************************************************************
* Create renderers for each sublayer
*****************************************************************/
const citiesRender = {
};
const statesRender = {
type:"simple",
symbol:{
type: "simple-fill",
color: [240,59,32,0.2]
}
}
//define map image layer
url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";
const layer = new MapImageLayer({
url:url,
sublayers:[
{
id: 3,
opacity: 0.2
},
{
id: 2,
renderer: statesRender,
opacity: 0.2,
labelingInfo: [
{
labelExpression: "[state_abbr]",
labelPlacement: "always-horizontal",
symbol: {
type: "text",
color: [255,255,255,0.9],
haloColor: [0,0,0,0.9],
haloSize: 1,
font:{
size:17
}
},
minScale: 18500000,
maxScale: 9250000
},
]
}
]
});
//add the layer to the map
const map = new Map({
basemap: "satellite",
layers:[layer]
});
const view = new MapView({
container: "viewDiv",
map:map,
zoom: 5,
center:[-100,39]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
效果:
三、其他
另外推荐一个比较好用的调色器网站:colorbrewer2