首页 > 解决方案 > Flutter mapbox折线图

问题描述

我正在尝试使用我能够正确创建的 mapbox 创建折线图。用户可以回来并在他的个人资料中看到折线图。

怀疑 - 有什么方法可以将我的 lat long 列表转换为某种格式并存储在 db 中,然后我们从 db 中获取它并渲染地图?

我也检查了 geojson 格式,但如果我们将 geoJson 与 mapbox 一起使用,它会生成静态地图。

我正在使用 flutter_map 生成地图。

更新 -

var geoJson =   {
              "type": "polyline",
              "coordinates": [
                [
                  76.61219358444214,
                  27.555764420824236
                ],
                [
                  76.6120433807373,
                  27.55395717009122
                ],
                [
                  76.61094903945923,
                  27.55285378133631
                ],
                [
                  76.61021947860718,
                  27.55138892051556
                ],
                [
                  76.61000490188599,
                  27.550285505956428
                ],
                [
                  76.6101336479187,
                  27.549372326903264
                ],
                [
                  76.6107988357544,
                  27.548287916916344
                ],
                [
                  76.61150693893433,
                  27.547831320034653
                ],
                [
                  76.61109924316406,
                  27.54568148421033
                ],
                [
                  76.61097049713135,
                  27.54391211873852
                ]
              ]
            }

目前我正在使用flutter_map包并使用下面的代码来渲染地图。

var points =  [LatLng(latitude:27.591585, longitude:76.61139), LatLng(latitude:27.591548, longitude:76.611397), LatLng(latitude:27.591473, longitude:76.611407), LatLng(latitude:27.591437, longitude:76.611413), LatLng(latitude:27.591362, longitude:76.611425), LatLng(latitude:27.591325, longitude:76.61143), LatLng(latitude:27.59125, longitude:76.611442), LatLng(latitude:27.591177, longitude:76.611452), LatLng(latitude:27.59114, longitude:76.611458), LatLng(latitude:27.591065, longitude:76.61147), LatLng(latitude:27.591028, longitude:76.611475), LatLng(latitude:27.591007, longitude:76.611587), LatLng(latitude:27.591013, longitude:76.611693), LatLng(latitude:27.590777, longitude:76.611805), LatLng(latitude:27.590657, longitude:76.611822), LatLng(latitude:27.590535, longitude:76.61184), LatLng(latitude:27.590413, longitude:76.611857), LatLng(latitude:27.590293, longitude:76.611875), LatLng(latitude:27.590172, longitude:76.611892)]



return new Scaffold(
        appBar: new AppBar(title: new Text('Leaflet Maps')),
        body: new FlutterMap(
            options: new MapOptions(
                center:  new LatLng(27.563896, 76.600460), minZoom: 10.0),
            layers: [
              new TileLayerOptions(
                  urlTemplate:
             "https://api.mapbox.com/styles/v1/jainaman8/ckd5v8bs00zm01ir3w3bjrrb3/tiles/256/{z}/{x}/{y}@2x?access_token=ACCESS_TOKEN",
                  additionalOptions: {
                    'accessToken': '',
                    'id': 'mapbox.mapbox-streets-v8'
                  }
              ),

            new PolylineLayerOptions(
              polylines: [
                new Polyline(
                  points: points,
                  strokeWidth: 2.0,
                  color:  Colors.red
                )
              ]
            )

我想将geoJson对象存储到firebase中,然后从那里提取这些数据并使用mapbox渲染地图。

我在 google 上读到 firebase 不支持数组,所以另一个疑问是如何将这些数据存储在 firebase 上?

标签: flutterdartmapboxfluttermap

解决方案


您可以通过收集 geopoint 类型的字段来完成所需的操作,然后在您的颤振项目中获取这些字段。


推荐阅读