ArcGIS Moveable Identify Popup Window (Dojo)


8

Saya mencoba untuk mendapatkan jendela sembulan yang mengidentifikasi lokasi yang dapat dipindahkan. Kode saya mirip dengan contoh 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
});

Sepertinya saya tidak dapat menemukan tempat yang memungkinkan saya membuat infowindow popup yang dapat dipindahkan itu (sedang berpikir untuk mencoba mengimplementasikan dojo.dnd.moveable).

Saya sudah mencoba, tanpa hasil:

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

Adakah yang punya saran?


2
Jika saya jadi Anda, saya tidak akan menggunakan yang dijitdibuat oleh ESRI. Saya banyak bekerja dengan esri JS api dan saya menemukan banyak bug di dalamnya. Dan IMO modul-modul itu sangat tidak dapat dikonfigurasi.
Krystian

1
Saya sebelumnya berpikir untuk melakukan hal yang serupa, tetapi membuat popup yang dapat dipindahkan hanya bagian dari masalah - jendela menunjuk ke lokasi yang dirujuknya menggunakan salah satu gambar ini: serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/ dijit /… Kecuali jika Anda ingin masuk ke masalah yang agak lengket Anda harus hidup dengan popup tidak lagi menunjuk ke lokasi yang benar
tomfumb

Jawaban:


6

Blog ini memiliki contoh yang sangat baik tentang cara membuat jendela bisa diseret dan menyembunyikan panah menggunakan dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow

Berikut cuplikan kunci javascript:

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

Tambahkan div dengan id identDiv ke kode html Anda dan ubah javascript Anda menjadi

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

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

makeMoveable("identifyDiv");

0

Berdasarkan komentar pada pertanyaan saya, saya memutuskan untuk tidak membuat kotak ini dapat dipindahkan dan menjaga ikon tutup untuk pengguna.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.