Cách thiết lập Flask đọc files Bản đồ MBTiles

2024-10-15 09:25:12 Flask WebDev 60 lượt xem 0 bình luận

Đầu tiên hãy thiết lập môi trường ảo cho Python

```
python -m venv env
```
```
env\Scripts\activate
```

Sử dụng Flask để phục vụ tiles từ file MBTiles. Dưới đây là cách thực hiện:

### Bước 1: Cài đặt Flask

Cài đặt Flask nếu bạn chưa có:

```bash
pip install Flask
```

### Bước 2: Tạo server Flask

Tạo một file `server.py`:

```python
import sqlite3
from flask import Flask, send_file, abort
from io import BytesIO

app = Flask(__name__)

def get_tile(z, x, y):
    conn = sqlite3.connect('path/to/yourfile.mbtiles')
    cursor = conn.cursor()

cursor.execute(
        "SELECT tile_data FROM tiles WHERE zoom_level = ? AND tile_column = ? AND tile_row = ?",
        (z, x, (2**z - 1) - y)  # Lưu ý rằng tile_row cần phải được đảo ngược
    )
    tile = cursor.fetchone()
    conn.close()

return tile[0] if tile else None

@app.route('/tiles/<int:z>/<int:x>/<int:y>.png')
def serve_tile(z, x, y):
    tile_data = get_tile(z, x, y)
    if tile_data is None:
        abort(404)
    
    return send_file(BytesIO(tile_data), mimetype='image/png')

if __name__ == '__main__':
    app.run(debug=True, port=3000)
```

Lưu ý: ```path/to/yourfile.mbtiles``` là đường dẫn đến file MBTiles của bạn

### Bước 3: Chạy ứng dụng

Chạy server Flask phục vụ ở cổng 3000:

```bash
python server.py
```

### Bước 4: Tạo bản đồ với Leaflet

Dưới đây là mã HTML để hiển thị tile layer từ MBTiles:

Tạo file index.html

```html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet MBTiles Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Đặt tọa độ và mức zoom ban đầu
        const latitude = 10.8231;  // Thay bằng vĩ độ của bạn
        const longitude = 106.6297; // Thay bằng kinh độ của bạn
        const zoomLevel = 12;       // Thay bằng mức zoom mong muốn

const map = L.map('map').setView([latitude, longitude], zoomLevel);

// Thêm bản đồ nền từ OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

// Thêm tile layer từ server MBTiles với độ mờ
        L.tileLayer('http://localhost:3000/tiles/{z}/{x}/{y}.png', {
            maxZoom: 18,
            minZoom: 0,
            attribution: 'Tiles © <a href="https://www.mapbox.com/">Mapbox</a>',
            opacity: 0.6 // Đặt độ mờ (0.0 - 1.0)
        }).addTo(map);
    </script>
</body>
</html>
```

### Bước 5: Chạy Dịch vụ Web

Chạy dịch vụ web ảo từ Python Server với cổng 8080:

```bash
python -m http.server 8080
```

### Thành quả

Khi bạn mở file HTML trong trình duyệt http://localhost:8080/ , bạn sẽ thấy tiles từ file MBTiles được phục vụ bởi ứng dụng Django, hiển thị trên bản đồ.

Tag: Python

- Tổng hợp và hướng dẫn về System Admin,
Server, Cloud, Docker, Monitor.
- Hướng dẫn lập trình Backend, Website.
- Hướng dẫn lập trình App Android & IOS.
- Hướng dẫn lập trình Games.
- Học từ vựng và luyện kỷ năng ngoại ngữ.