nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

mapview.hitTest doesn't return results if opacity is set

JackFairfield

Why doesn't the mapview.hitTest method return any results?

Consider the simple example below:

If you modify this sample:

Access features with pointer events | ArcGIS API for JavaScript 4.5

and add the opacity property to the feature layer like this

...
var layer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
opacity: .4,
outFields: ["*"]
});
...

The hit test response will not contain and values in the results array.

Here is a jsbin link showing what I am talking about:

JS Bin - Collaborative JavaScript Debugging

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

DavidColey

Sorry about that, yes of course. For some reason I was thinking hightlightSymbol

JackFairfield

You are referencing something unrelated. There is a hitTest method in both MapViews and SceneViews. The sample should work in 2d and 3d.

MapView | API Reference | ArcGIS API for JavaScript 4.6

DavidColey

Regardless that the API Reference

Popup | API Reference | ArcGIS API for JavaScript 4.6

still says only works in 3d?

JackFairfield

Just to confirm. This is resolved when using the 4.6 version of the api.

ThomasSolow

Another workaround that seems to work is setting the layer's opacity to 1.0 but using a renderer to specify a symbol with opacity less than 1.0. This doesn't seem to interfere with hitTest: https://codepen.io/solowt/pen/PJJLrw?editors=1000#0

I reported the issue and I'll post here if I learn when it's going to be fixed.

JackFairfield

Thanks for the work around. This doesn't seem to be fully working either unfortunately though. Try clicking the biggest bubble in the example on the bottom right side. It doesn't log any results. Is there a place where I can track a bug like this and watch for fixes?

ThomasSolow

I'm not sure.

You could use something like this for the time being:

<SPAN class="comment token">// evt: ClickEvent, view: MapView</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">getFeatures</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">,</SPAN> view<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> pxRatio <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">/</SPAN> view<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">// number of pixels to check in</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pixelBuffer <SPAN class="operator token">=</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; halfExtent <SPAN class="operator token">=</SPAN> pxRatio <SPAN class="operator token">*</SPAN> pixelBuffer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clickExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmin<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">-</SPAN> halfExtent<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xmax<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">+</SPAN> halfExtent<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ymin<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">-</SPAN> halfExtent<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ymax<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">+</SPAN> halfExtent<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spatialReference<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>spatialReference
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp; <SPAN class="keyword token">let</SPAN> queries <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>layerViews<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>lv <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">let</SPAN> q <SPAN class="operator token">=</SPAN> lv<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; q<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> clickExtent<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; q<SPAN class="punctuation token">.</SPAN>geometryType <SPAN class="operator token">=</SPAN> <SPAN class="string token">"esriGeometryEnvelope"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; q<SPAN class="punctuation token">.</SPAN>outFields <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; q<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> lv<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>q<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toArray</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp; <SPAN class="keyword token">return</SPAN> Promise<SPAN class="punctuation token">.</SPAN><SPAN class="token function">all</SPAN><SPAN class="punctuation token">(</SPAN>queries<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>results <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>concat<SPAN class="punctuation token">.</SPAN><SPAN class="token function">apply</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> results<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

example: JS Bin - Collaborative JavaScript Debugging

This won't work as well as hitTest. If you rely on this, it may be better to stick with 4.4 for the time being.

JackFairfield

What can I expect for a bug fix like this? Do I have to wait for 4.6 for a fix?

ThomasSolow

Yeah, looks like a bug to me. Seems that anything less than 1.0 opacity doesn't work with hitTest in a MapView.

RobertScheitlin__GISP

Jack,

that is definitely a bug because when you revert back to 4.4 it works.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.