javascript - 为什么我的 Mapbox GL 不能正确显示图块？

问题描述

我正在做一个有角度的项目，我想使用 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());
  }
}

我的索引.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"
  }
}

标签： javascriptangulartypescriptmapboxmapbox-gl-js

javascript - 为什么我的 Mapbox GL 不能正确显示图块？

问题描述

解决方案

推荐阅读