Janela de pop-up móvel do ArcGIS Identify (Dojo)

8

Estou tentando obter uma janela pop-up que identifica um local para ser móvel. Meu código é semelhante ao exemplo da 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 não consigo encontrar nenhum lugar que me permita tornar a janela pop-up móvel (estava pensando em tentar implementar dojo.dnd.moveable).

Eu tentei, sem sucesso:

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

Alguém tem uma sugestão?

javascript arcgis-javascript-api popup dojo motoxer4533
fonte
2
Se eu fosse você, não usaria dijitos da ESRI. Eu trabalho muito com esri JS api e encontrei muitos bugs neles. E na IMO esses módulos não são muito configuráveis.
precisa
1
Anteriormente, pensei em fazer algo semelhante, mas tornar o pop-up móvel é apenas parte do problema - a janela aponta para o local que ele faz referência usando uma dessas imagens: serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/ dijit /… A menos que você queira entrar em um problema bastante
complicado

Respostas:

6

Este blog tem um excelente exemplo de como tornar a janela arrastável e ocultar a seta usando dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow

Aqui está o trecho chave do 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
fonte
3

Adicione uma div com id identityDiv ao seu código html e altere seu javascript para

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

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

makeMoveable("identifyDiv");
tchapo
fonte
0

Com base nos comentários à minha pergunta, decidi não tornar essa caixa móvel e manter o ícone Fechar para os usuários.

motoxer4533
fonte