带材质建筑的着色
这个示例显示了带材质建筑以及其他三维物体的常见着色用例。在城市规划中，突出某些建筑物很重要。我们可以通过保留重要建筑物的材质并去除不重要建筑物的材质来实现这一点。这种做法仍然保留所有建筑物，但是只对感兴趣的建筑物应用材质。
通过降低材质颜色饱和度也可实现这一点。
在带材质建筑物上更改颜色时，有多个选项可用。这些选项可通过 FillSymbol3DLayer.material 的 colorMixMode 来设置。
例如，如果建筑有初始材质：
使用 tint 将在低饱和度的材质上设置新的颜色：
var symbol = {
type: "mesh-3d",
symbolLayers: [{
type: "extrude",
material: {
color: "blue",
colorMixMode: "tint"
}
}]
};
使用 replace 将导致新颜色替换掉材质：
使用 multiply 将会使初始材质和新颜色相乘。当建筑有丰富多彩的材质时，最终的颜色将非常深。在我们的示例中，建筑屋顶的红色调与蓝色相乘之后变成了很暗的颜色。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Coloring options for textured buildings - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#colorMixMode {
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: white;
padding: 20px;
font-size: 0.8em;
}
#colorMixMode label {
padding-right: 10px;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/layers/SceneLayer",
"esri/widgets/Legend",
"dojo/domReady!"
], function(
WebScene, SceneView, SceneLayer,
Legend
) {
var webscene = new WebScene({
portalItem: {
id: "03a9607d96244883af64c7f8c7e5de1b"
}
});
var view = new SceneView({
container: "viewDiv",
map: webscene
});
var layer = new SceneLayer({
portalItem: {
id: "5ecba5273b2d41ff9f6f1eb33f238d18"
},
title: "Buildings in Helsinki"
});
function getUniqueValueRenderer(color, colorMixMode) {
return {
type: "unique-value",
field: "usage",
defaultSymbol: {
type: "mesh-3d",
symbolLayers: [{
type: "fill",
material: {
color: [230, 230, 230, 0.7],
// 对于不感兴趣的建筑，移除材质
colorMixMode: "replace"
}
}]
},
uniqueValueInfos: [{
value: "general or commercial",
label: "commercial buildings",
symbol: {
type: "mesh-3d",
symbolLayers: [{
type: "fill",
material: {
color: color,
colorMixMode: colorMixMode
}
}]
}
}],
legendOptions: {
title: "Usage"
}
};
}
// function 根据选择的选项设置渲染器
function setRenderer(type) {
if (type === "original") {
layer.renderer = null;
}else if (type === "select") {
// 在这种情况，不修改不感兴趣的建筑材质
// color 和 colorMixMode 应该设置为 null,否则将默认为 white 和 multiply
layer.renderer = getUniqueValueRenderer(null, null);
}
else if (type === "emphasize") {
// 应用颜色是重要建筑突出，但是保留所有建筑的材质
layer.renderer = getUniqueValueRenderer("#F5D5A9", "tint");
}
else {
// 使用 white 和 tint 将降低建筑材质的饱和度，使用 replace 将移除材质
var colorMixMode = (type === "desaturate") ? "tint" : "replace";
// 创建一个 SimpleRender 并应用到图层
var locationRenderer = {
type: "simple",
symbol: {
type: "mesh-3d",
symbolLayers: [{
type: "fill",
material: {
color: "white",
colorMixMode: colorMixMode
}
}]
}
};
layer.renderer = locationRenderer;
}
}
webscene.add(layer);
// 添加事件监听，用来改变渲染器和 colorMixMode
document.getElementById("colorMixMode").addEventListener("change",
function(evt) {
setRenderer(evt.target.id);
});
view.ui.add("colorMixMode", "bottom-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="colorMixMode">
<input type="radio" id="original" name="mode" checked><label for="original">Buildings with original texture</label><br>
<input type="radio" id="select" name="mode"><label for="select">Show commercial buildings</label><br>
<input type="radio" id="emphasize" name="mode"><label for="emphasize">Emphasize commercial buildings</label><br>
<input type="radio" id="desaturate" name="mode"><label for="desaturate">Desaturate texture</label><br>
<input type="radio" id="replace" name="mode"><label for="replace">Remove texture</label>
</div>
</body>
</html>
程序执行效果：
沙箱地址：（完）