在不同位置添加标签
实现效果是在要素点的四周不同位置添加标签。
此节需要注意一个问题,书写的先后顺序可能会影响运行速度。要注意正确的书写先后。
1、定义涉及到的所有变量
var minscale = 2500000;
var serviceurl = "https://services.arcgis.com/v6zhfr6zdgnzuvg0/arcgis/rest/services/weather_stations_010417/featureserver/0";
2、设置地图视图
var view = new mapview({
container:"viewdiv",
map:new webmap({
portalitem:{id:"f0e331d7986041ba8267298f579b3afe"}
})
})
3、获取要素图层并添加到视图中的底图中去
<script type="text/plain" id="wind-direction">
var deg = $feature.wind_direct;
var speed = $feature.wind_speed;
var dir = when( speed == 0, "",
(deg < 22.5 && deg >= 0) || deg > 337.5, "n",
deg >= 22.5 && deg < 67.5, "ne",
deg >= 67.5 && deg < 112.5, "e",
deg >= 112.5 && deg < 157.5, "se",
deg >= 157.5 && deg < 202.5, "s",
deg >= 202.5 && deg < 247.5, "sw",
deg >= 247.5 && deg < 292.5, "w",
deg >= 292.5 && deg < 337.5, "nw", "" );
return speed + " mph " + dir;
</script>
var namearcade = "$feature.station_name";
var nameclass = {
labelexpressioninfo:{expression:namearcade},
labelplacement:"below-left",
minscale:minscale,
symbol:createtextsymbol("black")
};
var humidityarcade = "$feature.r_humidity + '% rh'";
var humidityclass = {
labelexpressioninfo:{expression:humidityarcade},
labelplacement:"below-left",
minscale:minscale,
symbol:createtextsymbol("#c17c47");
};
var temp = "round($feature.temp)+'f'";
var lowtempclass = {
labelexpressioninfo:{expression:temp},
where:"temp<=32",
labelplacement:"above-left",
symbol:createtextsymbol("#4792c1");
};
var hightempclass = {
labelexpressioninfo:{expression:temp},
where:"temp>32",
labelplacement:"above-left",
symbol:createtextsymbol("#f47742");
};
var windclass = {
labelexpressioninfo:{expression:document.getelementbyid("wind-direction")},
labelplacement:"above-right",
symbol:createtextsymbol("#3ba53f");
};
var layer = new featurelayer({
url:serviceurl,
renderer:{
type:"simple",
symbol:{
type:"simple-marker",
color:[255, 255, 255, 0.6],
size:4,
outline:{
color:[0, 0, 0, 0.4],
width:0.5
}
}
},
labelinginfo:[nameclass,humidityclass,lowtempclass,hightempclass,windclass]
});
view.map.add(layer);