java设置标签位置_在不同位置添加标签

c917bc559b8a04636aed7db7df4f084c.png

实现效果是在要素点的四周不同位置添加标签。

此节需要注意一个问题,书写的先后顺序可能会影响运行速度。要注意正确的书写先后。

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、获取要素图层并添加到视图中的底图中去

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;

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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值