在ArcGIS中, 除了在桌面端做配图之外,一些符号化工作也可以在代码端去进行设置,这里简单的做了一些测试及小结。
一、服务的区别
在ArcGIS中最基础的两种数据服务就是动态地图服务(MapServer)和要素服务(FeatureServer):
动态地图服务一般用于可视化展示,当然也可以通过Query的一些方法获取到地图中的数据信息,例如geometry等信息。这里的可视化属于服务器端渲染,一般是渲染完成之后将地图对应的图片传递到浏览器进行显示。
要素服务则是偏向于用于在线编辑和分析功能,但是也可以通过代码进行符号化,属于前端渲染。所以一般动态地图服务如果需要支持某些分析功能,就需要先通过查询等手段获取到geometry之后,再去构建feature要素用于分析传递。
二、动态地图服务的符号化
如果发布的服务为MapServer, 在作图的时候没有设置相应的样式,或者有不同的符号化需求,则可以通过设置renderer来进行修改。
这里的示例代码为使用的图片符号,如果需要其他符号方式,可以具体查看官网:
测试代码使用了PictureMarkerSymbol:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
MapImageLayer - set renderers on sublayers | Sample | ArcGIS Maps SDK for
JavaScript 4.25
</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>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView",
"esri/layers/MapImageLayer","esri/symbols/PictureMarkerSymbol"], (
Map,
MapView,
MapImageLayer,
PictureMarkerSymbol
) => {
const citiesRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
width: "64px",
height: "64px"
}
};
const layer = new MapImageLayer({
url: "http://localhost:6080/arcgis/rest/services/pointtest/MapServer",
sublayers: [
{
id: 0,
renderer: citiesRenderer,
opacity: 0.6
}
]
});
/*****************************************************************
* Add the layer to a map
*****************************************************************/
const map = new Map({
basemap: "dark-gray-vector",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [108.5, 18.5]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
这里采用的实际上是服务器端渲染,我们在浏览器可以看到请求返回的是渲染好的图片:
这种方式在服务访问数比较小数据量大的情况下,理论上借助服务器的渲染能力,应该能提高渲染能力。但是如果访问渲染的数量需求过大可能会给服务器带来较大压力。
三、要素服务的符号化
同样的要素服务在代码也是使用renderer来进行符号化来设置和渲染,测试代码如下:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
MapImageLayer - set renderers on sublayers | Sample | ArcGIS Maps SDK for
JavaScript 4.25
</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>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/layers/FeatureLayer"], (
Map,
MapView,
MapImageLayer,
PictureMarkerSymbol,
FeatureLayer
) => {
const layer = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/pointlighttest/FeatureServer",
});
/*****************************************************************
* Add the layer to a map
*****************************************************************/
layer.renderer = {
type: "simple",
symbol: {
type: "picture-marker",
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
width: "64px",
height: "64px"
}
}
const map = new Map({
basemap: "dark-gray-vector",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [108.5, 18.5]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
查看浏览器请求会发现,要素服务是通过query服务器获取到信息之后,在浏览器端进行渲染的,并没有export返回图片的请求:
因此,如果访问服务的终端非常多,服务器压力较大的情况下,都需要不同的符号化渲染,其实可以考虑发布要素服务,采用前端渲染的方法来减小服务器的压力。