Tengo un mapa que los cambios azulejos sobre la base de cuatro botones de radio. Necesito la ventana emergente que aparece cuando se pasa el ratón por un mosaico a cambiar a medida que las diferentes capas de mapa de cambio. Me he vuelto a aparecer, pero cuando me cambie capas del mapa sólo añade otra ventana emergente. He intentado utilizar el control.removeFrom(mapa), pero no parece funcionar. Creo que mi lógica puede ser la pata en algún punto. Aquí está una de las sentencias if:

if (two == true && black == true) { 
                function blkNineStyle(feature) {
                    return {
                    fillColor: getColor(feature.properties.pctBlack9000),
                    weight: 2,
                    opacity: 1,
                    color: '#666',
                    dashArray: '2',
                    fillOpacity: 0.9
                    };
                }
                                    //Tried to us this to take off the control.
                info.removeFrom(map);
                map.removeLayer(geojson);
                geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map);

                var info = L.control();

                info.onAdd = function (map) {
                    this._div = L.DomUtil.create('div', 'info');
                    this.update();
                    return this._div;
                };

                info.update = function (props) {
                    this._div.innerHTML = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
                };

                info.addTo(map);
            }

Se puede ver el (roto) mapa aquí.

InformationsquelleAutor user1410712 | 2013-03-19

3 Comentarios

  1. 3

    Tuve este mismo problema y me acaba de resolver esto.

    Tuviera que definir una variable vacía en el medio ambiente mundial (fuera de cualquier función que está utilizando). No se trata de un completo script ni nada, pero la idea general de lo que estoy describiendo es el siguiente:

        var info;  //CREATING INFO VARIABLE IN GLOBAL ENVIRONMENT
        function makeMap() {
        ..... geojsons, styles, other stuff ....
    
        //REMOVING PREVIOUS INFO BOX
        if (info != undefined) {
        info.removeFrom(map)
        }
    
        //making current layer's info box
        info = L.control();
    
        info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
        };
    
        info.update = function (props) {
        this._div.innerHTML = '<h4>Data by Zip Code</h4>' + (props ?
        '<b>Zip Code:  ' + props.id + '</b><br />Value:  ' + matchKey(props.id, meanById)
        : 'Hover over a zip code');
        };
    
        info.addTo(map);
    
        ..... other stuff again ......
    
        } //end function

    Soy muy nuevo tanto Prospecto y javascript, así que tengo que decir que no estoy seguro exactamente dónde colocar la información.removeFrom(mapa) de línea en el código que has publicado en el enlace del mapa siempre, pero estás en el camino correcto con el » info.removeFrom(mapa)’ .

    Pude resolver mi problema con la dinámica de las leyendas y la información de los cuadros de trasteo aquí: http://jsfiddle.net/opensas/TnX96/

  2. 0

    A pesar del hecho de que esta pregunta se hizo hace un año, hace poco he tenido que venir para arriba con una solución a un problema similar yo lo siento como si yo debería compartir en caso de que nadie termina aquí como lo hice yo.

    La L.control() objeto en el Prospecto no es técnicamente una capa, y esta es la razón por la que trata de añadir y quitar algunas veces no funciona de la misma manera que para las capas.

    http://leafletjs.com/reference.html#icontrol

    Como el L.control constructor requiere sólo para «crear todos los necesarios elementos de DOM para el control», el contenido HTML de la div en sí mismo puede ser actualizado y eliminados como y cuando sea necesario. Por lo tanto, para realizar una función de control de aparecer y desaparecer del mapa, y en lugar de la adición y eliminación de la L.control objeto, sólo ajustar el contenido HTML de la div contenida por ella. Un vacío div no produciría la función de control mostrado por el mapa.

    Por lo tanto el código anterior sería:

    //construct control, initialize div
    
    info = L.control();
    info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
    };
    if (two == true && black == true) { 
                function blkNineStyle(feature) {
                    return {
                    fillColor: getColor(feature.properties.pctBlack9000),
                    weight: 2,
                    opacity: 1,
                    color: '#666',
                    dashArray: '2',
                    fillOpacity: 0.9
                    };
                }
    
    //set div content to empty string; makes control disappear from map
    
                info.getContainer().innerHTML='';
    
                map.removeLayer(geojson);
                geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map);
    
    //update content of control to make the control reappear
    
                info.update = function (props) {
                    this._div.innerHTML = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
                };
    
            }
    
     //other cases...
    if (two == false && black == true) { 
    
    //delete and update control where necessary
    
        info.getContainer().innerHTML='';
    • Actualizado URL: leafletjs.com/reference-1.0.2.html#control-layers.
    • info.remove() obras. Tuve una situación similar y se comprueba la existencia de la barra if ($('.opacity_slider_control').is(':visible')) que en mi caso es parte de la clase del control deslizante de opacidad, así que en mi caso si ($(‘.opacity_slider_control’).es(‘:visible’)) { prevCurrentLayer.setOpacity(0.0) // algunos de la configuración no se restablecen con los siguientes opacitySlider.remove() // elimina cualquier opacitySlider y, a continuación, agregue uno nuevo en el siguiente paso } addOpacitySlider(currentLayer) espero que esto no sea demasiado breve
  3. 0

    Bien, por lo que he entendido desea quitar el control de forma similar a cómo lo agregó.

    En este caso folleto proporciona directa remove() método similar a addTo(map) método.

    Agregar/eliminar L. control de leaflet.js mapa

    Ejemplo-

    Cada vez que usted quiere quitar la leyenda de control utilice el siguiente código

    Crear Control-

    var legendControl = L.control({position: 'bottomleft'});
        legendControl.addTo(mymap);

    Quitar El Control-

    legendControl.remove();

    Para más detalles consulte/haga clic aquí…

    Con la esperanza de que esto le ayudará 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here