具有图标、文本和线条的功能

Question

我想要矢量源层中的特征，每个特征都有一个图标、文本和一条线。我可以显示图标和文本，但无法绘制线条。使用不同的几何形状，我可以得到一条带有要绘制的标签但没有图标的线。

这是否可以在不创建其他功能的情况下实现？我应该为特征使用什么几何图形？

这是我用来绘制带有文本的图标的代码：

feature.setGeometry(new ol.geom.Point(
    ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')
));

feature.setStyle([
    new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            opacity: 1.0,
            scale: 0.75,
            src: 'res/ship_a_flash.png',
            rotation: 30.0
        })
    }),
    new ol.style.Style({
        text: new ol.style.Text({
            text: feature.text,
            font: 'bold 20px Times New Roman',
            offsetY: -25,
            fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
            stroke: new ol.style.Stroke({color: 'rgb(255,255,255)', width: 1})
        })      
    })
]);

所以现在我想从第一点开始添加一行。我意识到我需要向几何体添加另一个点，所以我尝试了如下所示的 MultiPoint 和 LineString。

feature.setGeometry(new ol.geom.MultiPoint([
    ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([lon+1, lat+1], 'EPSG:4326', 'EPSG:3857')]
));

feature.setStyle([
    new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            opacity: 1.0,
            scale: 0.75,
            src: 'res/ship_a_flash.png',
            rotation: 30.0
        })
    }),
    new ol.style.Style({
        text: new ol.style.Text({
            text: feature.text,
            font: 'bold 20px Times New Roman',
            offsetY: -25,
            fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
            stroke: new ol.style.Stroke({color: 'rgb(255,255,255)', width: 1})
        })      
    }),
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgb(0,0,0)',
            width: 2,
        })      
    })
]);

我希望第一个点用于图标和文本，第二个点用于描边。使用 MultiPoint，特征（图标和文本）被绘制两次 - 在几何中的每个点一次。使用 LineString，在两点之间绘制一条线和文本，但不绘制图标。

看来我可以在功能中添加图标或线条，但不能同时添加。

Answer 1

您可以执行以下操作：使用 geometry collection which contains a point and a line. Then use a StyleFunction 获取点和线，并 returns 为它们提供两种不同的样式：

var iconFeature = new ol.Feature({
  geometry: new ol.geom.GeometryCollection([
      new ol.geom.Point([0, 0]),
      new ol.geom.LineString([[0,0], [1E6, 1.5E6]])
  ]),
  ...
});

var styleFunction = function(feature, resolution) {
    var geometries = feature.getGeometry().getGeometries();
    var point = geometries[0];
    var line = geometries[1];

    var iconStyle = new ol.style.Style({
      geometry: point,
      image: ...,
      text: ...
    });

    var lineStyle = new ol.style.Style({
      geometry: line,
      stroke: ...
    });

    return [iconStyle, lineStyle];
};

http://jsfiddle.net/p8tzv9ms/11/

具有图标、文本和线条的功能

Feature with Icon, Text, and Line

openlayers-3