İçeriğe geç
Updraft Docs
English

Hızlı başlangıç: flutter_map (raster)

Flutter uygulamasında en kısa yol: Updraft'ın pilot gözü stilinden çizilmiş PNG karoları flutter_map ile göstermek. Uygulamanız bugün OpenStreetMap ya da başka bir sağlayıcının raster karolarını kullanıyorsa geçiş adres ve atıf değişikliğidir.

1. Bağımlılıklar

flutter pub add updraft_maps flutter_map:8.3.2 latlong2:0.10.1 url_launcher:6.3.3

updraft_maps Updraft'ın istemci paketidir: karo adresi, anahtar başlığı, zoom sınırları, önbellek ve atıf satırı tek çağrıda (updraftTileLayer, UpdraftAttribution). url_launcher yalnız atıf satırına dokununca kurallar sayfasını açmak için.

2. Harita

lib/raster_map.dart
// Updraft quick start 2: flutter_map 8 with Updraft raster tiles (PNG, 256 px; @2x on dense
// screens), through the updraft_maps package.
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:updraft_maps/flutter_map.dart';
import 'package:url_launcher/url_launcher.dart';

/// Updraft tile server root (another one, e.g. staging: --dart-define=UPDRAFT_TILES=https://...).
const updraftTiles = String.fromEnvironment(
  'UPDRAFT_TILES',
  defaultValue: defaultTilesUrl,
);

/// Key with the `tiles` scope, given at build time:
/// flutter run --dart-define=UPDRAFT_TILES_KEY=upd_...
/// Empty: the public tile path (limited per client address, not counted for you).
const updraftTilesKey = String.fromEnvironment('UPDRAFT_TILES_KEY');

/// Opens the attribution rules page.
void openAttributionRules() => launchUrl(Uri.parse(attributionRulesUrl));

class RasterMapScreen extends StatelessWidget {
  const RasterMapScreen({super.key, this.dark = false});

  /// `pilot-dark` instead of `pilot-light`.
  final bool dark;

  @override
  Widget build(BuildContext context) => FlutterMap(
    options: const MapOptions(
      initialCenter: LatLng(36.56, 29.17), // Babadağ, Fethiye
      initialZoom: 12,
      maxZoom: 17,
    ),
    children: [
      // Raster template with {r} (@2x on dense screens), zoom 5–16 drawn and scaled beyond, the
      // key as the X-Api-Key header, tiles kept 30 days without asking the network.
      updraftTileLayer(
        context,
        theme: dark ? UpdraftTheme.dark : UpdraftTheme.light,
        apiKey: updraftTilesKey,
        tilesUrl: updraftTiles,
        userAgentPackageName: 'com.example.updraft_quickstart',
      ),
      // Visible attribution line (wraps on narrow screens), not folded into a menu.
      const UpdraftAttribution(onTap: openAttributionRules),
    ],
  );
}

Çalıştırma (anahtar isteğe bağlı):

flutter run --dart-define=UPDRAFT_TILES_KEY=upd_…

Örnek uygulamanın tamamı (pubspec.yaml, main.dart; raster ve vektör haritası iki sekmede) depoda devdocs/examples/flutter/ altındadır. Platform klasörleri depoda yoktur, bir kez flutter create . çalıştırın.

3. updraftTileLayer ne ayarlar

Ayar Neden
minNativeZoom: 5, maxNativeZoom: 16 Updraft z5–16 çizer; bunun dışında karo yoktur (404). flutter_map z17'de z16 karosunu büyütür, z5'in altında z5'i küçültür. Bu iki satır yoksa yakınlaşınca harita boş kalır
{r} + retinaMode Yüksek yoğunluklu ekranda @2x (512 px, aynı alan) ister; karo 3–4 kat büyüktür. Veri tasarrufu için kaldırabilirsiniz
headers: {'X-Api-Key': …} Anahtar başlıkta gider, adreste değil. Uygulamaya giren anahtar çıkarılabilir: yalnız tiles kapsamlı anahtar kullanın
cacheFor: 30 gün (overrideFreshAge) Updraft karoları bir saat taze sayılır (Cache-Control: max-age=3600); flutter_map ağ yokken bayat karoyu siler. Dağda çekim yokken harita boş kalmasın diye tazelik istemcide uzatılır. Taban harita ayda bir yenilenir
userAgentPackageName Uygulamanızın paket adı; sunucu yükü istemciye göre izlenir

Koyu tema: theme: UpdraftTheme.dark (adreste pilot-dark). Paketi kullanmadan aynı katman için tablodaki değerleri TileLayer'a kendiniz verin; adres https://maps.updraftmaps.com/raster/pilot-light/{z}/{x}/{y}{r}.png.

4. Raster karoda neler var

Taban harita: arazi örtüsü, su, yollar, teleferik, eş yükselti, tepe gölgesi, elektrik hatları ve etiketler. Termik ızgarası, skyway, kalkış ve iniş raster karoya girmez: bu katmanlar eşiğe, moderasyona ve rıza geri çekmeye bağlıdır, saatlerce önbellekte kalan PNG'ye gömülmez. Bunlar için vektör karo (maplibre_gl) ya da API (GET /v1/sites) kullanın.

5. Atıf

Satır haritanın üstünde görünür kalmalı, katlanan bir menüye konmamalıdır. flutter_map'in RichAttributionWidget'ı metni bir düğmenin arkasına katladığı için paketin UpdraftAttribution'ı kendi küçük satırını çizer (dar ekranda alt satıra kayar). Kurallar: Atıf.