HitTest with MapImageLayer not returning sublayers

Question

I'm new in ArcGIS, and what am I doing is viewing MapImageLayer with all of sublayers. But, when clicking on point and running hitTest it returns 0 results.

Below the code:

<script>
    require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/widgets/Search",
        "esri/tasks/Locator",
        "esri/layers/GraphicsLayer",
        "esri/layers/FeatureLayer",
        "esri/identity/Credential",
        "esri/geometry",
        "esri/layers/MapImageLayer"
    ], function (esriConfig, Map, MapView, Graphic, Search, Locator, GraphicsLayer, FeatureLayer, Credential, Geometry, MapImageLayer) {
        
        var lat = 0;
        var lon = 0;

        var map = new Map({
            
        });

        //try to add layer
        const parksLayer = new MapImageLayer({
            url: "",
            sublayers: [{
                id: 0,
                visible: true,
                outFields:["*"]
              }]
        });

        const topo = new MapImageLayer({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
        });

        map.add(topo);
        map.add(parksLayer);
        
        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [lon, lat],
            scale: 24000
        });

        view.on("click", function (evt) {
            debugger;
            console.log("latitude  = " + evt.mapPoint.latitude);
            console.log("longitude = " + evt.mapPoint.longitude);


            // Create a graphic and add the geometry and symbol to it
            var graphic = new Graphic({
                geometry: {
                    type: "point",
                    latitude: evt.mapPoint.latitude,
                    longitude: evt.mapPoint.longitude,
                    spatialReference: view.spatialReference,
                },
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleFillSymbol
                    color: [255, 10, 10],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 2,
                    },
                },
            });
            view.graphics.removeAll();
            view.graphics.add(graphic);

            //trying to get layer info
            view.hitTest(evt).then(function (response) {
                debugger;
                console.log("layers count " + response?.results?.length);
            });
        });
    });
</script>

Answer 1

hitTest does not support MapImageLayer type as you can see in the documentation.

hitTest documentation

However, someone succeeded in changing the MapImageLayer type layer to FeatureLayer type.

Codepen link

Finally, as the person who found the solution said, this is not an efficient method. Since MapImageLayer is already created on the server side and sent to the front, it will be more efficient to solve the situation you want to improve in different ways.

Solution thread