Javascript API Snapping with Many Polygons

Question

Hi, we have a requirement to allow web-based editing and snap against a polygon map service. Snapping works with graphics or feature services, but our polygons can have many vertices and there can be many polygons to snap to, which might or might not have performance issues in the browser. Does anyone have any experience with snapping against many polygons? Or, is it possible to use dynamic map service somehow for snapping? We are using Javascript API 3.13.

HenryKo2 · Answer

Thanks, there are some interesting points here.

ThomasSolow · Answer

Like I said above, I'm unsure if this is doable on an image service. My understanding is that you don't actually have the geometries in the client with the image service, just an image. If you have a feature service or a graphics layer with polygon geometries, here's how I would approach this: 1. Add an on-mouse-move event to the map. 2. When the event fires, loop through every polygon geometry in the layer (first you can filter by the map's current extent to rule out polygons not currently visible). 3. For each polygon check to see if some condition is met. If it is, break from the loop and "snap" to that polygon. Some considerations: 1. You can check for intersection with the extent like this: .geometry.extent.intersects() -> true|false. 2. You can use the geometryEngine to check if a polygon intersects a point. You might try this, but the extent check is much faster, which you may want to consider depending on how much polygons you have. Also the extent check may be better If you want a fuzzy search, which it sounds like you might. 3. You might look at geometryEngine.buffer/geodesicBuffer. You could buffer each polygon at some distance and check for the mouse point's intersection with the buffer (or the extent of the buffer). This should give a better fuzzy search. 4. Another option is the geometryEngine's nearestVertex/nearestVertices methods. You could define some distance and check for a vertex in each polygon within that distance, and snap to that polygon if a vertex is found within that distance. This is probably the best solution, but I'm unsure how well it will perform. 5. Something you'll have to consider is what you want to do if the mouse meets your condition for multiple polygons. 6. You may want to add a debounce on the search. Mouse move events trigger a lot, and you probably don't want to do a search for every event. Underscore.js has a debounce function that you can copy if needed: underscore.js 7. "Snapping" the cursor is not allowed in the browser. There is no way to move the cursor programmatically. I imagine this is for security reasons. I would recommend that you replace "snapping" with some kind of highlight to show which polygon the mouse is near.

HenryKo2 · Answer

Thanks for the reply. Yes, by "snapping" I meant the standard ArcGIS editing snapping - user moves mouse to create/edit geometries, and the mouse point snaps to the closest polygon from a layer/service.