Newer
Older
flutterBaseApp / lib / ui / pages / demo / mapPage / tianditu_map_page.dart
StephanieGitHub on 19 Feb 2021 6 KB 引入flutter_map包
import 'package:base_app/res/index.dart';
import 'package:base_app/ui/widgets/common/button/round_button_widget.dart';
import 'package:base_app/ui/widgets/map/zoom_plugin.dart';
import 'package:base_app/utils/permission_util.dart';
import 'package:flutter/material.dart';
import 'package:oktoast/oktoast.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
// import 'package:location/location.dart';

final _assetsIcon = AssetImage('assets/images/qidian.png');
String tiandituUrl =
    'http://t{s}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=49826fb057bee77da2f1e9f525534178';
String gaodeUrl =
    'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}';
String arcgisUrl =
    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';

class TiandituMapPage extends StatefulWidget {
  @override
  _TiandituMapPageState createState() => _TiandituMapPageState();
}

class _TiandituMapPageState extends State<TiandituMapPage> {
  // LocationData _currentLocation; //当前位置
  MapController mapController;
  double rotation = 0.0;

  @override
  void initState() {
    super.initState();
    mapController = MapController();
  }

  @override
  Widget build(BuildContext context) {
    // 功能栏Widget
    Widget functionBar = Container(
        child: new Column(
      children: <Widget>[
        new FloatingActionButton(
            // 回到当前位置按钮
            mini: true,
            heroTag: 'gps_setting',
            shape: new CircleBorder(),
            backgroundColor: Colors.white,
            child: Icon(Icons.gps_fixed, size: 26, color: Colours.gray_66),
            onPressed: () async {
              mapController.rotate(0.0);
            }),
      ],
    ));
    return Scaffold(
        appBar: AppBar(title: const Text('自定义地图')),
        body: new Stack(children: [
          Container(
            height: double.infinity,
            width: double.infinity,
            color: Colors.white24,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Expanded(
                    child: Container(
                        child: FlutterMap(
                      mapController: mapController,
                      options: MapOptions(
                        center: LatLng(39.9, 116.4), // 经纬度
                        zoom: 13.0, // 缩放
                        plugins: [
                          ZoomButtonsPlugin(),
                        ],
                      ),
                      layers: [
                        TileLayerOptions(
                            // wmsOptions: WMSTileLayerOptions(
                            //   baseUrl: tiandituUrl,
                            //   additionalOptions: {
                            //     'accessToken':
                            //         '49826fb057bee77da2f1e9f525534178'
                            //   }
                            //   // layers: ['s2cloudless-2018_3857'],
                            // ),
                            // urlTemplate: tiandituUrl,
                            urlTemplate: arcgisUrl,
                            // zoomOffset: 1.0,
                            subdomains: [
                              '0',
                              '1',
                              '2',
                              '3',
                              '4',
                              '5',
                              '6',
                              '7'
                            ],
                            additionalOptions: {
                              //   'accessToken':
                              //       '49826fb057bee77da2f1e9f525534178'
                            }),
                        MarkerLayerOptions(
                          markers: [
                            new Marker(
                              width: 80.0,
                              height: 80.0,
                              point: LatLng(39.9, 116.4),
                              builder: (ctx) => new Container(
                                  child: GestureDetector(
                                onTap: () {
                                  showToast("click");
                                },
                                child: new FlutterLogo(),
                              )),
                            ),
                          ],
                        ),
                      ],
                      nonRotatedLayers: [
                        ZoomButtonsPluginOption(
                          minZoom: 4,
                          maxZoom: 19,
                          mini: true,
                          padding: 10,
                          alignment: Alignment.bottomRight,
                        ),
                      ],
                    )),
                  ),
                  Container(
                    height: 55.0,
                    margin: EdgeInsets.all(10),
                    width: double.infinity,
                    color: Colors.white,
                    padding: EdgeInsets.symmetric(horizontal: 8),
                    child: new Row(
                      children: <Widget>[
                        new RoundButton(
                          text: " 天地图 ",
                          margin: EdgeInsets.symmetric(horizontal: 5),
                          radius: 8,
                          onPressed: () {},
                        ),
                        new RoundButton(
                          text: " 高德 ",
                          radius: 8,
                          onPressed: () {},
                        ),
                        new RoundButton(
                          text: " arcgis ",
                          margin: EdgeInsets.symmetric(horizontal: 5),
                          radius: 8,
                          onPressed: () {},
                        )
                      ],
                    ),
                  )
                ]),
          ),
          new Positioned(
              // 左上角功能栏
              left: 10.0,
              top: 60.0,
              child: functionBar),
        ]));
  }
}