如何在最新的Flutter Mapbox_gl版本中使用.addCircleLayer()?

nfs0ujit  于 2023-05-19  发布在  Flutter
关注(0)|答案(1)|浏览(131)

bounty还有2天到期。回答此问题可获得+50声望奖励。lambduh希望引起更多关注这个问题。

我正在做一个flutter网站,它可以从我的firebase数据库中获取实时位置数据,并将它们投射到我的mapboxMap中。我可以使用.addCircle()将它们单独添加到Map中,但似乎更好的方法是使用.addCircleLayer(),因为我一直在同时更新多个圆圈。我已经在互联网上搜索了使用.addCircleLayer()的方法,但大多数方法看起来都过时了,不再被当前版本识别。
以下是我的代码,用于逐个投影位置**:

void _projectVehiclePositions(List<VehicleData> Vehicles) {

    Vehicles.forEach((Vehicle) {
      final vehicleCircle = CircleOptions(
        geometry: LatLng(Vehicle.position.latitude, Vehicle.position.longitude),
      );
      _mapController.addCircle(vehicleCircle);
    });

   }

以下是我对.addCircleLayer()的尝试:

void _projectVehiclePositions(List<LatLng> VehiclePositions) {
    String sourceId = 'PositionStream';
    String layerId = 'PositionStream';
    
    _mapController.addSource(sourceId, GeojsonSourceProperties(
      data: VehiclePositions,
    ));
    
    _mapController.addCircleLayer(sourceId, layerId, const CircleLayerProperties(
      circleColor: '#E91E63',
      circleRadius: 5.0,
      circleOpacity: 0.8,
      circleStrokeColor: '#E91E63'
    ));
    
  }

我首先将数据预处理为一个车辆位置列表,然后将其传递给负责添加圆层的函数。到目前为止,它暂时不起作用。

j2qf4p5b

j2qf4p5b1#

我提供了下面的代码。相应地执行。

import 'package:flutter/material.dart';
import 'package:flutter_mapbox_gl/flutter_mapbox_gl.dart';

class MapPage extends StatefulWidget {
  const MapPage({Key? key}) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  MapboxMapController? _mapController;
  final String accessToken =
      'MAPBOX_ACCESS_TOKEN'; // add your token key
  final LatLng initialCameraPosition = LatLng(37.7749, -122.4194); 
  final List<LatLng> vehiclePositions = [
    LatLng(37.7749, -122.4194),
    LatLng(37.7849, -122.4194),
    LatLng(37.7949, -122.4194),
    LatLng(37.8049, -122.4194),
    LatLng(37.8149, -122.4194),
  ];

  void _onMapCreated(MapboxMapController controller) {
    _mapController = controller;
  }

  void _addVehiclePositions(List<LatLng> positions) {
    String sourceId = 'vehiclePositions';
    String layerId = 'vehiclePositions';
    GeoJsonSource source = GeoJsonSource(sourceId, data: {
      'type': 'FeatureCollection',
      'features': positions.map((position) {
        return {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [position.longitude, position.latitude]
          }
        };
      }).toList()
    });
    CircleLayer circleLayer = CircleLayer(layerId, sourceId);
    circleLayer.circleColor = "#007cbf";
    circleLayer.circleRadius = 5;
    _mapController?.addSource(sourceId, source);
    _mapController?.addLayer(circleLayer);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Map Page'),
      ),
      body: MapboxMap(
        accessToken: accessToken,
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: initialCameraPosition,
          zoom: 12,
        ),
        styleString: MapboxStyles.MAPBOX_STREETS,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addVehiclePositions(vehiclePositions);
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

如果你遇到任何问题,请告诉我。

相关问题