Открытые слои: как отобразить значок SVG для объекта с определенным смещением от центра - PullRequest
Новая
       14

Открытые слои: как отобразить значок SVG для объекта с определенным смещением от центра

0 голосов
/ 22 января 2019

Мне нужно отобразить несколько объектов на карте, используя OpenLayers.Каждая функция должна быть представлена ​​2 изображениями (2 иконки SVG).Один из этих значков должен быть привязан к координатам объектов, а второй должен быть сдвинут с фиксированным количеством пикселей.Дополнительная проблема состоит в том, что сдвинутый должен также вращаться, и центр вращения должен быть центром значка, а не центром объекта.В качестве примера могу сказать: есть значок транспортного средства, который всегда ориентирован на север, а есть другой, который показывает направление вращения.Направление всегда должно быть указано вверху автомобиля

Я пытался использовать различные смещения и якоря, но мне не удалось точно расположить второй значок

Код выполняется с помощьюExtJS, но я надеюсь, что это читабельно: поэтому я использую функцию для установки стиля для ImageVector: 

me.imageVectorSource = new ol.source.ImageVector({
        source: new ol.source.Vector({
            features: me.features
        }),
        style: Ext.bind(me.pointStyleFunction,me)
    });

И функция выглядит так: 

pointStyleFunction: function(feature, resolution) {
var currentStyles = 
    [
        new ol.style.Style({
            //first icon
            image: new ol.style.Icon({
                src: 'resources/img/vehicle.test.svg',
                scale: sc,
            }),
            //text shown below
            text: new ol.style.Text({
                text: textToShow,             
                scale:sc
                fill: new ol.style.Fill({
                     color: 'yellow'
                }),                   
                offsetY: textOffset,
                stroke: new ol.style.Stroke({
                    color: 'black',
                    width: 4
                }),                    
            })
        }),
        //second icon that should be rotated
        var rpIconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                src: 'resources/img/rp.svg',
                scale: sc,
                rotation: rot                                         
            }),
        });
    ];

}

Теперь, если второй значок повернут, он вращается вокруг центра объекта, а не в центре самого объекта.Я думал о добавлении новой геометрии ко второму стилю (Точка), но в этом случае я не могу указать смещение (в пикселях) геометрии от центра исходного объекта.Я могу использовать только координаты, но понятия не имею, возможно ли преобразовать их в пиксели.Фактически, ожидаемое решение будет примерно таким, как в случае со свойством text стиля, где можно указать offsetX и offsetY.

Не могли бы вы предложить мне какое-нибудь решение?

1 Ответ

0 голосов
/ 23 января 2019

Вы можете использовать привязку, но вам необходимо знать размер масштабированного изображения.Использовать вторую геометрию, как вы предложили, легко, разрешение - это метры на пиксель, просто умножьте ее на количество пикселей, на которое вы хотите сместить. 

if (feature.getGeometry().getType() == 'Point') {
    var coordinate = feature.getGeometry().getCoordinates();
    var rpIconStyle = new ol.style.Style({
        geometry: new ol.geom.Point([coordinate[0] + 50*resolution, coordinate[1] + 50*resolution]),
        image: new ol.style.Icon({
            src: 'resources/img/rp.svg',
            scale: sc,
            rotation: rot                                         
        }),
    });
}
...