Flatter에서 OpenStreetMaps와 Bing 지도를 쉽게 시각화

Syncfusion Flutter Maps widget의 GeoJSON 데이터는 지리적 영역을 나타냅니다.그러나 또 다른 유행하는 지도 시각화 방식은 빙맵, OpenStreetMaps, GoogleMaps, TomTom 등 인터넷 지도 상호작용 서비스 (WMTS) 에서 지도 상호작용 프로그램이나 이미지를 불러오는 것이다.이 tile layer 렌더링 지원은 Essential Studio 2020 Volume 3 버전의 Syncfusion Flatter Maps 위젯에 포함되어 있음을 알려 드리게 되어 기쁩니다.이렇게 하면 이러한 배열 제공 프로그램에서 배열을 렌더링할 수 있습니다.
본 블로그에서는 OpenStreetMap과 BingMaps 등 공급자가 제공하는 타일을 보여주기 위해 타일 층을 Flutter Maps 작은 위젯에 추가하는 방법을 소개할 것입니다.또한 태그를 추가하고 배열 레이어에서 배율 조정 및 초점이동을 활성화하는 방법에 대해서도 간략하게 설명합니다.

무엇이 타일층입니까?

OpenStreetMaps와 BingMaps 같은 웹 지도 배열 서비스는 우리가 요청한 구역마다 256*256 픽셀의 배열을 제공합니다.우리가 새로 도입한 평평한 층은 이 점을 효과적으로 실현할 수 있고, 완전한 지도를 렌더링하기 위해 적당한 위치에 여러 개의 평평한 층을 배열할 수 있다.
그리고 이 층과 상호작용을 하여 지도를 쥐고 지도상에서 평이하게 이동해서 근처를 살펴보고 특정 구역을 더욱 가깝게 볼 수 있다.
진동 스티커의 타일 층

OpenStreetMap 추가

만약 당신이 경제적이고 효율적인 지도 타일 공급업체를 찾고 있다면, OpenStreetMap이 당신에게 가장 적합합니다.이것은 광범위하게 사용되는 무료 WMT로 모바일 응용 프로그램과 사이트에 사용되며 기본 지도 제작의 요구를 만족시킨다.
| 부인 고지: OpenStreetMaps는 무료로 사용할 수 있습니다.하지만 공식 웹사이트에서 라이센스 약관을 확인하여 |
다음 코드 예는 OpenStreetMap을 사용하여 맵의 작은 위젯에 평평한 층을 추가하는 과정을 설명합니다.

@override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapTileLayer(
         urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
         initialZoomLevel: 2,
         initialFocalLatLng: MapLatLng(28.644800, 77.216721),
       ),
     ],
  );
}

Syncfusion 바이브레이션의 OpenStreetMap

URL 템플릿

urlTemplate 속성은 WMTS 형식의 URL, 즉 {z} 축소 레벨과 {x} 및 {y} 배열 좌표를 수락합니다.
이 URL은 제공 프로그램에 따라 약간 다를 수 있습니다.형식은 다음과 같습니다.
https://exampleprovider/{z}/{x}/{y}.png ,
https://exampleprovider/z={z}/x={x}/y={y}.png ,
https://exampleprovider/z={z}/x={x}/y={y}.png?key=subscription_key 등.
현재 초점과 축소 단계에 따라 내부에서 {z}, {x}, {y}를 바꿀 것입니다.
일부 공급자는 빙지도와 같은 구독 키를 필요로 할 수도 있습니다.urlTemplate에 포함시켜 주십시오.
주의: 지도 제공자에 따라 형식이 다를 수 있습니다.공급자가 필요로 하는 정확한 URL 형식을 그들의 공식 사이트에서 볼 수 있다.

타일이 타일 층에서의 렌더링 방식

최소 크기 조정 레벨(레벨 0)에서 맵의 크기는 256 x 256 픽셀이며 전 세계의 맵은 단일 배열로 렌더링됩니다.연속 레벨마다 지도의 폭과 높이가 두 배로 증가한다.따라서 레벨 1은 512 x 512 픽셀로 네 개의 슬라이스((0,0), (0,1), (1,0), (1,1)이 있는데 그 중에서 0과 1은 urlTemplate에서 {x}와 {y}), 레벨 2는 2048 x 2048 픽셀로 8개의 슬라이스(0,0)에서 (3,3)까지 유추된다.
그러나 현재 뷰포트에 필요한 배열 수만 처음에 요청되고 렌더링됩니다.줌 및 초점이동이 활성화된 경우 필요에 따라 다른 필요한 배열을 요청하고 대화식 중에 렌더링됩니다.

줌 및 변환 사용

동적 배율 조정 및 초점이동을 활성화하려면 다음 코드 세그먼트를 참조하십시오.다음과 같은 방법으로 타일링 레이어를 확대하여 특정 영역을 자세히 볼 수 있습니다.

터치 장치의 클립

마우스 휠 또는 트랙 보드를 스크롤합니다.

은 웹의 도구막대를 사용합니다.

MapZoomPanBehavior _zoomPanBehavior;

  @override
  void initState() {
    _zoomPanBehavior = MapZoomPanBehavior();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SfMaps(
      layers: [
        MapTileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          initialZoomLevel: 2,
          initialFocalLatLng: MapLatLng(28.644800, 77.216721),
          zoomPanBehavior: _zoomPanBehavior,
        ),
      ],
    );
  }

타일 레이어의 배율 조정 및 변환
|참고: MapZoomPanBehavior 객체는 생성될 때마다 재생성되지 않는 긴 수명을 예상합니다.|
줌 및 팬할 때 새 배열이 요청되고 렌더링됩니다.상호작용 후 각각 MapZoomPanBehavior.zoomLevel과 MapZoomPanBehavior.focalLatLng 속성에서 현재 축소 단계와 초점을 얻을 수 있습니다.이러한 속성도 동적으로 설정할 수 있습니다.

Bing 맵 추가

Bing 지도를 MapTileLayer에 추가하는 것은 OpenStreetMaps를 추가하는 것과 같지만 urlTemplate 속성을 설정하는 방식이 다르다.
Bing Maps의 경우 추가 절차가 필요합니다.필요한 URL의 형식은 다른 tile 서비스와 다릅니다.따라서 필요한 형식으로 URL을 반환하는 최상위 getBingUrlTemplate 함수를 추가했습니다.이 함수를 반환하는 URL을 사용하여 urlTemplate 속성으로 설정할 수 있습니다.
필수 맵은 구독 키가 필요합니다.urlTemplate 자체에 추가해야 합니다.또 빙맵스는 도로와 항공, 라벨이 달린 항공지도 등 지도 유형도 제공한다.이러한 유형도 urlTemplate 자체에 추가해야 한다. 아래의 코드 예시와 같다.타일 공급업체의 공식 사이트를 보면 사용 가능한 유형과 코드를 알 수 있습니다.
이러한 차이를 제외하고는 모든 종류의 스티커 공급자 간의 모든 것이 완전히 같다.

@override
Widget build(BuildContext context) {
  String bingKey =
      'SUBSCRIPTION_KEY';
  return Scaffold(
    body: Center(
       child: Container(
            child: FutureBuilder(
          future: getBingUrlTemplate(
              'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabelsOnDemand?output=json&uriScheme=https&include=ImageryProviders&key='+bingKey),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.done &&
                snapshot.hasData) {
              final String urlTemplate = snapshot.data;
              return SfMaps(
                layers: [
                  MapTileLayer(
                    initialZoomLevel: 2,
                    initialFocalLatLng: MapLatLng(28.644800, 77.216721),
                    urlTemplate: urlTemplate,
                  ),
                ],
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
       )),
     ),
  );
}

빙지도 추가

기타 타일 공급업체

OpenStreetMap과 BingMaps를 제외하고는 WMTS 포맷을 따르는 다른 평점 제공자, 예를 들어 Google Maps이나 TomTom을 나타낼 수 있다.예를 들어 TomTom의 배열은 아래의 코드와 같이 나타낼 수 있다.
참고: 우리가 Bing 맵에서 만든 것처럼 URL 끝에 구독 키를 추가해야 합니다.

@override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapTileLayer(
        urlTemplate: 'https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?key=SUBSCRIPTION_KEY',
        initialZoomLevel: 2,
        initialFocalLatLng: MapLatLng(28.644800, 77.216721),
      ),
    ],
  );
}

태그 추가

모양 레이어에서와 마찬가지로 완전히 동일한 방법으로 배열 레이어에 태그를 추가할 수 있습니다.그것들은 사용자의 요구에 따라 타일 층에서 특정한 위도와 경도를 나타낼 수 있다.내장 형태 (원형, 마름모, 정사각형, 삼각형) 또는 모든 종류의 사용자 정의 위젯을 표시로 사용할 수 있습니다.
markerBuilder 리셋은 initialMarkersCount 속성에서 지정한 값의 횟수를 호출합니다.
|참고: 태그를 동적으로 추가하려면 this 섹션을 참조하십시오. |
아래의 코드 예시를 참고하시오.

class _MyHomePageState extends State {
  List _data;

  @override
  void initState() {
    _data = const [
      Model('Brazil', -14.235004, -51.92528),
      Model('Germany', 51.16569, 10.451526),
      Model('Australia', -25.274398, 133.775136),
      Model('India', 20.593684, 78.96288),
      Model('Russia', 61.52401, 105.318756)
    ];

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: SfMaps(
            layers: [
              MapTileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                initialZoomLevel: 2,
                initialFocalLatLng: MapLatLng(28.644800, 77.216721),
                initialMarkersCount: 5,
                markerBuilder: (BuildContext context, int index) {
                  return MapMarker(
                    latitude: _data[index].latitude,
                    longitude: _data[index].longitude,
                    iconColor: Colors.white,
                    iconStrokeColor: Colors.black,
                    iconStrokeWidth: 2,
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Model {
  const Model(this.country, this.latitude, this.longitude);

  final String country;
  final double latitude;
  final double longitude;
}

타일 레이어에 태그 추가

결론

이 블로그에서, 우리는 당신에게 Flutter Maps 작은 부품에 포함된 새로운 타일 층 지원을 소개합니다.최신 설치 프로그램 2020 Volume 3 release을 다운로드할 수 있습니다.이 새로운 기능을 사용해 보고 다음 댓글 부분에서 피드백을 공유해 보세요.
온전한 here을 보시고 이 user guide에서 우리의 샘플을 보십시오.또한 GitHub location, Google Play Store 및 App Store에서 프레젠테이션 애플리케이션을 확인할 수 있습니다.
프레임의 새 부품이나 기존 부품의 새로운 기능을 진동시키려면 website, support forums 또는 Direct-Trac으로 문의하십시오.예전과 같이, 우리는 기꺼이 당신을 돕겠습니다!