Hi @SaschaBrunnerCH
I need your precious help in applying hit test between these two objects. one is tree another is Electric line. can you help me in this.
the code is given below
<!-- https://community.esri.com/t5/arcgis-api-for-javascript-questions/change-symbology-in-colorandsizere... -->
<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
}
#slider {
background-color: white;
width: 20px;
}
#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",
"esri/smartMapping/renderers/color"
], (
WebScene,
SceneView,
FeatureLayer,
colorAndSizeRendererCreator,
histogram,
ColorSizeSlider,
PathSymbol3DLayer,
color
) => {
const map = new WebScene({
portalItem: {
id: "cee32f0d1548477c83323e9476d11903"
}
});
// 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_TH/FeatureServer/0",
visible: true,
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{CITY_NAME}, {CNTRY_NAME}",
content: "Height: {Z}",
fieldInfos: [
{
fieldName: "Z",
format: {
digitSeparator: false,
places: 0
}
}
]
}
});
map.add(layer);
const symbol = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "REGION",
defaultSymbol: {
type: "line-3d",
field: "arcid",
// autocasts as new LineSymbol3D()
symbolLayers: [{
type: "path", // autocasts as new PathSymbol3DLayer()
profile: "circle",
width: 0.05, // width of the tube in meters
material: { color: [ 0,0,0 ] }
}]}
};
const ETLINE = new FeatureLayer({
url: "https://services8.arcgis.com/Dxp0iiM83fijnVoI/arcgis/rest/services/ETLine/FeatureServer",
renderer: symbol,
outFields: ["*"],
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{Cmn_Name}",
content:
"<i>{Sci_Name}</i><br>" +
"This tree is in {Condition} condition and is {Height} Meter in height."
}
})
map.layers.add(ETLINE)
// 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",
valueUnit: "meter",
view: view,
minValue: 0,
maxValue: 47,
symbolType: "3d-volumetric-uniform",
};
// 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;
response.renderer.classBreakInfos[0].symbol = {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "esriRealisticTreesStyle",
name: "Acer",
valueUnit: "meter"
},
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: 100,
minValue: params.minValue,
maxValue: params.maxValue
});
})
.then((histogramResult) => {
const slider = ColorSizeSlider.fromRendererResult(
rendererResult,
histogramResult,
);
slider.container = "slider";
slider.viewModel.precision = 100;
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;
}
///////////////////////////hit test///////////////////////////////////////
/* view
.hitTest(event, { exclude: [view.graphics] })
.then((hitTestResult) => {
// print the information to the panel
hitresultground.textContent = `${Math.round(
hitTestResult.ground.distance
)} m`;
hitresultcount.textContent = hitTestResult.results.length;
let lastHit = null;
if (hitTestResult.results.length > 0) {
lastHit =
hitTestResult.results[hitTestResult.results.length - 1];
// create point graphic for each hit on objects
hitTestResult.results.forEach((result, index) => {
const hitObject = new Graphic({
geometry: result.mapPoint,
symbol:
index === 0 ? ETLINE : layer
});
view.graphics.add(hitObject);*/
///////////////////////////////////////////////////////////////////////////////////////////
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">Tree Height</span>
<div id="slider"></div>
</div>
</body>
</html>
