openlayers3でMAPの中に直線を引きたい

Question

###前提・実現したいこと
openlayers3でMAPの表示をすることはできました。
しかし、ある座標から目的地までの座標までの直線を引く方法が良くわかりません。
何か良い方法があれば、教えてほしいです。

###発生している問題・エラーメッセージ

###該当のソースコード

$(function(){
	var json = $.getJSON('js/position.json');
	json.done(function(json){
		j.getPosition(json);

		j.getContents(json);

		$(document).on('click','.map_li',function(){
			$('#map').html("");

			var c = $(this).attr('data-id');

			j.cmap(json, c);
		});
	});

	var j = {
		'getContents':function(json){
			var content = "";
			$.each(json,function(i,v){
				content += '<li class="map_li" data-id='+v.id+'>'+v.name+'</li>';
			});
			$('#data-area').append(content);
		},

		'cmap':function(json, id){
			var use;
			$.each(json,function(i,v){
				if (v.id == id) {
					use = v;
					return false;
				}
			});

			var pos = [use.longitude,use.latitude];

			var mimg = 'img/pin2.gif';

			var mpos = [140.869752, 38.24874];

			j.map(json, pos, mimg, mpos);
 
		},

		'getPosition': function(json){
			var pos = [140.869752, 38.24874];
 			var img = 'img/pin2.gif';

			j.map(json, pos, img, pos);
		},

		'map':function(json,pos, ms, mpos){
			
			var _style = new ol.style.Style({
				image:new ol.style.Icon({
					src:'img/pin.gif'
				})
			});


			var m_style = new ol.style.Style({
				image: new ol.style.Icon({
					src: ms
				})
			});

			var _feature = j.makeFeature(json);


			var c_feature = new ol.Feature({
				geometry:new ol.geom.Point(ol.proj.fromLonLat(pos))
			});

			var m_feature = new ol.Feature({
				geometry: new ol.geom.Point(ol.proj.fromLonLat(mpos))
			});

			var _source = new ol.source.Vector({
				features:_feature
			});

			var c_source = new ol.source.Vector({
				features:[c_feature]
			});

			var m_source = new ol.source.Vector({
				features: [m_feature]
			});

			var _layer = new ol.layer.Vector({
				source:_source,
				style:_style
			});

			var c_layer = new ol.layer.Vector({
				source: c_source,
				style:_style
			});

			var m_layer = new ol.layer.Vector({
				source: m_source,
				style: m_style
			});

			var _osm = new ol.layer.Tile({
				source: new ol.source.OSM(),
				crossOrigin:null
			});
			var map = new ol.Map({
				target:'map',
				layers:[
					_osm,
					_layer,
					c_layer,
					m_layer
				],
				view:new ol.View({
					center:ol.proj.fromLonLat(pos),
					zoom:16
				})
			});
		},
		'makeFeature':function(json){
			console.log(json);
			var pos = [];

			$.each(json, function(i, v){
				pos[i] = new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.fromLonLat([v.longitude, v.latitude]))
				});
			});

			return pos;

		}
	}

});

###試したこと
様々なサイトを見ましたが、openlayers3で詳しく記載されているものは、見つけられませんでした。
canvasで直線を引く方法(lineTo、moveTo)を試してみてもうまくいかなかったです。

###補足情報(言語/FW/ツール等のバージョンなど)
javascript(jquery-3.2.1)
html5

Answer 1

これでしょうか？

var stroke = new ol.style.Stroke({
    color: '#3399CC',
    width: 1.25
});

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
        width: 3,
        color: '#3399CC',
    }),
    zIndex: 2
});

---

スタイルのドキュメント
ストロークのドキュメント

Comments

[退会済みユーザー]

申し訳ございませんが、教えていただいたソースコードをどの位置に書けば良いか教えていただけませんか。

[Tomak]

> openlayers3で直線を表示したいです。しかし、その直線を表示させる方法がいまいちわかりません。
回答のソースコードが「直線を引く例」です。

どのようにどこに直線を引きたいのか不明なので回答のしようがありません。

[退会済みユーザー]

申し訳ございませんでした。自分で調べてみようと思います。