GeoJSON

# Sources

Các nguồn dữ liệu để thêm vào bản đồ

GeoJSONSource

Source được lưu dưới định dạng GeoJSON

Các tham số

• type (string): geojson

• data (GeoJSON): Có thể là url đến file GeoJSON hoặc object dưới dạng GeoJSON

Code Demo

Preview: GeoJSON Point

Preview: GeoJSON Line

Ví dụ

• Thêm geojson point

map.on('load', function () {
    map.addSource('source_id_name', {
        type: 'geojson',
        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
    });

    map.addLayer({
        id: 'unclustered-point',
        type: 'circle',
        source: 'source_id_name',
        filter: ['!', ['has', 'point_count']],
        paint: {
            'circle-color': '#11b4da',
            'circle-radius': 4,
            'circle-stroke-width': 1,
            'circle-stroke-color': '#fff'
        }
    });
});

• Tùy chỉnh icon hiển thị

map.on('load', function () {
    map.loadImage(
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
        function (error, image) {
            if (error) throw error;
            map.addImage('cat', image, {
                content: [16, 16, 400, 400], // place text over left half of image, avoiding the 16px border
                stretchX: [[16, 400]], // stretch everything horizontally except the 16px border
                stretchY: [[16, 400]], // stretch everything vertically except the 16px border
            });
            map.addSource('cat-image', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': [
                        {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [105.781187, 21.036902]
                            }
                        }
                    ]
                }
            });
            map.addLayer({
                'id': 'points',
                'type': 'symbol',
                'source': 'cat-image',
                'layout': {
                    'icon-image': 'cat',
                    'icon-size': 0.25
                }
            });
        }
    );
});

• Thêm GeoJSON từ các dữ liệu dạng line

map.on('load', function () {
    map.addSource('source_id_name', {
        type: 'geojson',
        // http://polygons.openstreetmap.fr/?id=49915
        // http://polygons.openstreetmap.fr/get_geojson.py?id=49915&params=0.080000-0.001000-0.001000
        // Ranh giới Việt Nam
        data: 'data/data.geojson' 
    });

     map.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'source_id_name',
        'paint': {
            'line-color': '#888',
            'line-width': 8
        }
    });
});

Trả về Map this;