Question

我必须使用OpenLayers在地图上显示多个功能。每个功能必须由2张图像（2个SVG图标）表示。此图标之一必须固定在要素坐标上，但第二个图标必须以固定的像素数量移动。另一个问题是，移位后的对象也必须旋转，并且旋转中心必须是图标的中心，而不是特征的中心。举例来说，我可以说：有一个图标始终指向北方，而另一个图标显示了旋转方向。方向一律必须始终显示在车辆顶部

我尝试使用各种偏移量和锚点，但是我无法精确定位第二个图标

代码是用ExtJS完成的，但我希望它是可读的：所以我正在使用函数fot为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                                         
            }),
        });
    ];

}

现在，如果旋转第二个图标，则它会绕特征中心旋转，而不是围绕其本身旋转。我曾考虑过将新的几何图形添加到第二种样式（点），但在这种情况下，我无法指定几何图形与原始要素中心的偏移量（以像素为单位）。我只能使用坐标，但不知道是否可以将其转换为像素。实际上，预期的解决方案将类似于在可以指定offsetX和offsetY的样式的text属性的情况下。

能否请您建议我一些解决方案？

Answer 1

您可以使用锚点，但是您需要知道缩放图像的大小。按照您的建议使用第二种几何图形很容易，分辨率是每像素的米，只需将其乘以要偏移的像素数即可。

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                                         
        }),
    });
}

打开图层：如何在距中心一定偏移的位置显示svg图标

1 个答案: