我需要根据它的位置绘制汽车标记。但是,与this等所有官方示例不同,我希望我的标记大小取决于缩放级别。并且,我希望它也有标题 - 我需要根据汽车的标题旋转它。是否可以使用Mapbox GL JS,以及如何操作?
答案 0 :(得分:2)
符号图层https://www.mapbox.com/mapbox-gl-js/style-spec#layers-symbol最适用于此,请参阅此示例https://www.mapbox.com/mapbox-gl-js/example/rotating-controllable-marker/
答案 1 :(得分:1)
自2018年以来,Mapbox API一直在发展,您现在可以以更简单的方式做到这一点:
首先,扩展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中工作。