Как использовать mapbox добавленное изображение с маркером - PullRequest
Новая
       68

Как использовать mapbox добавленное изображение с маркером

0 голосов
/ 20 сентября 2019

У меня есть пользовательское изображение 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);

Может ли кто-нибудь помочь, как я могу использовать мой «предназначенный значок»?

Примечание: я не хочу добавлять слой.Строго необходимо использовать только маркер.

1 Ответ

0 голосов
/ 23 сентября 2019

addImage - это когда вы хотите добавить изображение к спрайту стиля карты для использования с icon-image.Если вы не хотите использовать слой в стиле , но вместо этого хотите использовать GL JS Marker , тогда вам не нужно использовать addImage, вместо этого вы должны создатьЭлемент HTML (который может использовать SVG, например, см. код Маркер по умолчанию ) и передать этот Маркер.Вам также нужно попробовать проверить, можете ли вы передать элемент canvas в качестве элемента Marker ...

...