es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Acerca del mensaje “Ya existe una fuente con este ID” que aparece en Mapbox.

25 Jul, 2023 Programación

Quiero guardar múltiples información de latitud y longitud recuperada de la base de datos en una sola capa de símbolos usando un bucle for.
Sin embargo, obtengo el error “Ya existe una fuente con esta ID”.
No sé cómo resolver este problema. Por favor, avíseme cómo resolverlo.

Aquí está el código fuente.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mostrar mapa</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }

<h1>map { position: absolute; top: 0; bottom: 0; width: 100%; }</h1>

<p></style>
</head>
<body>
<div id="map"></div>
<script>
    var lat=[38.943951,38.909664,38.914581];
    var log=-[-77.052477,-77.043444,-77.031706];</p>

<pre><code>mapboxgl.accessToken = 'miid';
    const map = new mapboxgl.Map({
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v11', 
    center: [136.447164, 35.483184],
    zoom: 9 // zoom inicial
    });
    map.on('load', () => {
        for(var i=0;i<3;i++){
            map.addSource('places', {
            // Este GeoJSON contiene características que incluyen una propiedad "icono".
            // El valor de la propiedad "icono" corresponde a una imagen en el sprite del estilo de Mapbox Streets.
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': [
                    {
                        'type': 'Feature',
                        'properties': {
                        'description':
                            '<p>テスト</p>',
                            'icono': 'theatre-15'
                    },
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [log[i], lat[i]]
                            }
                        }
                    ]
                }
                });
        }

    map.addLayer({
        'id': 'places',
        'type': 'symbol',
        'source': 'places',
        'layout': {
        'icon-image': '{icono}',
        'icon-allow-overlap': true
    }
    });
});
</code></pre>

<p></script></p>

<p></body>
</html></p>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error “Ya existe una fuente con esta ID” está ocurriendo porque el método map.addSource() se está llamando varias veces con la misma ID de fuente ("places"). Para resolver este problema, puedes modificar tu código para que el método map.addSource() solo se llame una vez con un array de elementos que contengan toda la información de latitud y longitud.

    Aquí tienes una versión actualizada de tu código:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mostrar mapa</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
    var lat=[38.943951,38.909664,38.914581];
    var log=-[-77.052477,-77.043444,-77.031706];

    mapboxgl.accessToken = 'myid';
        const map = new mapboxgl.Map({
        container: 'map', 
        style: 'mapbox://styles/mapbox/streets-v11', 
        center: [136.447164, 35.483184],
        zoom: 9 // zoom inicial
        });
        map.on('load', () => {
            var features = [];
            for(var i=0;i<3;i++){
                features.push({
                            'type': 'Feature',
                            'properties': {
                            'description':
                                '<p>テスト</p>',
                                'icon': 'theatre-15'
                        },
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [log[i], lat[i]]
                        }
                    });
            }
            map.addSource('places', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': features
                    }
            });

        map.addLayer({
            'id': 'places',
            'type': 'symbol',
            'source': 'places',
            'layout': {
            'icon-image': '{icon}',
            'icon-allow-overlap': true
        }
        });
    });
</script>

</body>
</html>

    En esta versión actualizada de tu código, creamos un array vacío llamado features antes del bucle for. Dentro del bucle for, agregamos cada objeto de característica al array features. Finalmente, llamamos al método map.addSource() con el array features como parámetro de data.

Comments are closed.