web-dev-qa-db-ja.com

OpenLayersを使用して2点間に線を引きます

LolLatが0,10と30,0の2つのポイントがあります

この時点でマーカーを描画するために、マーカーを生成しながらこの変換を使用します

lonLat.transform(
                 new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                 map.getProjectionObject() // to Spherical Mercator Projection
             )

それらの間に線を引くにはどうすればよいですか？openlayersでそれを行う方法はありますか？ベクターレイヤーのlinestringでそれを試しましたが、うまくいかないようです。

lineopenlayerspoint
13
Rinkal Bhanderi

例えば：

map = new OpenLayers.Map();

var start_point = new OpenLayers.Geometry.Point(0,10);
var end_point = new OpenLayers.Geometry.Point(30,0);

var vector = new OpenLayers.Layer.Vector();
vector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([start_point, end_point]))]);
map.addLayers([vector]);

ライブデモ

20
drnextgis

OpenLayersバージョン3.3では、これを次のように行うことができます。

var points = [ [-89.8802, 32.5804], [-95.04286, 46.9235] ];

for (var i = 0; i < points.length; i++) {
    points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
}

var featureLine = new ol.Feature({
    geometry: new ol.geom.LineString(points)
});

var vectorLine = new ol.source.Vector({});
vectorLine.addFeature(featureLine);

var vectorLineLayer = new ol.layer.Vector({
    source: vectorLine,
    style: new ol.style.Style({
        fill: new ol.style.Fill({ color: '#00FF00', weight: 4 }),
        stroke: new ol.style.Stroke({ color: '#00FF00', width: 2 })
    })
});

次に、マップにレイヤーを追加します

map.addLayer(vectorLineLayer);
22
Pratik Goenka