關於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
這個外掛就是要重點說下的了 ，下面的視訊可能需要代理才能光看，示例：
ofollow,noindex">視訊
地址
：https://pub.dartlang.org/packages/flutter_map
github
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/GIS/">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到：additionalOptions
map中
使用離線地圖
按照本指南獲取離線地圖塊
將地圖匯出後.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