У меня есть пользовательское изображение mapbox, добавленное к объекту mapbox, используя:
var myData = {
width: size,
height: size,
data: new Uint8Array(size * size * 4),
onAdd: function() {
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext('2d');
},
render: function() {
var duration = 1000;
var t = (performance.now() % duration) / duration;
var radius = size / 2 * 0.3;
var outerRadius = size / 2 * 0.7 * t + radius;
var context = this.context;
// draw outer circle
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
context.fill();
// draw inner circle
context.beginPath();
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 100, 100, 1)';
context.strokeStyle = 'white';
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
// update this image's data with data from the canvas
this.data = context.getImageData(0, 0, this.width, this.height).data;
// keep the map repainting
mapboxMap.triggerRepaint();
return true;
}
};
mapboxMap.addImage('designed-icon', myData, { pixelRatio: 2 });
Как использовать его в качестве пользовательского значка маркера?
Маркер можно создать, используя URL-адрес фонаизображение как:
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = url(<some-url>);
el.style.width = '10px';
el.style.height = '10px';
var mrk = new mapboxgl.Marker(el);
mrk.setLngLat(<lng>, <lat>);
mrk.addTo(mapboxMap);
Может ли кто-нибудь помочь, как я могу использовать мой «предназначенный значок»?
Примечание: я не хочу добавлять слой.Строго необходимо использовать только маркер.