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