arcgis-JS折线端点在DRAG上遵循剑道模态

Question

bounty到期在7天内。该问题的答案有资格获得+ 500声望赏金。Captain Ron希望引起更多关注对此问题。

我几乎可以正常工作；但是它并非始终遵循拖动时的kendo模式，而是始终遵循鼠标指针...

因此，当前它跟随鼠标指针，而模态跟随；但这对可用性来说太可怕了，所以只想坚持并遵循标准click and drag。]]上的模式即可。

attatt

A。]下面是JavaScript，这是现场演示CodePen。 该行应始终与B点的模态相同，它正在执行；但模态只能在drag。上移动

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/support/webMercatorUtils",
      "dojo/dom",
    ], 

  function init (Map, MapView, Graphic, GraphicsLayer, webMercatorUtils, dom) {
    var map = new Map({
      basemap: "topo-vector"     
    });
    var view = new MapView({
      container: "viewDiv",             
      map: map,
      center: [-80.96135253906438, 35.9411934679851],
      zoom: 3
    });

    var graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);  

    var simpleLineSymbol = {
       type: "simple-line",
       color: [13,121,190, .9],
       style: "short-dash",
       width: 3
     };
    var coordinatesAx;
    var coordinatesAy;  
    var coordinatesBx ;
    var coordinatesBy;

    var moveAlong = false;
    var windowElem;

    view.when(function(){
        view.on("pointer-move", showCoordinates);
    });

    // NEW: Stop/start moving the modal along with the pointer by map click
    view.when(function(){
        view.on("click", function () { moveAlong = !moveAlong;});      
    });

    coordinatesAx = -80.96135253906438;
    coordinatesAy = 35.9411934679851;

    document.getElementById("modal").onclick = function fun() {        
        windowElem = document.querySelector('.k-window');        
        moveAlong = true;       
        // Bind Kendo dialog dragstart to movement
        $("#dialog").data('kendoWindow').bind("dragstart", function (ev) {                   
            //graphicsLayer.removeAll();  
            moveAlong = true;
            showCoordinates(ev);            
        })         
    }

   function showCoordinates(evt) {      
      var point = view.toMap({x: evt.x, y: evt.y});
      var mp = webMercatorUtils.webMercatorToGeographic(point);
      dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);

     coordinatesBx = mp.x.toFixed(3);
     coordinatesBy = mp.y.toFixed(3);

     var polyline = {
       type: "polyline",
       paths: [
         [coordinatesAx, coordinatesAy], 
         [coordinatesBx, coordinatesBy]
       ]
     };
     var polylineGraphic = new Graphic({
       geometry: polyline,
       symbol: simpleLineSymbol
     })

     if (moveAlong) {       
       if (graphicsLayer.graphics.items.length < 0) {
            graphicsLayer.add(polylineGraphic)
       } else {
            // Recreate the line and reposition the modal
            graphicsLayer.removeAll();
            graphicsLayer.add(polylineGraphic)         
            windowElem.style.top = evt.y + 0 + "px";
            windowElem.style.left = evt.x + 0 + "px";
       }       
     }          
   }
});
Attempt

B。） Update：我尝试使用发现的这种逻辑；尽管我认为它是arcgis 3.3 ..，但仍然无法将其集成到我的CodePen原型中。无论如何，我认为这是逻辑。只是似乎无法正确处理。

   $profileWindow = $("#" + elem).parents(".outter-div-wrapper");
        profileWindowOffset = $profileWindow.offset();
        profileWindowWidth = $profileWindow.outerWidth();
        profileWindowHeight = $profileWindow.outerHeight();

        screenPointTopLeft = new Point(profileWindowOffset.left, profileWindowOffset.top, app.ui.mapview.map.spatialReference);
        screenPointTopRight = new Point(profileWindowOffset.left + profileWindowWidth, profileWindowOffset.top, app.ui.mapview.map.spatialReference);
        screenPointBottomLeft = new Point(profileWindowOffset.left, profileWindowOffset.top + profileWindowHeight, app.ui.mapview.map.spatialReference);
        screenPointBottomRight = new Point(profileWindowOffset.left + profileWindowWidth, profileWindowOffset.top + profileWindowHeight, app.ui.mapview.map.spatialReference);

        arrayOfCorners.push(screenPointTopLeft);
        arrayOfCorners.push(screenPointTopRight);
        arrayOfCorners.push(screenPointBottomLeft);
        arrayOfCorners.push(screenPointBottomRight);
        //convert to screenpoint
        graphicsScreenPoint = esri.geometry.toScreenPoint(app.ui.mapview.map.extent, app.ui.mapview.map.width, app.ui.mapview.map.height, self.mapPoint_);

        //find closest Point
        profileWindowScreenPoint = this.findClosest(arrayOfCorners, graphicsScreenPoint);
        //convert from screen point to map point
        profileWindowClosestMapPoint = app.ui.mapview.map.toMap(profileWindowScreenPoint);

        mapProfileWindowPoint.push(profileWindowClosestMapPoint.x);
        mapProfileWindowPoint.push(profileWindowClosestMapPoint.y);
这是CodePen，其中已添加上述尝试。

我几乎可以正常工作；但是它不是一直拖动时遵循kendo模态，而是始终跟随鼠标指针...因此，当前，它始终跟随鼠标指针，所以...

Answer 1

我不确定100％是否是您想要的，因为当鼠标按下并拖动时整个地图都会滚动，当然，这会使整体体验变差。您可以尝试以下方法：