在 DRAG 上遵循 div 的 arcgis-JS 折线路径

Question

我几乎可以正常工作了；但它在拖动时不是跟随 kendo 模态，而是始终跟随鼠标指针...

因此，当前它跟随鼠标指针，模态框也是如此；但这对可用性来说太糟糕了，所以我只想继续使用并遵循标准 单击并拖动 .

的模态

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

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。

Answer 1

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

我更改的是挂接到模态的 dragstart 和 dragend，并在拖动模态时在文档上使用鼠标移动事件处理程序。我使用文档是因为事件无法通过对话框到达其背后的视图。

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

});

在 DRAG 上遵循 div 的 arcgis-JS 折线路径

arcgis-JS polyline path to follow a div on DRAG

javascript

jquery

kendo-ui

arcgis

arcgis-js-api