-1

我必须使用 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 属性。

你能建议我一些解决方案吗？

4

1 回答 1

0

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

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                                         
        }),
    });
}
于 2019-01-23T00:57:58.380 回答