Mapbox GL JS - нарисовать маркер автомобиля

Question

Мне нужно нарисовать маркер автомобиля в зависимости от его положения. Но, в отличие от всех официальных примеров, подобных этому, я хочу, чтобы размер моего маркера зависел от уровня масштабирования. И я хочу, чтобы он также имел курс - мне нужно вращать его в зависимости от курса автомобиля. Возможно ли это с Mapbox GL JS и как это сделать?

Answer 1

Слой символов https://www.mapbox.com/mapbox-gl-js/style-spec лучше всего подходит для этого, см. Этот пример https://www.mapbox.com/mapbox-gl-js / пример / поворотно-регулируемые маркера /

Answer 2

API Mapbox развивается с 2018 года, и теперь вы можете сделать это немного проще:

Во-первых, расширьте класс Marker, чтобы разрешить доступ к частным _rotation свойство:

/* eslint-disable */
import { Marker, MarkerOptions } from 'mapbox-gl';

export class RotatedMarker extends Marker {
  constructor(options?: MarkerOptions) {
    super(options);
  }

  /**
   * Set the element's rotation angle.
   * @param angle Angle in degrees
   */
  setRotation(angle: number): this {
    // @ts-ignore
    this._rotation = angle;
    return this;
  }
}

Тогда просто позвоните setRotation перед обновлением широты / долготы:

const myMarker = new RotatedMarker({
  element: someDivYouMade,
  anchor: 'center',
  rotation: 123, // in degrees
  rotationAlignment: 'map',
});

// When you want to rotate your marker, call this (call both, I'm pretty sure the
// marker won't rotate by just calling setRotation alone.
myMarker.setRotation(cssHeading)
  .setLngLat(carPosition);

Это TypeScript, но если вы удалите типизацию, он будет работать и в Vanilla JS.