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

2024-10-15 08:52:41 Django 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 Django để phục vụ tiles từ file MBTiles. Dưới đây là cách thực hiện:

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

Nếu bạn chưa cài đặt Django, bạn có thể làm như sau:

```bash
pip install Django
```

### Bước 2: Tạo một dự án Django mới

Tạo một dự án Django mới:

```bash
django-admin startproject myproject
cd myproject
```

### Bước 3: Tạo một ứng dụng mới

Tạo một ứng dụng trong dự án của bạn:

```bash
python manage.py startapp tiles
```

### Bước 4: Cấu hình URL và views

Trong file `myproject/urls.py`, thêm ứng dụng `tiles` vào đường dẫn URL:

```python
from django.contrib import admin
from django.urls import path
from tiles import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('tiles/<int:z>/<int:x>/<int:y>.png', views.get_tile),
]
```

### Bước 5: Tạo view để lấy tile

Trong file `tiles/views.py`, bạn có thể viết view để phục vụ tiles từ MBTiles:

```python
import sqlite3
from django.http import HttpResponse, Http404
from io import BytesIO

def get_tile(request, z, x, y):
    # Đường dẫn đến file MBTiles
    mbtiles_path = 'path/to/yourfile.mbtiles'
    
    conn = sqlite3.connect(mbtiles_path)
    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()

if tile is None:
        raise Http404("Tile not found")
    
    return HttpResponse(BytesIO(tile[0]).read(), content_type='image/png')
```

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

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

Chạy server Django:

```bash
python manage.py runserver
```

### Bước 7: Tạo mã HTML để hiển thị trên Web

Mã HTML để hiển thị bản đồ với tiles từ Django:

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>
        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 Django
        L.tileLayer('http://localhost:8000/tiles/{z}/{x}/{y}.png', {
            maxZoom: 18,
            minZoom: 0,
            attribution: 'Tiles © <a href="https://www.mapbox.com/">Mapbox</a>',
            opacity: 0.6 // Đặt độ mờ
        }).addTo(map);
    </script>
</body>
</html>
```

### Bước 8: 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ữ.