java工程师培训,八五中药材网,夫妻争执烫伤儿子
a dart implementation of leaflet for flutter apps.
一个基于leaflet的地图插件,也就是说flutter_map基于的是瓦片地图,那么在兼容性上可以说比较好用了。
目前主要的地图插件主要有: flutter_map
map_view``amap
先说下map_view这个插件,这个插件主要是用来展示google map使用。 由于一个我们都知道的原因,我们在使用这个插件的过程中相对比较困难,所以我们可是适当放弃使用这plugin。
每次看到版本为0.0.1的插件总觉得哪里有问题的,这是高德推出的插件。 高德地图3d flutter组件。
展示原生android、ios高德地图,并与flutter交互。
注意:随着flutter版本的提升, 本项目也会随之更新, 目前这个版本只能在单独的controller或者activity中打开高德地图。 划线部分表示说这个版本还不是很成熟,因此我也不想用
这个插件就是要重点说下的了 ,下面的视频可能需要代理才能光看,示例: 视频
: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到: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
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论