arcade表达式是轻量级的脚本语言，我们可以通过全局变量$feature获取要素属性。比如说，要为城市添加标签，利用city_name列，我们可以编写语句：$feature.city_name。arcade语句可以利用表达式来执行数学运算，逻辑运算。
首先来看下，这次需要展现的要素图层是：
我们用到的属性表的两列信息：风向和风速
最终展示效果是：
包含两个部分：用不同的样式展示要素点，添加标记。
1、创建地图底图并且显示：
"esri/map","esri/views/sceneview"
var map = new map({
basemap:"topo"
});
var view = new sceneview({
map:map,
container:"viewdiv",
camera:{ //在三维图层中需要设置视角
position:{
x:-10930027,
y:5458284,
z:126663,
spatialreference:{wkid:102100}
},
heading:63,
tilt:63
},
constraints:{ //constraints要和camera一起设置
altitude:{min:100000}
}
});
2、获取要素图层，并且显示
"esri/layers/featurelayer"
var layer = new featurelayer({
url:"https://services.arcgis.com/v6zhfr6zdgnzuvg0/arcgis/rest/services/weather_stations_010417/featureserver/0",
elevationinfo:{ //标记贴在地上显示
mode:"relative-to-ground",
offset:1000
},
renderer:{
type:"simple",
symbol:{
type:"point-3d",
symbollayers:[{ //用于3d显示的设置
type:"object",
material:{color:"red"}, //标记的颜色
resource:{primitive:"tetrahedron"}, //标记的样式
width:10000,
depth:20000,
height:1000
}]
}
},
visualvariables:[{
type:"rotation",
valueexpression:"$feature.wind_direct-180",
axis:"heading"
}],
opacity:1,
labelinginfo:[ ]
});
map.add(layer);
3、添加标签
var windarcade = document.getelementbyid("wind-direction").text;
var windclasses = [{min:0,max:67.5,color:"#4c82c4"},{min:...}];
var labelclass = windclasses.map(function(windclass){
return {
symbol:{
type:"label-3d",
symbollayers:[{ //3d显示效果
type:"text",
material:{color:"white"},
halo:{color:windclass.color,size:1},
size:12
}]
},
labelplacement:"above-center",
labelexpressioninfo:{
expression:windarcade
}
}
})
<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>
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
我要评论
网友评论