Highlight multiple objects in different colour simultaneously

583
4
03-03-2021 02:26 AM
abhishek_shah
New Contributor II
//I have two layers from which I have queried the object IDs (multipatch features) .
What i want to achieve is to highlight the object IDs in different colors and display them simultaneously.
The issue I am facing while doing this is that when I give these objects different colors as per layer and try to highlight them by calling the function , the objects get highlighted in the same color.//
 
var highlightHandle1=null;
var highlightHandle2=null;
var view = new SceneView({
    container: "viewDiv",
    map: webscene,   
});
function buildingColor1(){
         webscene.load().then(function() {
                        var officeSceneLayer = webscene.allLayers.filter(function(elem) {
    
                            return elem.title === "office layer";
                        }).items[0];
                       

 

                         // Highlight is set on the layerView, so we need to detect when the layerView is ready
                        view.whenLayerView(officeSceneLayer).then(function(officeLayerView) {

 

                            const query = officeLayerView.createQuery();



                            officeLayerView.queryObjectIds(query).then(highlightBuildings1);
                            console.log("checking1");

 

                            function highlightBuildings1(objectIds){ 
                                console.log("checking2");
                               
                                       officeLayerView.view.highlightOptions.color = "red";
                                        highlightHandle1 = officeLayerView.highlight(objectIds);

 

                            }
                          

 

        
                        });
                    })
}
function buildingColor2(){
         webscene.load().then(function() {
                        var residentialSceneLayer = webscene.allLayers.filter(function(elem) {
    
                            return elem.title === "residential layer";
                        }).items[0];
                       

 

                        // Highlight is set on the layerView, so we need to detect when the layerView is ready
                        view.whenLayerView(residentialSceneLayer).then(function(residentialLayerView) {

 

                            const query = residentialLayerView.createQuery();



                            residentialLayerView.queryObjectIds(query).then(highlightBuildings2);
                           

 

                            function highlightBuildings2(objectIds){ 
                                
                               
                                residentialLayerView.view.highlightOptions.color = "blue";
                                        highlightHandle2 = officeLayerView.highlight(objectIds);

 

                            }
                          

 

        
                        });
                    })
}
buildingColor1();
buildingColor2();
0 Kudos
4 Replies
BlakeTerhune
MVP Regular Contributor

Please use the code formatting option that will improve the readability of large code blocks like this.

Code formatting ... the Community Version - Esri Community

var highlightHandle1 = null;
var highlightHandle2 = null;
var view = new SceneView({
  container: "viewDiv",
  map: webscene,
});

function buildingColor1() {
  webscene.load().then(function () {
    var officeSceneLayer = webscene.allLayers.filter(function (elem) {
      return elem.title === "office layer";
    }).items[0];
    // Highlight is set on the layerView, so we need to detect when the layerView is ready
    view.whenLayerView(officeSceneLayer).then(function (officeLayerView) {
      const query = officeLayerView.createQuery();
      officeLayerView.queryObjectIds(query).then(highlightBuildings1);
      console.log("checking1");
      function highlightBuildings1(objectIds) {
        console.log("checking2");
        officeLayerView.view.highlightOptions.color = "red";
        highlightHandle1 = officeLayerView.highlight(objectIds);
      }
    });
  })
}

function buildingColor2() {
  webscene.load().then(function () {
    var residentialSceneLayer = webscene.allLayers.filter(function (elem) {
      return elem.title === "residential layer";
    }).items[0];
    // Highlight is set on the layerView, so we need to detect when the layerView is ready
    view.whenLayerView(residentialSceneLayer).then(function (residentialLayerView) {
      const query = residentialLayerView.createQuery();
      residentialLayerView.queryObjectIds(query).then(highlightBuildings2);
      function highlightBuildings2(objectIds) {
        residentialLayerView.view.highlightOptions.color = "blue";
        highlightHandle2 = officeLayerView.highlight(objectIds);
      }
    });
  })
}

buildingColor1();
buildingColor2();
0 Kudos
abhishek_shah
New Contributor II

Okay thanks for doing it for us ... Could you figure out our problem ?

0 Kudos
BlakeTerhune
MVP Regular Contributor

It looks like the highlightOptions are set on the SceneView so changing it will affect all features highlighted. I think what you might have to do is add the features to a GraphicsLayer, each with a different symbol.

RalucaNicola1
Esri Contributor

This is correct, you can't highlight 2 features with different colors simultaneously. 

And yes, a workaround is to create a new graphic that highlights the feature. For ideas see the third style in this blog post: https://www.esri.com/arcgis-blog/products/js-api-arcgis/3d-gis/feature-selection-styles-in-web-scene... Let us know if need advice or help with this.