Angular 애플리케이션에 지도 전단지 구성 요소 추가

21274 단어 tutorialbeginnersmapangular

소개



Angular은 HTML, CSS 및 TypeScript(JavaScript)를 사용하여 WEB, 모바일 및 데스크톱 애플리케이션을 구축하기 위한 개발 플랫폼입니다. 현재 Angular는 버전 13이며 Google이 프로젝트의 주요 유지 관리자입니다.

leatlet은 휴대기기를 지원하는 대화형 지도 구성요소 라이브러리입니다.

전제 조건



시작하기 전에 도구를 설치하고 구성해야 합니다.
  • git
  • Node.js and npm
  • Angular CLI
  • IDE(예: Visual Studio Code )

    • 시작하기



    Mapbox에서 계정 생성 및 구성



    1. 계정을 생성하자. 사이트https://www.mapbox.com/에 액세스하고 가입 버튼을 클릭합니다.



    2. 사용자 이름, 이메일, 비밀번호, 이름, 성 필드를 채우고 Mapbox 서비스 약관 및 개인 정보 보호 정책에 동의합니다 확인란을 클릭합니다. 시작하기 버튼을 클릭합니다.



    3. 등록된 이메일을 확인합니다.



    4. 전송된 이메일의 링크를 클릭합니다.



    5. 대시보드 메뉴에 표시된 토큰을 복사합니다. 제 경우에는 이 토큰이 Angular 응용 프로그램에서 구성되기 때문에 토큰이 표시되었습니다pk.eyJ1IjoiYnJhc2thbSIsImEiOiJja3NqcXBzbWoyZ3ZvMm5ybzA4N2dzaDR6In0.RUAYJFnNgOnnZAw.



    6. 준비! 계정이 생성되고 토큰이 생성되었습니다.

    Angular 애플리케이션 만들기



    1. 경로 파일 및 SCSS 스타일 형식과 함께 @angular/cli를 사용하여 Angular 기본 구조로 애플리케이션을 생성해 보겠습니다.

    ng new angular-internationalization
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-internationalization/README.md (1073 bytes)
CREATE angular-internationalization/.editorconfig (274 bytes)
CREATE angular-internationalization/.gitignore (604 bytes)
CREATE angular-internationalization/angular.json (3339 bytes)
CREATE angular-internationalization/package.json (1090 bytes)
CREATE angular-internationalization/tsconfig.json (783 bytes)
CREATE angular-internationalization/.browserslistrc (703 bytes)
CREATE angular-internationalization/karma.conf.js (1445 bytes)
CREATE angular-internationalization/tsconfig.app.json (287 bytes)
CREATE angular-internationalization/tsconfig.spec.json (333 bytes)
CREATE angular-internationalization/src/favicon.ico (948 bytes)
CREATE angular-internationalization/src/index.html (313 bytes)
CREATE angular-internationalization/src/main.ts (372 bytes)
CREATE angular-internationalization/src/polyfills.ts (2820 bytes)
CREATE angular-internationalization/src/styles.scss (80 bytes)
CREATE angular-internationalization/src/test.ts (788 bytes)
CREATE angular-internationalization/src/assets/.gitkeep (0 bytes)
CREATE angular-internationalization/src/environments/environment.prod.ts (51 bytes)
CREATE angular-internationalization/src/environments/environment.ts (658 bytes)
CREATE angular-internationalization/src/app/app-routing.module.ts (245 bytes)
CREATE angular-internationalization/src/app/app.module.ts (393 bytes)
CREATE angular-internationalization/src/app/app.component.scss (0 bytes)
CREATE angular-internationalization/src/app/app.component.html (24617 bytes)
CREATE angular-internationalization/src/app/app.component.spec.ts (1139 bytes)
CREATE angular-internationalization/src/app/app.component.ts (233 bytes)
✔ Packages installed successfully.


    2. 부트스트랩 CSS 프레임워크를 설치하고 구성합니다. 게시물의 2단계와 3단계를 수행합니다.

    3. 아래와 같이 src/environments/environment.ts 및 src/environments/environment.prod.ts 파일에 Mapbox 토큰을 구성합니다.

    mapbox: {
  accessToken: 'pk.eyJ1IjoiYnJhc2thbSIsImEiOiJja3NqcXBzbWoyZ3ZvMm5ybzA4N2dzaDR6In0.RUAYJFnNgOnn80wXkrV9ZA',
},


    4. src/assets/images 폴더를 만들고 marker-icon.png 및 marker-shadow.png 파일을 복사합니다.




    5. leaflet 및 @types/leaflet 라이브러리를 설치합니다.

    npm install leaflet @types/leaflet


    6. leaflet 라이브러리를 구성합니다. angular.json 파일을 변경하고 아래와 같이 leaflet.css 파일을 추가합니다.

    "styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/leaflet/dist/leaflet.css",
  "src/styles.scss"
],


    7. AppComponent 파일에서 src/app/app.component.ts 클래스의 내용을 제거합니다. leaflet 서비스를 가져오고 아래와 같이 getCurrentPosition , loadMap 메서드를 생성합니다.

    import { AfterViewInit, Component } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import * as L from 'leaflet';

import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {

  map: any;

  constructor() {
  }

  public ngAfterViewInit(): void {
    this.loadMap();
  }

  private getCurrentPosition(): any {
    return new Observable((observer: Subscriber<any>) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position: any) => {
          observer.next({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
          observer.complete();
        });
      } else {
        observer.error();
      }
    });
  }

  private loadMap(): void {
    this.map = L.map('map').setView([0, 0], 1);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: environment.mapbox.accessToken,
    }).addTo(this.map);

    this.getCurrentPosition()
    .subscribe((position: any) => {
      this.map.flyTo([position.latitude, position.longitude], 13);

      const icon = L.icon({
        iconUrl: 'assets/images/marker-icon.png',
        shadowUrl: 'assets/images/marker-shadow.png',
        popupAnchor: [13, 0],
      });

      const marker = L.marker([position.latitude, position.longitude], { icon }).bindPopup('Angular Leaflet');
      marker.addTo(this.map);
    });
  }

}


    8. src/app/app.component.html 파일의 내용을 제거합니다. 아래와 같이 지도div 태그를 추가합니다.

    <div class="container-fluid py-3">
  <h1>Angular Leaflet</h1>

  <div id="map"></div>
</div>


    9. 아래와 같이 src/app/app.component.scss 파일에 스타일을 추가합니다.

    #map {
  height: 400px;
  width: 100%;
  max-width: 600px;
}


    10. 아래 명령으로 애플리케이션을 실행합니다.

    npm start

> [email protected] start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.81 MB
styles.css          | styles        | 280.54 kB
polyfills.js        | polyfills     | 128.51 kB
scripts.js          | scripts       |  76.67 kB
main.js             | main          |  12.03 kB
runtime.js          | runtime       |   6.63 kB

                    | Initial Total |   3.30 MB

Build at: 2021-08-20T10:40:47.188Z - Hash: 030dfe6c9ea7ff5d80c2 - Time: 12256ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.


    11. 준비! URLhttp://localhost:4200/에 접속하여 애플리케이션이 작동하는지 확인합니다. GitHub Pages 및 Stackblitz에서 작동하는 응용 프로그램을 참조하십시오.



    응용 프로그램 저장소는 https://github.com/rodrigokamada/angular-leaflet에서 사용할 수 있습니다.

    이 자습서는 내blog에 포르투갈어로 게시되었습니다.
    Microsoft Flow로 메시지 보내기
    MVC model 2 방식

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage