ArcGIS 10.8.1之后发布栅格数据的MapServer 动态工作空间替换数据源渲染问题

背景

经过测试，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><linkrel="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>