关于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版本的提升， 本项目也会随之更新， 。 划线部分表示说这个版本还不是很成熟，因此我也不想用

flutter_map

这个插件就是要重点说下的了 ，下面的视频可能需要代理才能光看，示例： 视频 

：https://pub.dartlang.org/packages/flutter_map
https://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