2015-02-10 81 views
0

我有一個關於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 
    }) 
}); 

回答

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