Có thể di chuyển ArcGIS Xác định Cửa sổ Popup (Dojo)


8

Tôi đang cố gắng để có được một cửa sổ bật lên xác định vị trí có thể di chuyển. Mã của tôi tương tự như ví dụ API:

var popupOptions = {
    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 0, 0]), 2),
                new dojo.Color([255, 255, 0, 0.25]))
}

var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

map = new esri.Map("map", {
    infoWindow:popup,
    extent: initExtent
});

Tôi dường như không thể tìm thấy bất cứ nơi nào cho phép tôi làm cho cửa sổ bật lên đó có thể di chuyển được (đã nghĩ đến việc cố gắng thực hiện dojo.dnd.movizable).

Tôi đã thử, không thành công:

function makeMoveable(node){
    var dnd = new dojo.dnd.Moveable(dojo.byId(node));
}
makeMoveable(popup);

Bất cứ ai có một đề nghị?


2
Nếu tôi là bạn, tôi sẽ không sử dụng dijitESRI. Tôi làm việc rất nhiều với esi JS api và tôi đã tìm thấy rất nhiều lỗi trong đó. Và IMO những mô-đun không phải là rất cấu hình.
Kstallian

1
Trước đây tôi đã nghĩ về việc làm một cái gì đó tương tự, nhưng làm cho cửa sổ bật lên có thể di chuyển chỉ là một phần của vấn đề - cửa sổ chỉ đến vị trí mà nó tham chiếu bằng một trong những hình ảnh sau: serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/ dijit / Giảm trừ khi bạn muốn gặp vấn đề khá khó khăn, bạn sẽ phải sống với cửa sổ bật lên không còn chỉ đến vị trí chính xác
tomfumb

Câu trả lời:


6

Blog này có một ví dụ tuyệt vời về cách làm cho cửa sổ có thể kéo và ẩn mũi tên bằng cách sử dụng dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow

Đây là đoạn mã javascript chính:

require([
    'esri/arcgis/utils',
    'dojo/dnd/Moveable',
    'dojo/query',
    'dojo/on',
    'dojo/dom-class'
], function (
    arcgisUtils,
    Moveable,
    query,
    on,
    domClass
) {
    var webMapItemID = "fe0827dfea2441f5b206b0e2c37b79cd";
    arcgisUtils.createMap(webMapItemID, "map", {}).then(function(response) {
        var map = response.map;
        var handle = query(".title", map.infoWindow.domNode)[0];
        var dnd = new Moveable(map.infoWindow.domNode, {
            handle: handle
        });

        // when the infoWindow is moved, hide the arrow:
        on(dnd, 'FirstMove', function() {
            // hide pointer and outerpointer (used depending on where the pointer is shown)
            var arrowNode =  query(".outerPointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");

            var arrowNode =  query(".pointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");
        }.bind(this));
    });
});

3

Thêm một div với id nhận dạngDiv vào mã html của bạn và thay đổi javascript của bạn thành

var popup = new esri.dijit.Popup({popupOptions}, "identifyDiv");

map = new esri.Map("map", {
    infoWindow:popup,
    extent: initExtent
});

makeMoveable("identifyDiv");

0

Dựa trên ý kiến ​​cho câu hỏi của tôi, tôi quyết định không làm cho hộp này có thể di chuyển và giữ biểu tượng gần gũi cho người dùng.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.