javascript - arcgis-JS 折线路径在 DRAG 上跟随 div

Question

我的这个几乎可以工作了；但它在拖动时不是跟随剑道模式，而是始终跟随鼠标指针...

所以，目前它正在跟随鼠标指针，模态也是如此；但这对于可用性来说太糟糕了，所以只想保留并遵循标准单击并拖动上的模式。

尝试 A.) 下面是 JavaScript，这是现场演示 CodePen 。 该线应始终与 B 点的模态一致，即它正在执行的操作；但模态框只能通过拖动来移动。

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";
       }       
     }          
   }
});

尝试 B.) 更新:我尝试按照我发现的逻辑进行操作；虽然我相信它是 arcgis 3.3.. 但仍然无法将其集成到我的 CodePen 原型(prototype)中。无论如何，我认为这就是逻辑；只是似乎无法做到正确。

   $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添加了上述尝试。

Answer 1

尝试用此代码替换 codepen 中的 JS。需要一些工作，但我认为它基本上可以满足您的要求。

我所做的更改是 Hook 到模式的dragstart和dragend，并在拖动模式时在文档上使用鼠标运动事件处理程序。我使用该文档是因为事件不会通过对话框到达其后面的 View 。

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
        };
        // These were const arrays (??)
        var coordinatesAx;
        var coordinatesAy;
        var coordinatesBx;
        var coordinatesBy;
        // Chane to true after the dialog is open and when modal starts dragging
        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;
                console.log("Dragging");
                showCoordinates(ev);
                document.addEventListener("mousemove", showCoordinates);

            }).bind("dragend", function (ev) {
                moveAlong = false;
                document.removeEventListener("mousemove", showCoordinates);
                console.log("end Dragging");
            }).bind("close", function (ev) {
                console.log("Close.  TODO clear line");
            })
        }

        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)
                }
            }
        }

});