by
I have a feature layer and I have created a CIMSymbol with two symbol layers. First is the CIMPictureMarker for background image and second is the CIMTextSymbol to show text on top of that background image.
When there are multiple features on the map and if their symbols overlap on the map then the text symbol layer of the first symbol overlaps the second symbol and you can see the text from one feature on the symbol of another feature. As you can see below.
Any idea how we can fix this?
I have added the code below.
<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.26</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 picture1 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9Ijk0cHgiIGhlaWdodD0iOTBweCIgdmlld0JveD0iMCAwIDk0IDkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT4wMDY5QzVENi1GNEFDLTQxRUUtODNBQi02RkQ2MDk1RUQzMzg8L3RpdGxlPg0KICAgIDxnIGlkPSJFeHRlbmRlZC1MYWJlbC1GbGlnaHQtYW5kLUFpcnBvcnRzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkZsaWdodC0mYW1wOy1BaXJwb3J0LUxhYmVscy1TVkdzLWZvci1FeHRlbmRlZC1MYWJlbHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OS4wMDAwMDAsIC01OTIuMDAwMDAwKSIgZmlsbD0iIzc0NiI+DQogICAgICAgICAgICA8cGF0aCBkPSJNNjAsNTkyIEwxNTIsNTkyIEMxNTIuNTUyMjg1LDU5MiAxNTMsNTkyLjQ0NzcxNSAxNTMsNTkzIEwxNTMsNjgxIEMxNTMsNjgxLjU1MjI4NSAxNTIuNTUyMjg1LDY4MiAxNTIsNjgyIEw2MCw2ODIgQzU5LjQ0NzcxNTMsNjgyIDU5LDY4MS41NTIyODUgNTksNjgxIEw1OSw2MTguNDA1NDgxIEw1OSw1OTMgQzU5LDU5Mi40NDc3MTUgNTkuNDQ3NzE1Myw1OTIgNjAsNTkyIFoiIGlkPSJQYXBlci1Db3B5LTEwIj48L3BhdGg+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=";
let picture2 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9Ijk0cHgiIGhlaWdodD0iOTBweCIgdmlld0JveD0iMCAwIDk0IDkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT4wMDY5QzVENi1GNEFDLTQxRUUtODNBQi02RkQ2MDk1RUQzMzg8L3RpdGxlPg0KICAgIDxnIGlkPSJFeHRlbmRlZC1MYWJlbC1GbGlnaHQtYW5kLUFpcnBvcnRzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkZsaWdodC0mYW1wOy1BaXJwb3J0LUxhYmVscy1TVkdzLWZvci1FeHRlbmRlZC1MYWJlbHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OS4wMDAwMDAsIC01OTIuMDAwMDAwKSIgZmlsbD0iIzM2NiI+DQogICAgICAgICAgICA8cGF0aCBkPSJNNjAsNTkyIEwxNTIsNTkyIEMxNTIuNTUyMjg1LDU5MiAxNTMsNTkyLjQ0NzcxNSAxNTMsNTkzIEwxNTMsNjgxIEMxNTMsNjgxLjU1MjI4NSAxNTIuNTUyMjg1LDY4MiAxNTIsNjgyIEw2MCw2ODIgQzU5LjQ0NzcxNTMsNjgyIDU5LDY4MS41NTIyODUgNTksNjgxIEw1OSw2MTguNDA1NDgxIEw1OSw1OTMgQzU5LDU5Mi40NDc3MTUgNTkuNDQ3NzE1Myw1OTIgNjAsNTkyIFoiIGlkPSJQYXBlci1Db3B5LTEwIj48L3BhdGg+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4="
let feature1 = {
geometry: { type: "point", latitude: 45.29, longitude: 122.12 },
attributes: { text: 123, type: "A" }
}
let feature2 = {
geometry: { type: "point", latitude: 43.29, longitude: 122.12 },
attributes: { text: 456, type: "B" }
}
const featureLayer = new FeatureLayer({
source: [feature1, feature2],
fields: [
{ name: "ObjectID", alias: "ObjectID", type: "oid" },
{ name: "text", type: "string" },
{ name: "type", type: "string" }
],
renderer: {
type: "unique-value",
field: "type",
uniqueValueInfos: [
{ value: "A", symbol: { type: "cim", data: getCIMSymbolData(picture1) } },
{ value: "B", symbol: { type: "cim", data: getCIMSymbolData(picture2) } },
]
},
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(myUrl) {
return {
type: "CIMSymbolReference",
primitiveOverrides: [
{
type: "CIMPrimitiveOverride",
primitiveName: "myText",
propertyName: "TextString", // Should be in camel case
valueExpressionInfo: {
type: "CIMExpressionInfo",
title: "Pirep elevation text/number to show on pirep symbol",
expression: "$feature.text", // value of textString will be based on the NAME of the feature
returnType: "Default"
}
}
],
symbol: {
type: "CIMPointSymbol",
symbolLayers: [
{
type: "CIMPictureMarker",
enable: true,
anchorPoint: { x: 0, y: 0 },
size: 30,
scaleX: 1,
tintColor: [255, 255, 255, 255],
url: myUrl
},
{
type: "CIMVectorMarker",
enable: true,
size: 10,
colorLocked: true,
anchorPointUnits: "Relative",
frame: { xmin: -5, ymin: -5, xmax: 5, ymax: 5 },
markerGraphics: [
{
type: "CIMMarkerGraphic",
primitiveName: "myText",
geometry: { "x": 0, "y": 0 },
symbol: {
type: "CIMTextSymbol",
fontFamilyName: "Arial",
fontStyleName: "Bold",
height: 10,
size: 12,
horizontalAlignment: "Center",
offsetX: 0,
offsetY: -10,
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
"type": "CIMSolidFill",
"enable": true,
"color": [255, 255, 255, 255]
}
]
},
verticalAlignment: "Center",
},
textString: ""
}
],
scaleSymbolsProportionally: true,
respectFrame: true
}
]
}
};
}
});
</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>
1 Solution
Accepted Solutions
by
