實現效果是在要素點的四周不同位置添加標簽。 此節需要註意一個問題，書寫的先後順序可能會影響運行速度。要註意正確的書寫先後。 1、定義涉及到的所有變數 var minScale = 2500000; var serviceUrl = "https://services.arcgis.com/V6ZHF ...
實現效果是在要素點的四周不同位置添加標簽。
此節需要註意一個問題，書寫的先後順序可能會影響運行速度。要註意正確的書寫先後。
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);
