最近有个课题基于arcgis做二次开发，其中的一个需求需要对提前完成和延后完成的管线铺设展示不同的颜色，让使用者更加直观的看到进度，再利用定时器控制时间流动来实现进度模拟的功能，这个功能的难点就在于对不同的构件修改颜色，特此记录下unique-value 的render使用方法。
首先上图，图中加粗且半透明的洋红色和淡紫色是修改材质之后的管线
找到arcgis api，图层的render使用unique-value，我们要做的就是修改uniqueValueInfos，后面会根据这个数组来对字段的不同值进行不同颜色的渲染，官方文档的例子解读下就是，当字段REGION的值为North时，把的构件渲染成蓝色，当字段REGION的值为East时，把的构件渲染成绿色，后面依次类推，注意到这里有个layer.renderer，那么这个layer是什么呢，就是我们要修改的构件材质所在的图层，
理清楚了官方api的一些关键信息，接下来开始我们自己的代码
- 找到我们要修改的管线图层
const sublayers = view.map.layers.items[1].allSublayers.items.find(
v => v.title == "Pipes"
);
2.找到我们构件的唯一标识字段
const field = sublayers.objectIdField;
3.拿到后端给我们返回的提前完成和滞后完成的OID list，分别给这两种状态的管线赋予颜色，可以用rgb或者matlab颜色数组，试了rgba不行，所以要设置透明度可以使用matlab数组颜色，例如[255, 0, 0, 0.2]，透明度设置成0.2，，此处有一个注意的点，就是提前和滞后的数据都应该循环push到uniqueValueInfos数组里，最后吧返回的renderer赋值给sublayers.renderer，而不能先循环然后分别赋值给sublayers.renderer，这样只会取最后一次的renderer，导致最后一次颜色赋值会覆盖前面的颜色
下图的代码aheadList和timeoutList 里存储的是后端返回的oid集合
// 修改提前和滞后管段颜色
if (sublayers) {
const field = sublayers.objectIdField;
const listArr = [
{ list: aheadList, color: [0, 0, 255, 0.2] },
{ list: timeoutList, color: [255, 0, 0, 0.2] }
];
sublayers.renderer = this.getUniqueValueRenderer(listArr, field);
}
getUniqueValueRenderer(lists, field) {
let renderer = {
type: "unique-value",
field: field, //字段固定
uniqueValueInfos: []
};
lists.forEach(item => {
item.list.forEach(element => {
renderer.uniqueValueInfos.push(getSymbol(element, item.color));
});
});
return renderer;
},
显示的symbol设置，吧显示的大小改成5.5，就会比默认的管线粗一些，更容易看出来是哪些管线修改了，item就是每个构件的oid，这里之前一直出不来，因为直接吧oid集合传进来变成字符串，这样是不对的，应该是对每个构件进行符号设置，所以传进来的是单个构件的oid
getSymbol(item, _color) {
return {
value: item.toString(),
symbol: {
type: "mesh-3d",
symbolLayers: [
{
type: "fill",
material: {
color: _color,
colorMixMode: "replace"
},
edges: {
type: "solid",
color: _color,
size: 5.5
}
}
]
}
};
},
至此，将材质修改成不同的颜色功能就完成了，希望也能帮到大家
