flutter_map包的地图样式设计

Question

我正在开发一个Flutter应用程序，用于显示OpenStreetMap（OSM）地图。我正在尝试将地图样式设置为与以下图像相似：

然而，我一直没有找到一种在移动应用中直接实现这种风格的方法。我所遇到的所有方法都依赖于第三方 API 或在服务器上呈现地图的样式瓷砖。

有人成功地在 Flutter 应用程序中为 OSM 地图设置了类似的外观吗？如果是，你使用了什么方法？

dependencies:
  flutter_map: ^3.1.0

代码：

FlutterMap(
            options: MapOptions(
              center: LatLng(51.5, -0.09),
              zoom: 5,
            ),
            nonRotatedChildren: [
              AttributionWidget.defaultWidget(
                source: 'OpenStreetMap contributors',
                onSourceTapped: () {},
              ),
            ],
            children: [
              TileLayer(
                urlTemplate:
                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'dev.fleaflet.flutter_map.example',
              ),
              MarkerLayer(markers: markers),
            ],
          )

- Ali Abbas

Answer 1

你好，Ali。你可以使用类似Mapbox Studio或TileMill的地图样式编辑器为FlutterMap创建自定义格式。

例如：

TileLayer(
 urlTemplate: 'https://basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png'
,),

或者

TileLayer(
 urlTemplate: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
,),

最后，你应该为自己提供类似于此的自定义内容：

TileLayer(
  urlTemplate: 'https://my-custom-tile-server.com/{z}/{x}/{y}.png',
),

愉快的编码...

- Amirali Eric Janani

---

Salam Amirali，感谢您的回答和努力。您提供的解决方案当然可行，但我想要的是在移动应用程序内呈现瓷砖颜色，而不是在服务器上呈现。 让我们看看是否有其他人提出了我想要的解决方案，或者您的答案将是唯一被接受的答案 :) - Ali Abbas