OpenLayers 3 прямая линия

У меня вопрос по 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
    })
});

person machro    schedule 10.02.2015    source источник


Ответы (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})
        })
    })]
person tsauerwein    schedule 12.02.2015