admin管理员组文章数量:1650763
概述
本文你将学习通过属性如何设置符号的颜色和样式。
如果想要提高样式和可视性,可以使用Renderer。首先,需要选择正确的渲染器,SimpleRenderer应用相同的图标到所有的图层,UniqueValueRenderer 对每一个不同的字符串属性值应用不同的图标符号,ClassBreaksRenderer 对一个范围内的值应用同一个图标符号。渲染器负责在图层绘制时为每一个图层应用恰当的图标。
可以设置标签在图层上展示文本属性
在本文中将使用不同的渲染器加强Trailheads的可视性。
步骤
- 使用练习1创建的地图应用程序。
使用标签和小人图片增强样式
- 在require中添加FeatureLayer模块
require([
"esri/Map",
"esri/views/MapView",
//*** ADD ***//
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {}
- 在主函数的末尾,创建一个对象,用它表示一个simple渲染器,设置这个对象的symbol属性。
var trailheadsRenderer = {
"type": "simple",
"symbol": {
"type": "picture-marker",
"url": "http://static.arcgis/images/Symbols/NPS/npsPictograph_0231b.png",
"width": "18px",
"height": "18px"
}
}
- 要创建展示小路名字的标签,可以定义一个对象保存标签的信息,定义使用symbol属性,设置字体颜色是白色,并且有2px的边框,位置是图层的上方居中。并且使用表达式来应用数据库中的字段(feature对象的属性)。
var trailheadsLabels = {
symbol: {
type: "text",
color: "#FFFFFF",
haloColor: "#5E8D74",
haloSize: "2px",
font: {
size: "12px",
family: "noto-sans",
style: "italic",
weight: "normal"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.TRL_NAME"
}
};
- 创建trailheads的一个Feature Layer层。
var trailheads = new FeatureLayer({
url:
"https://services3.arcgis/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
renderer: trailheadsRenderer,
labelingInfo: [trailheadsLabels]
});
map.add(trailheads);
由海拔决定小路的宽度(海拔越高路越宽)
若要想根据属性值给feature应用不同的图标,你需要使用VisualVariables.
- 在主函数底部定义一个SimpleRenderer对象,VisualVariables属性定义线的宽度随海拔增高而增大。
var trailsRenderer = {
type: "simple",
symbol: {
color: "#BA55D3",
type: "simple-line",
style: "solid"
},
visualVariables: [
{
type: "size",
field: "ELEV_GAIN", //依据的feature属性字段
minDataValue: 0, //属性最小值
maxDataValue: 2300,//属性最大值
minSize: "3px", //图标宽度最小值
maxSize: "7px" //图标宽度最大值
}
]
};
- 创建一个feature图层,设置opacity为0.7
var trails = new FeatureLayer({
url:
"https://services3.arcgis/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
renderer: trailsRenderer,
opacity: .75
});
map.add(trails, 0);
加载一个feature图层,只显示自行车路线
在一个图层中如果你想设计并绘制一部分数据,你可以应用一个不同的符号,设置definitionExpression属性,然后把这个图层放到最顶层。
8. 在主函数中创建一个simple的渲染器。
var bikeTrailsRenderer = {
type: "simple",
symbol: {
type: "simple-line",
style: "short-dot",
color: "#FF91FF",
width: "1px"
}
};
- 创建一个feature layer 图层,设置Url并查询条件。
var bikeTrails = new FeatureLayer({
url:
"https://services3.arcgis/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
renderer: bikeTrailsRenderer,
definitionExpression: "USE_BIKE = 'YES'"
});
map.add(bikeTrails, 1);
公园区域使用不一样的颜色
- 在主函数中创建一个UniqueValueRenderer 对象,type属性是unique-value,field属性是feature数据集的TYPE字段,uniqueValueInfos 是一个数组,为每一种TYPE的值定义一个图标。在本例中我定义了一个函数,返回图标信息。
function createFillSymbol(value, color) {
return {
"value": value,
"symbol": {
"color": color,
"type": "simple-fill",
"style": "solid",
"outline": {
"style": "none"
}
},
"label": value
};
}
var openSpacesRenderer = {
type: "unique-value",
field: "TYPE",
uniqueValueInfos: [
createFillSymbol("Natural Areas", "#9E559C"),
createFillSymbol("Regional Open Space", "#A7C636"),
createFillSymbol("Local Park", "#149ECE"),
createFillSymbol("Regional Recreation Park", "#ED5151")
]
};
- 创建一个feature图层,设置他的renderer属性
var openspaces = new FeatureLayer({
url:
"https://services3.arcgis/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
renderer: openSpacesRenderer,
opacity: 0.20
});
map.add(openspaces, 0);
本文标签: 样式系列ArcGISFeatureLayer
版权声明:本文标题:arcgis学习系列-4设置FeatureLayer的样式 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729532326a1204966.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论