1、需求描述
ArcGIS JS API ImageryLayer有丰富的功能，对栅格数据进行重分类是非常普遍的需求。RasterFunction栅格函数就允许执行重分类。
const remapRF = new RasterFunction({
functionName: "Remap",
functionArguments: {
// pixel values of forest categories are 41, 42, and 43
// according to the raster attribute table.
// The InputRanges property defines the ranges of intial pixel values to remap
// Three ranges: [0, 41], [41, 44], and [44, 255] are defined to extract forest pixels.
inputRanges: [0, 41, 41, 44, 44, 255],
// non-forest pixels (0-41 and 44-255) are remapped to a value of 1,
// forest pixels (41-44) are remapped to a value of 2.
outputValues: [1, 2, 3],
// $$(default) refers to the entire image service,
// $2 refers to the second image of the image service
raster: "$$"
}
});
重分类后可以对栅格进行颜色重新渲染。
const colorRF = new RasterFunction({
functionName: "Colormap",
functionArguments: {
colormap: [
// non-forest pixels (value of 1) are assigned
// a yellowish color RGB = [253, 254, 152]
[1, 0, 0, 255],
// forest pixels (value of 2) are assigned
// a greenish color RGB = [2, 102, 6]
[2, 0, 255, 0],
[3, 255, 0, 0]
],
// Setting the previous raster function to the Raster
// property of a new raster function allows you to chain functions
raster: remapRF
},
outputPixelType: "U8"
});
效果如下：
image.png
2、问题出现，在图例中只是显示了该栅格的数值数据123，未能正常中文显示为业务标注。
解决办法，增加渲染规则，添加colormap 标注和值对应。
const layer = new ImageryLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer",
// apply the most recent raster function to the chain
rasterFunction: colorRF,
renderer: new RasterColormapRenderer({
colormapInfos: [
{
color: [ 0, 0, 255],
value: 1,
label: "蓝",
},
{
color: [ 0, 255, 0],
value: 2,
label: "绿",
},
{
color: [255, 0, 0],
value: 3,
label: "红",
},
]
}
),
mosaicRule: mosaicRule,
effect: "saturate(125%) contrast(150%)"
});
image.png
3、完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>ImageryLayer - raster function | Sample | ArcGIS Maps SDK for JavaScript 4.32</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.32/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/ImageryLayer",
"esri/layers/support/RasterFunction", "esri/widgets/Legend", "esri/renderers/RasterColormapRenderer",
"esri/layers/support/MosaicRule"
], (Map, MapView, ImageryLayer, RasterFunction, Legend, RasterColormapRenderer, MosaicRule) => {
/**************************************************************************
* Create image layer with client defined rendering rules and mosaic rules
*************************************************************************/
// Define the way overlapping images are mosaicked together
const mosaicRule = new MosaicRule({
ascending: true,
method: "center",
operation: "last"
});
// Defines a Remap raster function. Remap reclassifies pixel
// values to new values. In this case we want to separate
// two landcover types: forested areas and non-forested areas
const remapRF = new RasterFunction({
functionName: "Remap",
functionArguments: {
// pixel values of forest categories are 41, 42, and 43
// according to the raster attribute table.
// The InputRanges property defines the ranges of intial pixel values to remap
// Three ranges: [0, 41], [41, 44], and [44, 255] are defined to extract forest pixels.
inputRanges: [0, 41, 41, 44, 44, 255],
// non-forest pixels (0-41 and 44-255) are remapped to a value of 1,
// forest pixels (41-44) are remapped to a value of 2.
outputValues: [1, 2, 3],
// $$(default) refers to the entire image service,
// $2 refers to the second image of the image service
raster: "$$"
}
});
// The Colormap raster function adds color to each pixel
// based on its pixel value
const colorRF = new RasterFunction({
functionName: "Colormap",
functionArguments: {
colormap: [
// non-forest pixels (value of 1) are assigned
// a yellowish color RGB = [253, 254, 152]
[1, 0, 0, 255],
// forest pixels (value of 2) are assigned
// a greenish color RGB = [2, 102, 6]
[2, 0, 255, 0],
[3, 255, 0, 0]
],
// Setting the previous raster function to the Raster
// property of a new raster function allows you to chain functions
raster: remapRF
},
outputPixelType: "U8"
});
const layer = new ImageryLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer",
// apply the most recent raster function to the chain
rasterFunction: colorRF,
renderer: new RasterColormapRenderer({
colormapInfos: [
{
color: [ 0, 0, 255],
value: 1,
label: "蓝",
},
{
color: [ 0, 255, 0],
value: 2,
label: "绿",
},
{
color: [255, 0, 0],
value: 3,
label: "红",
},
]
}
),
mosaicRule: mosaicRule,
effect: "saturate(125%) contrast(150%)"
});
/*************************
* Add image layer to map
************************/
const map = new Map({
basemap: "gray-vector",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-84.1522, 35.793],
zoom: 8
});
const legend = new Legend({
view: view,
container: "legendDiv"
});
view.ui.add("infoDiv", "bottom-left");
});
</script>
</head>
<body>
<div id="infoDiv" class="esri-widget">
<div id="legendDiv"></div>
</div>
<div id="viewDiv">
</div>
</body>
</html>
