Ventana emergente identificable de ArcGIS movible (Dojo)

8

Estoy tratando de obtener una ventana emergente que identifique una ubicación que se pueda mover. Mi código es similar al ejemplo de 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
});

Parece que no puedo encontrar ningún lugar que me permita hacer que esa ventana de información emergente se pueda mover (estaba pensando en intentar implementar dojo.dnd.moveable).

He intentado, sin éxito:

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

Alguien tiene una sugerencia?

— motoxer4533
fuente

2

Si yo fuera tú, no usaría dijitlos hechos por ESRI. Trabajo mucho con esri JS api y he encontrado muchos errores en ellos. E IMO esos módulos no son muy configurables.

— Krystian

1

Anteriormente pensé en hacer algo similar, pero hacer que la ventana emergente sea móvil es solo una parte del problema: la ventana apunta a la ubicación a la que hace referencia usando una de estas imágenes: serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/ dijit / ... a menos que usted desea conseguir en un problema bastante pegajosa que tendrá que vivir con el emergente ya no apunta a la ubicación correcta

— tomfumb

6

Este blog tiene un excelente ejemplo de cómo hacer que la ventana se pueda arrastrar y ocultar la flecha usando dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow

Aquí está el fragmento clave de 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));
    });
});

— Chris
fuente

3

Agregue un div con id identificadorDiv a su código html y cambie su javascript para que sea

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

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

makeMoveable("identifyDiv");

— tchapo
fuente

0

En base a los comentarios a mi pregunta, decidí no hacer que este cuadro se pueda mover y mantener el icono de cierre para los usuarios.

— motoxer4533
fuente