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

我希望第一个点用于Icon和Text，2个点将用于Stroke。使用MultiPoint，要素（图标和文本）被绘制两次 - 在几何体中的每个点处绘制一次。使用LineString，在2个点之间绘制线条和文本，但不绘制图标。

似乎我可以在功能中有一个图标或一行，而不是两者。

Answer 1

您可以执行以下操作：使用包含点和线的geometry collection。然后使用StyleFunction获取点和线，并为它们返回两种不同的样式：

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/

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

1 个答案: