切换渲染器
在浏览器中，点云数据可以利用 PointCloudLayer 实现可视化。每个点的大小和颜色通过渲染器来定义。有四种渲染器类型可以用到点云数据上：
- PointCloudRGBRenderer
- PointCloudUniqueValueRenderer
- PointCloudStrechRenderer
- PointCloudClassBreaksRenderer
这写渲染器可以使用文档中定义的 API 创建，也可以使用 Smart Mapping API 生成。有三种渲染器创建器函数可以简化点云图层的渲染器创建过程：
colorRendererCreator.createPCTrueColorRenderer() 生成一个用原始扫描颜色可视化点的渲染器。
typeRendererCreator.createPCClassRenderer() 生成一个基于唯一值（如分类编码：植被、水等）的渲染器。
colorRendererCreator.createPCContinuousRenderer() 生成一个沿着连续的值（如强度、高程）颜色渐变的渲染器。
这个示例演示了如何调用这些方法将不同的渲染器应用到点云图层。渲染器需要使用字段名，例如高程、RGB、CLASS_CODE。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>PointCloudLayer - toggle renderers - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
padding: 12px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid white;
color: black;
}
</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/Map",
"esri/views/SceneView",
"esri/layers/PointCloudLayer",
"esri/renderers/smartMapping/creators/color",
"esri/renderers/smartMapping/creators/type",
"esri/widgets/Legend",
"esri/core/promiseUtils",
"dojo/domReady!"
], function(
Map, SceneView, PointCloudLayer,
colorRendererCreator, typeRendererCreator,
Legend, promiseUtils
) {
// 创建点云图层
var pcLayer = new PointCloudLayer({
url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BARNEGAT_BAY_LiDAR_UTM/SceneServer"
});
var map = new Map({
basemap: "gray-vector",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
heading: 210,
tilt: 78,
position: {
x: -8249335,
y: 4832005,
z: 50.7,
spatialReference: {
wkid: 3857
}
}
}
});
view.ui.add("paneDiv", "bottom-left");
view.ui.add(new Legend({
view: view
}), "bottom-right");
var renderersByField = { // 用于保存渲染器
RGB: null,
CLASS_CODE: null,
ELEVATION: null,
INTENSITY: null
};
/**
* 基于字段名生成渲染器
*/
function getRenderer(fieldName) {
// 如果渲染器已经生成了，直接返回
if (renderersByField[fieldName]) {
return promiseUtils.resolve(renderersByField[fieldName]);
}
// 存储渲染器
function responseCallback(response) {
renderersByField[fieldName] = response.renderer;
return response.renderer;
}
if (fieldName === "RGB") {
return colorRendererCreator.createPCTrueColorRenderer({
layer: pcLayer
})
.then(responseCallback);
}
if (fieldName === "CLASS_CODE") {
return typeRendererCreator.createPCClassRenderer({
layer: pcLayer,
field: fieldName
})
.then(responseCallback);
}
if (fieldName === "ELEVATION" || "INTENSITY") {
return colorRendererCreator.createPCContinuousRenderer({
layer: pcLayer,
field: fieldName
})
.then(responseCallback);
}
}
/******************************************************************
*
* 使用不同的渲染器显示点云图层
*
******************************************************************/
view.then(function() {
getRenderer("RGB")
.then(function(renderer) {
pcLayer.renderer = renderer;
map.add(pcLayer);
}).otherwise(function(e) {
console.log("error: ", e);
});
var radios = document.getElementsByName("renderer");
// 监听 radio button 事件 切换渲染器
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener("change", function(event) {
var fieldName = event.target.value;
getRenderer(fieldName)
.then(function(renderer) {
pcLayer.renderer = renderer;
}).otherwise(function(e) {
console.log("error: ", e);
});
});
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv" class="esri-widget">
<p>Visualize point cloud using: </p>
<input type="radio" name="renderer" value="RGB" checked> Original point cloud
scan color (Point Cloud RGB Renderer)<br>
<input type="radio" name="renderer" value="CLASS_CODE"> LAS classification (Point
Cloud Unique Values Renderer)<br>
<input type="radio" name="renderer" value="ELEVATION"> Elevation mapped on a
continuous color scheme (Point Cloud Stretch Renderer)<br>
<input type="radio" name="renderer" value="INTENSITY"> A classification based
on intensity values (Point Cloud Stretch Renderer)<br>
</div>
</body>
</html>
程序运行效果：
沙箱地址：（完）