背景
經過測試,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>
2. 發布單景柵格數據的 ImageServer
需要通過代碼層面,替換服務下的同名柵格數據源,同樣,渲染也需要通過前端renderer控制。可以參考:
https://blog.csdn.net/suntongxue100/article/details/130303795?spm=1011.2415.3001.5331