OpenLayers 3直线

Question

我有一个关于OpenLayers 3的问题。我在地图上有两个点，我想在它们之间划一条直线。我该怎么做呢？以下代码绘制了两点，但不是它们之间的界线：（

 var point1 = new ol.geom.Point(ol.proj.transform([5, 52], 'EPSG:4326', 'EPSG:3857'));
var point2 = new ol.geom.Point(ol.proj.transform([-80, 40], 'EPSG:4326', 'EPSG:3857'));

var line = new ol.geom.LineString([ol.proj.transform([5, 52], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([-80, 40], 'EPSG:4326', 'EPSG:3857')]);

var feature1 = new ol.Feature({
    'geometry': point1,
    'i': 1
});

var feature2 = new ol.Feature({
    'geometry': point2,
    'i': 2
});

var feature3 = new ol.Feature({
    'geometry': line
});

var vectorSource = new ol.source.Vector({
    features: [feature1, feature2,feature3]
});

var vector = new ol.layer.Vector({
    source: vectorSource,
    style: [new ol.style.Style({
            image: new ol.style.Circle({
                radius: 3,
                stroke: new ol.style.Stroke({color: 'blue', width: 1})
            })
        })]
});

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                attributions: [new ol.Attribution({
                        html: 'Tiles &copy; <a href="http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer">ArcGIS</a>'
                    })],
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}'
            })
        }),
        vector
    ],
    view: new ol.View({
        center: ol.proj.transform([5, 52], 'EPSG:4326', 'EPSG:3857'),
        zoom: 7,
        minZoom: 3,
        maxZoom: 10
    })
});

Answer 1

如果覆盖样式，则还必须设置线条样式。类似的东西：

style: [new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new ol.style.Circle({
            radius: 3,
            stroke: new ol.style.Stroke({color: 'blue', width: 1})
        })
    })]