CIMSymbol - Z-order not working correctly
280
2
02-05-2024 12:52 PM
by
In SymbolLayers array of the CIMSymbol, the z order of of the symbol layers is in the order in which they are situated in the array. The symbol at index 0 will be drawn on top of others but this does not apply when it comes to Text or the Text along with background callout.
As shown in below example, though the tree symbol is at index 0 in the layers still it is drawn below the text and the text background. There is no option to draw anything on top of the text background.
Code:
=====================================================
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>CIMSymbol | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sampleInstructions {
padding: 10px;
background-color: white;
width: 300px;
}
#topbar {
background: #fff;
position: absolute;
top: 15px;
right: 15px;
padding: 10px;
align-items: center;
display: flex;
flex-flow: row nowrap;
}
.action-button {
margin-right: 5px;
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
font-family: Arial;
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/widgets/Expand",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer"
], (MapView, Map, SketchViewModel, Expand, Graphic, GraphicsLayer, FeatureLayer) => {
let feature = { geometry: { type: "point", latitude: 29.29, longitude: 142.12 } }
const featureLayer = new FeatureLayer({
source: [feature],
fields: [
{ name: "ObjectID", alias: "ObjectID", type: "oid" }
],
renderer: {
type: "simple",
symbol: { type: "cim", data: getCIMSymbolData() }
},
objectIdField: "ObjectID",
geometryType: "point"
});
const map = new Map({ basemap: "gray-vector", layers: [featureLayer] });
const view = new MapView({ container: "viewDiv", map: map, center: [106.79, 38.23], zoom: 3 });
function getCIMSymbolData() {
return {
type: "CIMSymbolReference",
symbol: {
"type": "CIMPointSymbol",
"symbolLayers": [
{
"type": "CIMVectorMarker",
"enable": true,
"anchorPointUnits": "Relative",
"dominantSizeAxis3D": "Y",
"size": 70,
"billboardMode3D": "FaceNearPlane",
"frame": {
"xmin": 0,
"ymin": 0,
"xmax": 21,
"ymax": 21
},
"markerGraphics": [
{
"type": "CIMMarkerGraphic",
"geometry": {
"rings": [
[
[
15,
15
],
[
12,
15
],
[
16,
10
],
[
13,
10
],
[
17,
5
],
[
11,
5
],
[
11,
2
],
[
10,
2
],
[
10,
5
],
[
4,
5
],
[
8,
10
],
[
5,
10
],
[
9,
15
],
[
6,
15
],
[
10.5,
19
],
[
15,
15
]
]
]
},
"symbol": {
"type": "CIMPolygonSymbol",
"symbolLayers": [
{
"type": "CIMSolidStroke",
"enable": true,
"capStyle": "Round",
"joinStyle": "Round",
"lineStyle3D": "Strip",
"miterLimit": 10,
"width": 0,
"color": [
0,
0,
0,
255
]
},
{
"type": "CIMSolidFill",
"enable": true,
"color": [
0,
255,
0,
255
]
}
]
}
}
],
"scaleSymbolsProportionally": true,
"respectFrame": true
},
{
"type": "CIMVectorMarker",
"enable": true,
"size": 9,
"colorLocked": true,
"anchorPointUnits": "Relative",
"frame": {
"xmin": -5,
"ymin": -5,
"xmax": 5,
"ymax": 5
},
"markerGraphics": [
{
"type": "CIMMarkerGraphic",
"geometry": {
"x": 0,
"y": 0
},
"symbol": {
"type": "CIMTextSymbol",
"fontFamilyName": "Arial",
"fontStyleName": "Regular",
"height": 9,
"horizontalAlignment": "Left",
"offsetX": 0,
"offsetY": 0,
"symbol": {
"type": "CIMPolygonSymbol",
"symbolLayers": [
{
"type": "CIMSolidFill",
"enable": true,
"color": [255, 255, 255, 255]
}
]
},
"verticalAlignment": "Center",
"callout": {
"type": "CIMBackgroundCallout",
"backgroundSymbol": {
"type": "CIMPolygonSymbol",
"symbolLayers": [
{
"type": "CIMSolidFill",
"enable": true,
"color": [37, 15, 20, 255]
}
]
}
}
},
"textString": "THIS IS A TEST \nSYMBOL"
}
],
"scaleSymbolsProportionally": true,
"respectFrame": true,
"offsetX": 0,
"offsetY": 0
},
]
}
};
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="topbar">
<button class="action-button" id="pointButtonNumber" type="button" title="Draw point with number">1</button>
<button class="action-button" id="pointButtonLetter" type="button" title="Draw point with letter">A</button>
<button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button>
</div>
</div>
</body>
</html>
by
AnneFitz
Unfortunately, this is a limitation of FeatureLayer. CIMSymbols within a FeatureLayer will render the symbol layers in the following order from top to bottom for performance reasons, regardless of the order they are defined within the symbol.
- CIMTextSymbol embedded within a CIMVectorMarker symbol layer
- Marker symbols - CIMVectorMarker and CIMPictureMarker
- Stroke symbols - CIMSolidStroke and CIMPictureStroke
- Fill symbols - CIMSolidFill, CIMHatchFill, and CIMPictureFill
It should render as expected in a GraphicsLayer in our `/next` version of the API which is planned for release later this month.
by
