Using Snapping Manager with ArcGIS Dynamic Map Service Layer?

Question

Using ArcGIS API for JavaScript 3.22 I am trying to add Snapping Function on adding Point to a Graphic Layer but bases on an existing ArcGISDynamicMapServiceLayer (snapping to Edges and Vertex in the ArcGISDynamicMapServiceLayer). but looks like the snapping is not functioning.

<script src="https://js.arcgis.com/3.22/"></script>
<button id="addP2P">Add Point To Points </button>
<button id="addP2L">Add Point To Lines </button>
<div id="map"></div>

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/GraphicsLayer",
    "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "esri/SnappingManager",
    "dojo/keys",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer,
    ArcGISDynamicMapServiceLayer,
    GraphicsLayer,
    Graphic,
    SimpleMarkerSymbol,
    SimpleLineSymbol,
    Color,
    SnappingManager,
    dojoKeys
  ) {
    var map = new Map("map", {
      basemap: "topo",
      center: [-88.158805, 41.786075],
      zoom: 18
    });

    var P2PLayer = new GraphicsLayer();
    var P2LLayer = new GraphicsLayer();
    map.addLayer(P2PLayer);
    map.addLayer(P2LLayer);

    var DLayer = new ArcGISDynamicMapServiceLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer');
    map.addLayer(DLayer);

    var symbolPointJFlag = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 0, 1]), 1), new Color([0, 255, 0, 1]));

    $("#addP2P").one("click", function() {
      map.on("click", addGraphic);

      function addGraphic(evt) {
        var sm = new SnappingManager({
          alwaysSnap: false,
          map: map,
          snapKey: dojoKeys.CTRL,
          tolerance: 10,
          layerInfo: [{
            layer: DLayer,
            snapToEdge: true,
            snapToVertex: true
          }]
        });
        var pgraphic = new Graphic(evt.mapPoint, symbolPointJFlag);
        P2PLayer.add(pgraphic);
      }
    });
  });

Answer 1

In my experience, SnappingManager does not seem to work with ArcGISDynamicMapServiceLayer (Maybe there's another way to do this?)

What you could do (what I did) is loop through your ArcGISDynamicMapServiceLayer/DLayer's layerInfos and retrieve all the layer IDs and Names (DLayer.layerInfos[i].name, DLayer.layerInfos[i].id)

then for each one, you can create a new FeatureLayer() object. eg. new FeatureLayer(featureLayerUrl, { id: featureLayerId, outFields: ["*"] })

for the featureLayerUrl you can use the same url used for your ArcGISDynamicMapServiceLayer but append ("/" + DLayer.layerInfos[i].id) for the featureLayerId use DLayer.layerInfos[i].name

then with each of these FeatureLayers, you can add them to your map object and to your snappmanager's layerInfos.

Answer 2

SnappingManager only works with clientside graphics, like FeatureLayer and GraphicsLayer. But not with layers like ArcGISDynamicMapServiceLayer where the server sends back an image to be displayed by the API. This is mentioned in the documentation under the constructor and setLayerInfos() method, see https://developers.arcgis.com/javascript/3/jsapi/snappingmanager-amd.html

Reference to a feature or graphics layer that will be a target snapping layer. The default option is to set all feature and graphics layers in the map to be target snapping layers.