Question

我正在显示不同的图层以在地图上显示点，请参见https://www.corobori.com/sos/TestMap3.html。

我的客户希望看到更传统的标记。

下面是我的代码显示蓝色圆圈

var layer1 = new ol.layer.Vector
        (
        {
            source: new ol.source.Vector(
                {
                    features: [new ol.Feature(
                        {
                            geometry: new ol.geom.Point(ol.proj.fromLonLat([-71.4155802, -36.9046117]))
                        }
                    )]
                })
        }
        );

使用外部png文件而不是圆形该怎么做？

Answer 1

您可以在ol.layer.Vector内部添加样式选项，如下所示：

let vector = new ol.vector.Layer({
        source: source,
        features: youFeatures,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#343434',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 4,
                fill: new ol.style.Fill({
                    color: 'rgba(28,255,43,0.82)'
                })
            })
        })
    });

因此您可以指定要绘制的笔触和特征的填充，并在image选项中可以指定点的样式。

您也可以使用自定义图标来更改this example中的image选项

image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.95,
                src: 'data/icon.png'
              }))

如何使用其他图形作为标记

1 个答案: