ArcgisServer 的 RasterWorkSpace 中 单值栅格 的颜色渲染不固定的问题
(环境: arcmap 10.5, arcgis server 10.5, js api 4.23, chrome 88.0)
i. 栅格数据源是重分类后. 只有数值 1,2,3,4,5,6 的单值栅格数据(单波段. tif 文件)
ii. 数据放在 RasterWorkSpace中.(栅格动态空间. 因为是动态生成的 tif . 不使用ImageryLayer )
iii. 在js api 中,加载这个图层到地图.
iv. 问题: 加载到地图后. 每次拖拽或缩放. 请求到的栅格渲染的颜色,都不一样.
如下. 是同一个 **RasterWorkSpace/MapServer/export?*** 请求到的图片. 三次返回的都不一样.
如何才能让每次请求到的栅格image的颜色是一致的 ?
尝试解决. 试了如下方法.
1. 查看了 arcgis server rest api 中的: MapServer/export 接口说明. 里面有 renderer 这个参数, 但并没有针对 栅格动态空间中 栅格的 Renderer.
2. 鉴于 加载的效果和 ImageryLayer类型.尝试使用 ImageryLayer的renderer 配置到 js api加载 栅格空间图层的 renderer属性上. 但是,并不支持.
js 代码.
i. 栅格数据源是重分类后. 只有数值 1,2,3,4,5,6 的单值栅格数据(单波段. tif 文件)
ii. 数据放在 RasterWorkSpace中.(栅格动态空间. 因为是动态生成的 tif . 不使用ImageryLayer )
iii. 在js api 中,加载这个图层到地图.
iv. 问题: 加载到地图后. 每次拖拽或缩放. 请求到的栅格渲染的颜色,都不一样.
如下. 是同一个 **RasterWorkSpace/MapServer/export?*** 请求到的图片. 三次返回的都不一样.
如何才能让每次请求到的栅格image的颜色是一致的 ?
尝试解决. 试了如下方法.
1. 查看了 arcgis server rest api 中的: MapServer/export 接口说明. 里面有 renderer 这个参数, 但并没有针对 栅格动态空间中 栅格的 Renderer.
2. 鉴于 加载的效果和 ImageryLayer类型.尝试使用 ImageryLayer的renderer 配置到 js api加载 栅格空间图层的 renderer属性上. 但是,并不支持.
js 代码.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Demo</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link href="https://js.arcgis.com/4.23/esr ... ot%3B rel="stylesheet" type="text/css">
<script src="[url=https://js.arcgis.com/4.23/]https://js.arcgis.com/4.23/init.js[/url]"></script>
</head>
<body></body>
<script>
var layer, view;
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/layers/ImageryLayer",
"esri/layers/MapImageLayer",
"esri/layers/ElevationLayer",
"esri/layers/FeatureLayer",
"esri/layers/TileLayer",
"esri/layers/ImageryLayer",
"esri/Map",
"esri/Basemap",
"esri/widgets/BasemapToggle",
"esri/views/SceneView",
"esri/views/MapView",
'esri/layers/support/RasterFunction',
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/tasks/support/StatisticDefinition",
"esri/widgets/Legend",
"esri/tasks/support/MultipartColorRamp",
"esri/tasks/support/AlgorithmicColorRamp",
"esri/Color",
], function (
esriConfig, WebTileLayer, ImageryLayer, MapImageLayer, ElevationLayer, FeatureLayer, TileLayer, ImageryLayer,
Map, Basemap, BasemapToggle, SceneView, MapView,
RasterFunction,
QueryTask, Query, StatisticDefinition,
Legend,
MultipartColorRamp, AlgorithmicColorRamp, Color
) {
var map = new Map({
basemap: "satellite",
});
view = new SceneView({
container: "viewDiv",
map: map,
center: [103.62693744206642, 30.8771564431387],
zoom: 14
});
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 renderer = {
type: 'raster-stretch',
colorRamp,
"computeGamma": false,
"gamma": [1],
"useGamma": false,
"stretchType": "min-max",
};
const renderer2 = {
type: 'class-breaks',
field: 'xp/result1.tif.Value',
classBreakInfos: [
{
min: 0,
max: 100,
symbol: {
type: 'simple-fill',
color: 'red'
}
}
]
};
layer = new MapImageLayer({
"id": "aiResultRasterImageLayer",
"url": "http://******:6080/arcgis/rest/services/*******/MapServer",
"sublayers": [
{
"id": 999,
"source": {
"type": "data-layer",
"dataSource": {
"type": "raster",
"workspaceId": "AiRaster",
"dataSourceName": "*****.tif"
}
},
// renderer: renderer
}
]
})
map.add(layer);
var legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
});
</script>
</html>
1 个回复
许丹石
赞同来自: 0小羊0沉默
在前端,可以对影像图层使用栅格函数进行渲染。
要回复问题请先登录或注册