6 votos

Leyenda con información del mapa del mundo

Estoy utilizando la API de ArcGIS 10.1 para JavaScript. Estoy mostrando una capa de servicio de mapa dinámico que contiene 8 capas y quiero mostrar la leyenda de la capa actualmente visible (sólo 1 capa es visible a la vez). La leyenda se ve bien, pero hay un pequeño problema. La leyenda contiene información incluso para el mapa del mundo, que está bajo mi capa visible, pero no quiero mostrar esta información sobre el mapa del mundo.

Fragmento de código:

var legendDijit = new esri.dijit.Legend({
        map:map,
    id: "fluLegend"
}, tsLegDiv);

¿Cómo puedo conseguir omitir la información del mapa del mundo en la leyenda?

No he encontrado ninguna respuesta en los otros temas que contienen preguntas sobre la leyenda.

Gracias g

El código después de la respuesta de Darksanta se ve así: El problema es que la leyenda se carga correctamente la primera vez que se añaden capas al mapa, pero cuando cambio la visibilidad de las capas cambiando el filtro "Año" (cada capa es visible sólo cuando se selecciona un año determinado), la leyenda queda como estaba y no refleja la nueva capa visible. Sé que el ejemplo de Darksanta (de ArcGIS) está bien, pero debe haber algo raro en mi código, que hace que la leyenda no funcione correctamente. Tal vez el código es completamente incorrecto. No estoy familiarizado con js o arcgis, es mi primera experiencia en js + arcgis.

<script language="Javascript">
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("esri.map");
    dojo.require("esri.dijit.TimeSlider");
    dojo.require("esri.tasks.query");
    dojo.require("esri.layers.FeatureLayer");
    dojo.require("esri.dijit.Legend");

    var map;
    var fluLayers, featureLayer;
    var timeExtent;
    var timeSlider;
    var queryTask, query;//, featureSet;
    var infoTemplate;

    //konstanty
    var defaultLayerIndex = 7;
    var defaultYear = 2006;
    var defaultAgeStart = 6;
    var defaultRangeAge = 8;

    function init() {
        map = new esri.Map("map", {
        basemap: "streets",
        center: [19.63, 48.60],
        zoom: 8
        });

        fluLayers = new esri.layers.ArcGISDynamicMapServiceLayer("<map service address not accessible from outside>");
        fluLayers.setMinScale(0);
        fluLayers.maxRecordCount = 100;
        fluLayers.setOpacity(0.5);

        fluLayers.setVisibleLayers([defaultLayerIndex]);
        setLayerDefinitions(defaultAgeStart, defaultRangeAge);
        map.addLayers([fluLayers]);

        dojo.connect(map, "onLayersAddResult", updateSlider);
        dojo.connect(map,'onLayersAddResult',function(results){
                    var layerInfo = dojo.map(results, function(layer,index){
                                return {layer:layer.layer,title:layer.layer.name};
                    });
                    if(layerInfo.length > 0){
                                var legendDijit = new esri.dijit.Legend({
                                            map:map,
                                            layerInfos:layerInfo
                                },"legendDiv");
                                legendDijit.startup();
                    }
        });
    }

    //Funkcia, ktora nastavi definiciu aktualne viditelnej vrstvy.
    function setLayerDefinitions(ageStart, ageRange){
        var layerDefinitions = [];
        var layerDefString;
        var visibleLayerIndex = getVisibleLayerIndexByYear();

        var startDate = getStartDateByYear();
        var endDate = getEndDateByYear();

        if (ageRange === 0)
            layerDefString = "Chripka.STARTAGE = " + ageStart + " AND Chripka.RANGEAGE IS NULL AND Chripka.PERIODSTART >= date \'" + startDate + "\' AND Chripka.PERIODSTART < date \'" + endDate + "\'";
        else
            layerDefString = "Chripka.STARTAGE = " + ageStart + " AND Chripka.RANGEAGE = " + ageRange + " AND Chripka.PERIODSTART >= date \'" + startDate + "\' AND Chripka.PERIODSTART < date \'" + endDate + "\'";

        layerDefinitions[visibleLayerIndex] = layerDefString;
        fluLayers.setLayerDefinitions(layerDefinitions);
    }

    //Funkcia, ktora aktualizuje timeSlider v pripade nejakej zmeny.
    function updateSlider() {
        if (dijit.byId('timeSlider')) {
            dijit.byId('timeSlider').destroy();
        }

        var tsDiv = dojo.create("div", null, dojo.byId('timeSliderDiv'));

        timeSlider = new esri.dijit.TimeSlider({
            style: "width: 1000px;",
            id: 'timeSlider'
        }, tsDiv);

        map.setTimeSlider(timeSlider);
        timeSlider.setThumbCount(2);

        if (!timeExtent)
            setTimeExtentByYear();
        timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, 'esriTimeUnitsWeeks');
        timeSlider.setThumbIndexes([0, 1]);
        timeSlider.setThumbMovingRate(4000);
        timeSlider.startup();
        dojo.byId("daterange").innerHTML = "<i>" + timeSlider.timeStops[0].toLocaleDateString() + " - " + timeSlider.timeStops[1].toLocaleDateString() + "<\/i>";

        //add labels for every other time stop
        var labels = dojo.map(timeSlider.timeStops, function(timeStop, i) { 
            if ( i % 2 === 0 ) {
                return i + 1;
            } else {
                return "";
            }
        });

        timeSlider.setLabels(labels);

        dojo.connect(timeSlider, "onTimeExtentChange", function(timeExtent) {
            var startValString = timeExtent.startTime.toLocaleDateString();
            var endValString = timeExtent.endTime.toLocaleDateString();

            dojo.byId("daterange").innerHTML = "<i>" + startValString + " - " + endValString + "<\/i>";
        });
    }

    function getStartDateBySlider(){
        var startDate;

        if (timeSlider){
            if (timeSlider.getCurrentTimeExtent()){
                var tex = timeSlider.getCurrentTimeExtent().startTime;
                startDate = (tex.getUTCMonth() + 1).toString() + "/" + tex.getUTCDate().toString() + "/" + tex.getUTCFullYear().toString();
            }
        }

        if (!startDate)
            startDate = getStartDateByYearExt("2006");

        return startDate;
    }

    function getEndDateBySlider(){
        var endDate;

        if (timeSlider){
            if (timeSlider.getCurrentTimeExtent()){
                var tex = timeSlider.getCurrentTimeExtent().endTime;
                endDate = (tex.getUTCMonth() + 1).toString() + "/" + tex.getUTCDate().toString() + "/" + tex.getUTCFullYear().toString();
            }
        }

        if (!endDate)
            endDate = getEndDateByYearExt("2006");

        return endDate;
    }

    //Funkcia, ktora je vykonana potom, ako dojde ku zmene roku.
    function yearChange() {
        //if the slider is currently playing stop and reset it
        if (timeSlider.playing) {
            timeSlider.pause();
        }

        setTimeExtentByYear();

        var ageStart = getSelectedStartAge();
        var rangeAge = getSelectedRangeAge();
        onUpdateLayerDefinitions(ageStart, rangeAge);
    }

    //Funkcia, ktora nastavi timeExtent podla zvoleneho roku.
    function setTimeExtentByYear(){
        var year = dojo.byId('year').value;

        var startDate, endDate;
        startDate = getStartDateByYearExt(year);
        endDate = getEndDateByYearExt(year);

        timeExtent = new esri.TimeExtent();
        timeExtent.startTime = new Date(startDate + " UTC");
        timeExtent.endTime = new Date(endDate + " UTC");

        dojo.byId("timeSliderYear").innerHTML = year;
        dojo.byId("daterangeYear").innerHTML = "<strong>" + timeExtent.startTime.toLocaleDateString() + " - " + timeExtent.endTime.toLocaleDateString() + "<\/strong>";
        dojo.byId("ageRange").innerHTML = getSelectedAgeRangeString();
    }

    //Funkcia, ktora vrati zaciatocny datum pre zvoleny rok.
    function getStartDateByYear(){
        var year = dojo.byId('year').value;
        return getStartDateByYearExt(year);
    }

    //Funkcia, ktora vrati koncovy datum pre zvoleny rok.
    function getEndDateByYear(){
        var year = dojo.byId('year').value;
        return getEndDateByYearExt(year);
    }

    //Funkcia, ktora vrati zaciatocny datum pre zvoleny rok, ktory pride ako stringovy parameter.
    function getStartDateByYearExt(year){
        return "09/29/2006"; //SIMPLE
    }

    //Funkcia, ktora vrati koncovy datum pre zvoleny rok, ktory pride ako stringovy parameter.
    function getEndDateByYearExt(year){
        return "12/29/2006"; //SIMPLE
    }

    //Funkcia, ktora vrati zvoleny zaciatocny vek.
    function getSelectedStartAge(){
        return defaultAgeStart; //SIMPLE
    }

    //Funkcia, ktora vrati ku zvolenemu zaciatocnemu veku jeho rozsah.
    function getSelectedRangeAge(){
        return defaultRangeAge; //SIMPLE
    }

    //Funkcia, ktora vrati zvoleny vekovy rozsah ako retazec.
    function getSelectedAgeRangeString(){
        var radios = dojo.query(".list_item");

        for (var i=0, il = radios.length; i < il; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }

        return "";
    }

    //Funkcia, ktora aktualizuje definiciu aktualne viditelnej vrstvy a spravi vsetko ostatne spojene s touto aktualizaciou vrstvy.
    function onUpdateLayerDefinitions(ageStart, ageRange){
        //default je vekove rozpatie 6-8
        if (typeof ageStart === 'undefined')
            ageStart = defaultAgeStart;

        if (typeof ageRange === 'undefined')
            ageRange = defaultRangeAge;

        var visibleLayerIndex = getVisibleLayerIndexByYear();
        fluLayers.setVisibleLayers([visibleLayerIndex]);

        setLayerDefinitions(ageStart, ageRange);

        updateSlider();
    }

    //Funkcia, ktora vrati index viditelnej vrstvy, tzn. zavisi to od zvoleneho roku.
    function getVisibleLayerIndexByYear(){
            return 6; //SIMPLE
        }
    }

    //Funkcia, ktora je vykonana potom, ako dojde ku zmene filtracneho kriteria.
    function filterChange() {
        //if the slider is currently playing stop and reset it
        if (timeSlider.playing) {
            timeSlider.pause();
        }

        setTimeExtentByYear();

        var ageStart = getSelectedStartAge();
        var rangeAge = getSelectedRangeAge();
        onUpdateLayerDefinitions(ageStart, rangeAge);
    }

    dojo.ready(init);

</script>

5voto

Yash Desai Puntos 151

Para omitir la Leyenda, tiene que establecer el parámetro Legend::LayerInfos qué LayerInfo quiere mostrar. Como abajo,

//add the legend
dojo.connect(map,'onLayersAddResult',function(results){
  var layerInfo = dojo.map(results, function(layer,index){
    return {layer:layer.layer,title:layer.layer.name};
  });
  if(layerInfo.length > 0){
    var legendDijit = new esri.dijit.Legend({
      map:map,
      layerInfos:layerInfo
    },"legendDiv");
    legendDijit.startup();
  }
});

map.addLayers([waterbodies,rivers]);

Este código es de la muestra de ESRI. http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/widget_legend.html

Este ejemplo muestra sólo dos capas y no muestra la capa del mapa base.

EDITADO:
Si está añadiendo DynamicMapServeLayer en lugar de FeatureLayer y quiere controlar la visibilidad de cada capa dentro del MapService, necesita actualizar LayerInfo con el parámetro hideLayers.

//show only index of 0 Layer
//layer is ArcGISDynamicMapServiceLayer object
layer.setVisibleLayers([0]);
// get legend dijit
var legendDijit = dijit.byId("legendDiv");

var visibleLayers = layer.visibleLayers;
var layerInfos = layer.layerInfos;

//create hideLayers array from layerInfos which layers are not visible
var hideLayers = [];
for (var i = 0; i < layerInfos.length; i ++) {

    var layerInfo = layerInfos[i];
    if(visibleLayers.indexOf(layerInfo.id) == -1){

        hideLayers.push(layerInfo.id)
    }
}

//refresh legend dijit with hideLayers
legendDijit.refresh([{layer:layer, hideLayers:hideLayers}]);

0voto

Cornholio Puntos 246

Este es el código final:

        function init() {
            //some code here

            dojo.connect(map, "onLayersAddResult", updateSlider);
            dojo.connect(map, "onLayersAddResult", initLegend);
        }

        //Inicializacia legendy po starte.
        function initLegend(results){
            var layerInfo = dojo.map(results, function(layer, index){
                return {layer:layer.layer, title:layer.layer.name};
            });

            if(layerInfo.length > 0){
                legendDijit = new esri.dijit.Legend({
                    map:map,
                    layerInfos:layerInfo
                },"legendDiv");

                legendDijit.startup();
            }
        }

        //Aktualizacia legendy, ak dojde ku nejakej zmene vo vrstvach (viditelnost vrstiev).
        function updateLegend(){
            var visibleLayers = fluLayers.visibleLayers;
            var layerInfos = fluLayers.layerInfos;

            //create hideLayers array from layerInfos which layers are not visible
            var hideLayers = [];

            for (var i = 0; i < layerInfos.length; i ++) {
                var layerInfo = layerInfos[i];

                if(visibleLayers.indexOf(layerInfo.id) == -1){
                    hideLayers.push(layerInfo.id)
                }
            }

            //refresh legend dijit with hideLayers
            legendDijit.refresh([{layer:fluLayers, hideLayers:hideLayers}]);
        }

        function filterChange() {
            //some code here...

            updateLegend();
        }

En la función Init está la creación del dijit de la leyenda (initLegend) y cuando cambio las capas visibles, la función updateLegend actualiza la leyenda según la capa visible. Gracias a Darksanta.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X