背景
经过测试，Server 10.8.1、11.0、11.1发布相关服务设置动态空间之后，前端都无法自动读取同名的clr色彩映射表文件进行渲染，服务都是由ArcGIS Pro进行发布。
原因
基于ArcMap发布的服务才支持，但是10.8.1之后不支持ArcMap发布服务。自动读取clr色彩映射表文件，需要ArcMap Runtime后台支持，已废弃，可以加载切换数据源，但是不支持渲染，需要采用新的开发方式。
首先，如何发布服务并开启动态空间？
通过Pro发布服务后在Manager设置开启即可。
测试示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加载ArcGIS Server服务</title>
<!-- <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.25/"></script> -->
<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>
#viewDiv {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer"
], function(Map, MapView, MapImageLayer) {
// 创建一个地图实例
const map = new Map({
basemap: "streets"
});
// 创建一个地图视图实例
const view = new MapView({
container: "viewDiv",
map: map,
center: [120.0916129,30.2487992],
zoom: 8
});
// 定义 token
//const tkstr = "iN8hBNamZvCpIeo_-QD-dHAg8afm1y4ZUWuj1RmswuM";
// 创建一个动态地图服务图层
const dynamicLayer = new MapImageLayer({
//url: "http://xxxx:6080/geoscene/rest/services/demstyletest/MapServer",
url: "http://xxxx:6080/geoscene/rest/services/demstyletest/MapServer",
sublayers: [
{
id: 0,
source: {
type: "data-layer",
dataSource: {
type: "raster",
workspaceId: "kkk123",
dataSourceName: "aster84.tif"
}
}
}
]
});
// 将地图服务图层添加到地图中
map.add(dynamicLayer);
});
</script>
</body>
</html>
动态空间路径下即使，存放了同名clr色彩映射表，也是不支持读取渲染的。
解决方案
1. 导出为 RGB 方案的栅格数据
这种方法主要针对较为固定的成果数据，如果渲染也是动态的则无法满足。
具体方法可以参考：https://www.cnblogs.com/wigis/p/11065631.html
2. 将数据作为在线数据资源，使用ImageTileLayer加载
这种方法主要针对用户查看的栅格数据，tif栅格数据可以放在Tomcat或其他服务器都可以，渲染通过前端设置render控制，示例代码可以参考：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>hello</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.30/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.30/"></script>
<script>
require([
"esri/config",
"esri/WebMap",
"esri/views/MapView",
"esri/views/SceneView",
"esri/layers/ImageryTileLayer",
"esri/layers/TileLayer",
"esri/layers/support/RasterFunction",
"esri/renderers/RasterShadedReliefRenderer",
"esri/smartMapping/raster/support/colorRamps",
"esri/renderers/RasterStretchRenderer",
"esri/rest/support/MultipartColorRamp",
"esri/rest/support/AlgorithmicColorRamp",
"esri/Color",
], function(esriConfig,Map, MapView, SceneView,ImageryTileLayer, TileLayer, RasterFunction, RasterShadedReliefRenderer, colorRamps, RasterStretchRenderer, MultipartColorRamp, AlgorithmicColorRamp, Color) {
const colorRamp = new MultipartColorRamp({
colorRamps: [
new AlgorithmicColorRamp({
fromColor: new Color([20, 100, 150, 255]),
toColor: new Color([70, 0, 150, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([70, 0, 150, 255]),
toColor: new Color([170, 0, 120, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([170, 0, 120, 255]),
toColor: new Color([230, 100, 60, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([230, 100, 60, 255]),
toColor: new Color([255, 170, 0, 255])
}),
new AlgorithmicColorRamp({
fromColor: new Color([255, 170, 0, 255]),
toColor: new Color([255, 255, 0, 255])
})
]
});
const stretchRenderer = new RasterStretchRenderer({
colorRamp: colorRamp,
type: "raster-stretch",
bandIds: [0], // 使用第一个波段
stretchType: "min-max", // 最小值-最大值拉伸
statistics: [[0, 255]], // 波段的最小值和最大值
gamma: [1] // Gamma 值
});
let layer = new ImageryTileLayer({
url: "http://localhost/data/red.tif",
renderer: stretchRenderer
})
const map = new Map({
layers: [layer]
});
const view = new MapView({
map: map,
container: "viewDiv"
});
function updateImageTileLayerUrl(newUrl) {
// 移除旧图层
map.remove(layer);
// 创建新图层
let newLayer = new ImageryTileLayer({
url: newUrl,
renderer: stretchRenderer
});
// 将新图层添加到地图
map.add(newLayer);
}
let btn = document.getElementById("click")
btn.onclick = () => {
updateImageTileLayerUrl("http://127.0.0.1:5500/static/fanred.tif")
}
})
</script>
</head>
<body>
<div id="viewDiv"></div>
<button id="click">change</button>
</body>
</html>
2. 发布单景栅格数据的 ImageServer
需要通过代码层面，替换服务下的同名栅格数据源，同样，渲染也需要通过前端renderer控制。可以参考：
https://blog.csdn.net/suntongxue100/article/details/130303795?spm=1011.2415.3001.5331
