내 Mapbox GL이 타일을 올바르게 표시하지 않는 이유는 무엇입니까?

사용자 7781212

저는 앵귤러 프로젝트를 진행 중이며 Mapbox를 사용하고 싶습니다.이 튜토리얼을 따라 하는 방법을 보여주는 매체따랐습니다 . 서버를 실행하려고 할 때이 결과가 나타납니다. Angular Mapbox 결과모든 곳을 검색했지만 문제에 대한 해결책을 찾지 못했습니다.

내 코드는 다음과 같습니다.

TripPlanner 구성 요소

import { Component, OnInit } from "@angular/core";
import { environment } from "../../environments/environment";
import * as mapboxgl from "mapbox-gl";

@Component({
  selector: "app-trip-planner",
  templateUrl: "./trip-planner.component.html",
  styleUrls: ["./trip-planner.component.css"]
})
export class TripPlannerComponent implements OnInit {
  map: mapboxgl.Map;
  style = "mapbox://styles/mapbox/streets-v11";
  lat = 37.75;
  lng = -122.41;
  constructor() {}

  ngOnInit() {
    mapboxgl.accessToken = environment.mapbox.accessToken;
    this.map = new mapboxgl.Map({
      container: "map",
      style: this.style,
      zoom: 13,
      center: [this.lng, this.lat]
    });
    // Add map controls
    this.map.addControl(new mapboxgl.NavigationControl());
  }
}

내 Index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Trip</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
  </head>
  <body>
    <app-root> </app-root>
  </body>
</html>

내 Package.json

{
  "name": "trip",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@auth0/angular-jwt": "^4.0.0",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0",
    "@popperjs/core": "^2.0.6",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "mapbox-gl": "^1.8.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-devkit/build-angular": "~0.803.22",
    "@angular/cli": "~8.3.22",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/mapbox-gl": "^0.51.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-scss": "^2.0.0",
    "protractor": "~5.4.0",
    "tailwindcss": "^1.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}
AndrewHarvey

이것은 버전 1.8.0의 버그입니다. 1.7로 다운 그레이드하거나 다음 패치 릴리스를 기다릴 수 있습니다. https://github.com/mapbox/mapbox-gl-js/issues/9327

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

내 TextBoxFor가 통화 값을 올바르게 표시하지 않는 이유는 무엇입니까?

분류에서Dev

MySQL이 내 외래 키의 이름을 올바르게 지정하지 않는 이유는 무엇입니까?

분류에서Dev

xargs가 내 입력을 올바르게 구문 분석하지 않는 이유는 무엇입니까?

분류에서Dev

내 div가 올바르게 쌓이지 않는 이유는 무엇입니까?

분류에서Dev

내 Python 코드가 부울을 올바르게 평가하지 않는 이유는 무엇입니까?

분류에서Dev

내 함수가 개체 속성을 올바르게 정렬하지 않는 이유는 무엇입니까?

분류에서Dev

내 JButton 아이콘이 올바르게 표시되지 않는 이유는 무엇입니까?

분류에서Dev

내 아이콘이 albert launcher에서 올바르게 표시되지 않는 이유는 무엇입니까?

분류에서Dev

Mapbox가지도를 올바르게로드하지 않는 이유는 무엇입니까?

분류에서Dev

Vim이 긴 C 스타일 주석을 올바르게 들여 쓰지 않는 이유는 무엇입니까?

분류에서Dev

내 HeatMap이 올바르게 표시되지 않는 이유는 무엇입니까?

분류에서Dev

내 함수가 요소의 스타일을 올바르게 인식하지 못하는 이유는 무엇입니까?

분류에서Dev

= (단일 같음)을 사용하는 내 같음 비교가 Java에서 올바르게 작동하지 않는 이유는 무엇입니까?

분류에서Dev

내 케이스에서 버튼을 올바르게 표시 / 숨기기하는 방법은 무엇입니까?

분류에서Dev

react-native-gifted-chat이 firebase 타임 스탬프에서 시간을 올바르게 표시하지 않는 이유는 무엇입니까?

분류에서Dev

내 editText가 Android에서 올바른 출력을 표시하지 않는 이유는 무엇입니까?

분류에서Dev

내 시간 데이터가 "형식과 일치하지 않습니다". 내 datetime 형식을 올바르게 지정하는 방법은 무엇입니까?

분류에서Dev

내 출력이 내가 원하는 것을 올바르게 표시하지 않는 이유

분류에서Dev

2 개 이상의 구성 요소가 내부에있을 때 Angular 앱이 배경을 올바르게 설정하지 않는 이유는 무엇입니까?

분류에서Dev

내 코드가 동기화에서 올바르게 작동하지 않는 이유는 무엇입니까?

분류에서Dev

내 스프라이트가 올바르게 그려지지 않는 이유 (libgdx)는 무엇입니까?

분류에서Dev

Python의 line_profiler가 시간을 올바르게 추가하지 않는 이유는 무엇입니까?

분류에서Dev

텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

분류에서Dev

내 반응 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

내 후크 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

분류에서Dev

내 Arc 테마가 Ubuntu 18.04에서 올바르게 보이지 않는 이유는 무엇입니까?

분류에서Dev

내 Linq Oracle DB 쿼리가 타임 스탬프를 datetime과 올바르게 비교하지 않는 이유는 무엇입니까?

분류에서Dev

타이머가 전역 변수를 올바르게 처리하지 않는 이유는 무엇입니까?

Related 관련 기사

  1. 1

    내 TextBoxFor가 통화 값을 올바르게 표시하지 않는 이유는 무엇입니까?

  2. 2

    MySQL이 내 외래 키의 이름을 올바르게 지정하지 않는 이유는 무엇입니까?

  3. 3

    xargs가 내 입력을 올바르게 구문 분석하지 않는 이유는 무엇입니까?

  4. 4

    내 div가 올바르게 쌓이지 않는 이유는 무엇입니까?

  5. 5

    내 Python 코드가 부울을 올바르게 평가하지 않는 이유는 무엇입니까?

  6. 6

    내 함수가 개체 속성을 올바르게 정렬하지 않는 이유는 무엇입니까?

  7. 7

    내 JButton 아이콘이 올바르게 표시되지 않는 이유는 무엇입니까?

  8. 8

    내 아이콘이 albert launcher에서 올바르게 표시되지 않는 이유는 무엇입니까?

  9. 9

    Mapbox가지도를 올바르게로드하지 않는 이유는 무엇입니까?

  10. 10

    Vim이 긴 C 스타일 주석을 올바르게 들여 쓰지 않는 이유는 무엇입니까?

  11. 11

    내 HeatMap이 올바르게 표시되지 않는 이유는 무엇입니까?

  12. 12

    내 함수가 요소의 스타일을 올바르게 인식하지 못하는 이유는 무엇입니까?

  13. 13

    = (단일 같음)을 사용하는 내 같음 비교가 Java에서 올바르게 작동하지 않는 이유는 무엇입니까?

  14. 14

    내 케이스에서 버튼을 올바르게 표시 / 숨기기하는 방법은 무엇입니까?

  15. 15

    react-native-gifted-chat이 firebase 타임 스탬프에서 시간을 올바르게 표시하지 않는 이유는 무엇입니까?

  16. 16

    내 editText가 Android에서 올바른 출력을 표시하지 않는 이유는 무엇입니까?

  17. 17

    내 시간 데이터가 "형식과 일치하지 않습니다". 내 datetime 형식을 올바르게 지정하는 방법은 무엇입니까?

  18. 18

    내 출력이 내가 원하는 것을 올바르게 표시하지 않는 이유

  19. 19

    2 개 이상의 구성 요소가 내부에있을 때 Angular 앱이 배경을 올바르게 설정하지 않는 이유는 무엇입니까?

  20. 20

    내 코드가 동기화에서 올바르게 작동하지 않는 이유는 무엇입니까?

  21. 21

    내 스프라이트가 올바르게 그려지지 않는 이유 (libgdx)는 무엇입니까?

  22. 22

    Python의 line_profiler가 시간을 올바르게 추가하지 않는 이유는 무엇입니까?

  23. 23

    텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

  24. 24

    내 반응 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  25. 25

    내 후크 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  26. 26

    텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

  27. 27

    내 Arc 테마가 Ubuntu 18.04에서 올바르게 보이지 않는 이유는 무엇입니까?

  28. 28

    내 Linq Oracle DB 쿼리가 타임 스탬프를 datetime과 올바르게 비교하지 않는 이유는 무엇입니까?

  29. 29

    타이머가 전역 변수를 올바르게 처리하지 않는 이유는 무엇입니까?

뜨겁다태그

보관