I've been unable to display a CIMSymbol with real-world dimensions in a scene view. Can anybody offer any assistance? Here is a sample of code to test with. I am using useRealWorldSymbolSizes, but it doesn't seem to be working.
As I zoom in on the map, I'd expect the icon to appear larger as it's overall dimensions remain the same, but it's scaling "normally", which isn't the desired behaviour here.
Thanks,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Testing 3D Vessel
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.23/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/Graphic",
"esri/geometry/Mesh",
"esri/geometry/Point",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/renderers/Renderer",
"esri/symbols/CIMSymbol",
"esri/symbols/support/cimSymbolUtils"
], (
Map,
Basemap,
Graphic,
Mesh,
Point,
SceneView,
FeatureLayer,
Legend,
Renderer,
CIMSymbol,
cimSymbolUtils
) => {
let startingPoint = new Point({
type: "point", // autocasts as new Point()
x: -90,
y: 30
});
const vesselBeam = 100;
const vesselLength = 250;
const vesselSymbol = new CIMSymbol({
data: {
type: "CIMSymbolReference",
symbol: {
type: "CIMPointSymbol",
useRealWorldSymbolSizes: true,
symbolLayers: [
{
type: "CIMVectorMarker",
enable: true,
size: vesselLength,
anchorPointUnits: "Relative",
billboardMode3D: "None",
frame: {
xmin: 0,
ymin: 0,
xmax: vesselBeam,
ymax: vesselLength
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [[[0,0],[0,vesselLength*0.8],[vesselBeam/2,vesselLength],[vesselBeam,vesselLength*0.8],[vesselBeam,0],[0,0]]]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: true,
width: 8,
color: [0,0,0,255]
},
{
type: "CIMSolidFill",
enable: true,
color: [51,51,51,255]
}
]
}
}
],
scaleSymbolsProportionally: true
}
]
}
}
});
const map = new Map({
basemap: "hybrid"
});
const view = new SceneView({
container: "viewDiv",
map: map,
center: [-90, 30],
zoom: 17
});
let features = [
{
geometry: startingPoint,
attributes: {
ObjectID: 1
}
}
];
// geometryType and spatialReference of the layer
// will be inferred from the first feature in the array
// if it has a geometry.
let layer = new FeatureLayer({
source: features, // autocast as a Collection of new Graphic()
objectIdField: "ObjectID",
renderer: {
type: "simple",
symbol: vesselSymbol
}
});
map.add(layer);
view.on("click", function(event) {
// Get the coordinates of the click on the view
var lat = event.mapPoint.latitude;
var lon = event.mapPoint.longitude;
newPoint = new Point({
type: "point", // autocasts as new Point()
x: lon,
y: lat
});
let editFeatures = [
{
geometry: newPoint,
attributes: {
ObjectID: 1
}
}
];
let edits = {
updateFeatures: editFeatures
};
layer.applyEdits(edits).then(function(results) {
});
view.goTo(newPoint);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
