如何使用flutter_map将地图样式模板从mapbox导入到颤振中？

Question

我正试图通过flutter_map包在我的应用程序中添加一张地图。我尝试导入这个mapbox样式：https://api.mapbox.com/styles/v1/tomjohn/cj5yp5pln0cqb2ruhy6w99j91.html?title=true&access_token=pk.eyJ1IjoidG9tam9obiIsImEiOiJxQ2RydWRNIn0.mYKLvmkrBlBKiQZdhNa31A#10.39/55.8548/-4.1836

通过这样做：

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}",
                ),
                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(),
                      ),
                    ),
                  ],
                ),
              ],
            ),

但它却抛出了这个例外：

异常:无法实例化图像编解码器.

Answer 1

要导入mapbox瓷砖：

在mapbox样式共享选项中(在developer资源下)，选择“第三方”并在下拉按钮中选择"CARTO“。然后您可以复制该链接并将其粘贴为urlTemplate。

在此之后，添加以下内容：

TileLayerOptions(
                  urlTemplate:<PASTE_URL_HERE>,
                  additionalOptions: {
                    'accessToken': <YOUR_ACCESS_TOKEN>,
                    'id': 'mapbox.mapbox-streets-v8'
                  }),

Answer 2

MapboxMap(
     styleString: "*****",
     myLocationEnabled: true,
     rotateGesturesEnabled: false,
     scrollGesturesEnabled: false,
     tiltGesturesEnabled: false,
     onMapCreated: (MapboxMapController controller){
        _controller = controller;
     },
     initialCameraPosition: CameraPosition(
       target: LatLng(***,***), zoom: 15),
     ),