Mapbox GL v.0.54: изменение иконки-изображения на основе клика - PullRequest
Новая
       23

Mapbox GL v.0.54: изменение иконки-изображения на основе клика

0 голосов
/ 30 апреля 2019

Я пытаюсь реализовать однослойный в mapbox-GL, который показывает значки, которые меняются при нажатии.До сих пор я пытался сделать следующее:

Использовать свойство (после предварительной загрузки изображений как активных и неактивных): 

'icon-image': ["case",["boolean", ["feature-state", "clicked"], false],
                                "inactive",
                                "active"
                            ],

И различные версии map.updateImage () длядинамически изменять изображение, отображаемое для каждой точки: 

map.updateImage(`point1`, map.loadImage('/img/pin_active.png'))
map.updateImage(`point1`, 'active')) //with the image being loaded beforehand as 'active'
map.updateImage(`point1`, map.loadImage('/img/pin_active.png', function(error, image) {
                        if (error) throw error;
                        map.addImage(point1, image);
                    }))

Единственное решение, которое работает, - это использование SDF ( mapbox gl, изменить цвет значка ) - но это не работает для моегозначки, которые являются многоцветными (и они становятся довольно уродливыми, так как формат SDF, кажется, плохо масштабируется).

Есть идеи, как к этому подойти?

1 Ответ

0 голосов
/ 01 мая 2019

Хорошо, так что после некоторой дополнительной игры я нашел рабочее решение.Просто оставьте это здесь для того, кто найдет его позже.

Если мы загружаем изображения заранее как активные и неактивные строки: 

            map.loadImage('/img/pin_blue.png', function(error, image) {
                if (error) throw error;
                map.addImage('inactive', image);
            })
            map.loadImage('/img/pin_red.png', function(error, image) {
                if (error) throw error;
                map.addImage('active', image);
            })

, мы можем сделать следующее: 

            let data = {} // object that stores the geojson data
            let points = map.queryRenderedFeatures(e.point, {
                layers: ['projects-point']
            })
            if (points.length) {
                data.map(function(item, index) {
                if (item.id === points[0].id) {
                    data[index].properties.image = 'active'
                }
                else
                    data[index].properties.image = 'inactive'
            })
            map.getSource('projects').setData(this.dataObj.data)
            }
...