Does the sample here Get started with popups | ArcGIS API for JavaScript 4.2 work in SceneView? Can I capture coordinates in a SceneView? Can they be captured with mouse-move or mouse-drag events?
David,
It seems that there is a timing issue when using this sample with a SceneView. Adding a timeout to 50 milliseconds works fine:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Get started <SPAN class="keyword token">with</SPAN> popups <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.2</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #viewDiv <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #instruction <SPAN class="punctuation token">{</SPAN> z<SPAN class="operator token">-</SPAN>index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">99</SPAN><SPAN class="punctuation token">;</SPAN> position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> top<SPAN class="punctuation token">:</SPAN> 15px<SPAN class="punctuation token">;</SPAN> left<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN> margin<SPAN class="operator token">-</SPAN>left<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN>175px<SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> 350px<SPAN class="punctuation token">;</SPAN> background<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">25</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">25</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">25</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.8</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> color<SPAN class="punctuation token">:</SPAN> white<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.2%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.2/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.2%2F" target="_blank">https://js.arcgis.com/4.2/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/tasks/Locator"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/SceneView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> Locator<SPAN class="punctuation token">,</SPAN> Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> SceneView <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Set up a locator task using the world geocoding service</SPAN> <SPAN class="keyword token">var</SPAN> locatorTask <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Locator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fgeocode.arcgis.com%2Farcgis%2Frest%2Fservices%2FWorld%2FGeocodeServer" target="_blank">https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer</A><SPAN>"</SPAN></SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets-navigation-vector"</SPAN><SPAN class="punctuation token">,</SPAN> ground<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"world-elevation"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SceneView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">116.3031</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">43.6088</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/******************************************************************* * This click event sets generic content on the popup not tied to * a layer, graphic, or popupTemplate. The location of the point is * used as input to a reverse geocode method and the resulting * address is printed to the popup content. *******************************************************************/</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Get the coordinates of the click on the view</SPAN> <SPAN class="keyword token">var</SPAN> lat <SPAN class="operator token">=</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">round</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="operator token">*</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> lon <SPAN class="operator token">=</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">round</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>longitude <SPAN class="operator token">*</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Set the popup's title to the coordinates of the location</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Reverse geocode: ["</SPAN> <SPAN class="operator token">+</SPAN> lon <SPAN class="operator token">+</SPAN> <SPAN class="string token">", "</SPAN> <SPAN class="operator token">+</SPAN> lat <SPAN class="operator token">+</SPAN> <SPAN class="string token">"]"</SPAN><SPAN class="punctuation token">,</SPAN> location<SPAN class="punctuation token">:</SPAN> event<SPAN class="punctuation token">.</SPAN>mapPoint <SPAN class="comment token">// Set the location of the popup to the clicked location</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">50</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Display the popup</SPAN> <SPAN class="comment token">// Execute a reverse geocode using the clicked location</SPAN> locatorTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">locationToAddress</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// If an address is successfully found, print it to the popup's content</SPAN> <SPAN class="keyword token">var</SPAN> address <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>address<SPAN class="punctuation token">.</SPAN>Match_addr<SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>content <SPAN class="operator token">=</SPAN> address<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">otherwise</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// If the promise fails and no result is found, print a generic message</SPAN> <SPAN class="comment token">// to the popup's content</SPAN> view<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN>content <SPAN class="operator token">=</SPAN> <SPAN class="string token">"No address was found for this location"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"instruction"</SPAN><SPAN class="operator token">></SPAN>Click any location on the map to see its street address<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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></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><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></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>
Robert, yep, that did it. Thanks so much! I did also see your setTimeout solution for another post in using view.goTo. Looks like a common theme here in use of the 3D SceneView.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.