メインコンテンツまでスキップ

Add vector tiles

This example adds a Vector Source of elevation data. This data is used to create contour lines in red with a Line Layer. The Line Layer is positioned using Layer Position.

vector_tile_source.dart
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

import 'page.dart';

class VectorTileSourcePage extends ExamplePage {
VectorTileSourcePage() : super(const Icon(Icons.map), 'Vector Tile Source');


Widget build(BuildContext context) {
return const VectorTileSourceWidget();
}
}

class VectorTileSourceWidget extends StatefulWidget {
const VectorTileSourceWidget();


State createState() => VectorTileSourceWidgetState();
}

class VectorTileSourceWidgetState extends State<VectorTileSourceWidget> {
MapboxMap? mapboxMap;
var isLight = true;

_onMapCreated(MapboxMap mapboxMap) async {
this.mapboxMap = mapboxMap;
await mapboxMap.style.addSource(VectorSource(
id: "terrain-data", url: "mapbox://mapbox.mapbox-terrain-v2"));
await mapboxMap.style.addLayerAt(
LineLayer(
id: "terrain-data",
sourceId: "terrain-data",
sourceLayer: "contour",
lineJoin: LineJoin.ROUND,
lineCap: LineCap.ROUND,
lineColor: Colors.red.value,
lineWidth: 1.9),
LayerPosition(above: "country-label"));
}


Widget build(BuildContext context) {
return new Scaffold(
body: MapWidget(
key: ValueKey("mapWidget"),
styleUri: MapboxStyles.LIGHT,
cameraOptions: CameraOptions(
center: Point(coordinates: Position(-122.447303, 37.753574)),
zoom: 13.0),
onMapCreated: _onMapCreated,
));
}
}
このexampleは役に立ちましたか?