關於flutter插件地圖的使用flutter_map

關於flutter插件地圖的使用flutter_map

flutter_map

A Dart implementation of Leaflet for Flutter apps.
一個基於leaflet的地圖插件，也就是說flutter_map基於的是瓦片地圖，那麼在相容性上可以說比較好用了。

橫向對比

目前主要的地圖插件主要有： flutter_map map_view``amap

map_view

先說下map_view這個插件，這個插件主要是用來展示google map使用。 由於一個我們都知道的原因，我們在使用這個插件的過程中相對比較困難，所以我們可是適當放棄使用這plugin。

flutter_amap

每次看到版本為0.0.1的插件總覺得哪裡有問題的，這是高德推出的插件。 高德地圖3d flutter組件。

展示原生android、ios高德地圖，並與flutter交互。

註意：隨著flutter版本的提升， 本項目也會隨之更新， 目前這個版本只能在單獨的controller或者activity中打開高德地圖。 劃線部分表示說這個版本還不是很成熟，因此我也不想用

flutter_map

這個插件就是要重點說下的了 ，下麵的視頻可能需要代理才能光看，示例： 視頻 

地址：https://pub.dartlang.org/packages/flutter_map
githubhttps://github.com/apptreesoftware/flutter_map 使用：

dependencies:
  flutter_map: ^0.3.0

在需要使用的地方根據自動提示添加packages

import 'packages:.....';

需要註意的是可能需要添加LatLng這個包
使用：

Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.5, -0.09),//經緯度，註意前後順序，用於展示中心
        zoom: 13.0,
      ),
      layers: [
        new TileLayerOptions(
          urlTemplate: "https://api.tiles.mapbox.com/v4/"
              "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",//瓦片地圖的URL
          additionalOptions: {
            'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
            'id': 'mapbox.streets',//其他附加內容
          },
        ),
        new MarkerLayerOptions(
          markers: [
            new Marker(//! 地圖標記
              width: 80.0,
              height: 80.0,
              point: new LatLng(51.5, -0.09),//經緯度註意順序
              builder: (ctx) =>
              new Container(
                child: new FlutterLogo(),// 在標記的位置加上標記
              ),
            ),
          ],
        ),
      ],
    );
  }

關於瓦片地圖的地址

根據需要將所需要的瓦片地圖的地址填入上面的urlTemplate 一下內容摘選於github

TianDiTu: {
        Normal: {
            Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}",
            Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}"
        },
        Satellite: {
            Map: "http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}",
            Annotion: "http://t{s}.tianditu.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}"
        },
        Terrain: {
            Map: "http://t{s}.tianditu.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}",
            Annotion: "http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}"
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    },

    GaoDe: {
        Normal: {
            Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        },
        Satellite: {
            Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
        },
        Subdomains: ["1", "2", "3", "4"]
    },

    Google: {
        Normal: {
            Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Satellite: {
            Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Subdomains: []
    },

    Geoq: {
        Normal: {
            Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
            Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}",
            PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
            Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
            Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}"
        },
        Subdomains: []

    }
    // 當然還有mapbox
    "https://api.mapbox.com/v4/"
      "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}"

使用mapbox： 1、創建mapbox賬戶獲取apikey 2、打開leaflet_flutter_example/lib/main.dart粘貼key到：additionalOptionsmap中

使用離線地圖

按照本指南獲取離線地圖塊將地圖導出後.mbtiles，可以使用mbtilesToPng解壓縮/{z}/{x}/{y}.png。將其移動到Assets文件夾並將Asset目錄添加到pubspec.yaml。離線地圖的最低必填欄位為：

new FlutterMap(
  options: new MapOptions(
    center: new LatLng(56.704173, 11.543808),
    minZoom: <offline map minimum zoom>,
    maxZoom: <offline map maximum zoom>,
    zoom: 13.0,
    swPanBoundary: LatLng(56.6877, 11.5089),
    nePanBoundary: LatLng(56.7378, 11.6644),
  ),
  layers: [
    new TileLayerOptions(
      offlineMode: true,
      maxZoom: <offline map maximum zoom>,
      urlTemplate: "assets/offlineMap/{z}/{x}/{y}.png",
    ),
  ],
),

Make sure PanBoundaries are within offline map boundary to stop missing asset errors.
See the flutter_map_example/ folder for a working example