Maptiler 的放大和缩小方向错误

Question

我正在尝试在我的 Angular 项目中使用此 API https://docs.maptiler.com/angular/。 我可以创建法线贴图，但是当我放大或缩小时，我的标记会向完全错误的方向移动。

我尝试以数百种不同的方式更改我的 scss 和 .ts。不知道为什么它会出错。 是不是翻译错了位置，为什么呢？

我的 HTML：

<div class="map-wrap">
  <div class="map" #map></div>
</div>

我的组件：

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { Map, MapStyle, Marker, config } from '@maptiler/sdk';
import {getContainingImportDeclaration} from "@angular/compiler-cli/src/ngtsc/reflection/src/typescript";

@Component({
  selector: 'app-main-map',
  templateUrl: './main-map.component.html',
  styleUrls: ['./main-map.component.scss']
})

export class MainMapComponent implements OnInit, AfterViewInit, OnDestroy {
  map: Map | undefined;

  @ViewChild('map')
  private mapContainer!: ElementRef<HTMLElement>;

  ngOnInit(): void {
    config.apiKey = '4oaTVIMMIidsdNOe0mb'; //NOT A REAL KEY
  }

  ngAfterViewInit() {
    const initialState = { lng: 15.421371, lat: 47.076668, zoom: 14 };

    this.map = new Map({
      container: this.mapContainer.nativeElement,
      style: MapStyle.WINTER,
      center: [initialState.lng, initialState.lat],
      zoom: initialState.zoom
    });

    new Marker({color: "#FF0000"})
      .setLngLat([15.421371,47.076668])
      .addTo(this.map);
  }

  ngOnDestroy() {
    this.map?.remove();
  }
}

我的SCSS：

.map-wrap {
  position: relative;
  width: 100%;
  height: 100vh
}

.map {
  top: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

我尝试了很多解决方案的组合，但我不知道出了什么问题。

Answer 1

好像您忘记使用

导入maptiler样式

import '@maptiler/sdk/dist/maptiler-sdk.css';

对于任何使用 SSR 的人：

对我来说，服务器端渲染时样式没有以这种方式导入。在这种情况下，导入 angular.json 中的样式：

        "styles": [,
          "node_modules/@maptiler/sdk/dist/maptiler-sdk.css", 
        ]