Hi Developers,
I am working on tree growth apllication at diffrenet time. I found a sample code in ARCGIS api for javascript for using slidear to change the size of object. I have input my data on it and it is coming but I am unable to change the symbology from pont to esrirealistic tree.
my code is given below............
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Generate univariate continuous size and color visualization in 3D | Sample
| ArcGIS API for JavaScript 4.22
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.22/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#containerDiv {
background-color: white;
padding: 3px;
text-align: center;
}
#title {
font-size: 14pt;
}
</style>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/smartMapping/renderers/univariateColorSize",
"esri/smartMapping/statistics/histogram",
"esri/widgets/smartMapping/ColorSizeSlider",
"esri/symbols/PathSymbol3DLayer"
], (
WebScene,
SceneView,
FeatureLayer,
colorAndSizeRendererCreator,
histogram,
ColorSizeSlider,
PathSymbol3DLayer
) => {
const map = new WebScene({
portalItem: {
id: "38af2baefd3245f08895f07d915407db"
}
});
// The minSize and maxSize of volumetric symbols are determined
// based on the view/camera the data will be displayed in.
const view = new SceneView({
container: "viewDiv",
map: map,
});
// Create FeatureLayer instance with popupTemplate
const layer = new FeatureLayer({
url: "https://services8.arcgis.com/Dxp0iiM83fijnVoI/arcgis/rest/services/tree_hi/FeatureServer",
visible: false,
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{CITY_NAME}, {CNTRY_NAME}",
content: "Total population: {Z}",
fieldInfos: [
{
fieldName: "Z",
format: {
digitSeparator: true,
places: 0
}
}
]
}
});
map.add(layer);
// configure parameters for the renderer generator.
// the layer must be specified along with a field name
// or arcade expression. The view and other properties determine
// the appropriate default color and size schemes.
const params = {
layer: layer,
field: "Z",
view: view,
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "esriRealisticTreesStyle",
name: "Other"
},
minValue: 0,
maxValue: 25
};
// Generate a renderer visualizing a single variable
// with continuous color and size based on the
// statistics of the data in the provided layer
// and field name.
//
// This resolves to an object containing several helpful
// properties, including size/color schemes, statistics,
// the renderer, and visual variables
let rendererResult = null;
view.when().then(() => {
colorAndSizeRendererCreator
.createContinuousRenderer(params)
.then((response) => {
// set generated renderer on the layer and add it to the map
rendererResult = response;
layer.renderer = response.renderer;
if (!layer.visible) {
layer.visible = true;
}
// generate a histogram for use in the slider. Input the layer
// and field name to generate it.
// You can also use an arcade expression instead of
// a field and normalization field
return histogram({
layer: layer,
field: params.field,
numBins: 40,
minValue: params.minValue,
maxValue: params.maxValue
});
})
.then((histogramResult) => {
const slider = ColorSizeSlider.fromRendererResult(
rendererResult,
histogramResult
);
slider.container = "slider";
slider.viewModel.precision = 0;
slider.labelFormatFunction = (value) => {
return parseInt(value.toFixed(0)).toLocaleString();
};
slider.histogramConfig.standardDeviation = null;
view.ui.add("containerDiv", "bottom-left");
// when the user slides the handle(s), update the renderer
// with the updated color and size visual variable objects
function changeEventHandler() {
const renderer = layer.renderer.clone();
renderer.visualVariables = slider.updateVisualVariables(
renderer.visualVariables
);
layer.renderer = renderer;
}
slider.on(
["thumb-change", "thumb-drag", "min-change", "max-change"],
changeEventHandler
);
})
.catch(console.error);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="containerDiv">
<span id="title" class="esri-widget">Total population</span>
<div id="slider"></div>
</div>
</body>
</html>
Please help me in my task as soon as posible. any suggestions are welcome.
