Openlayers 3学習心得のLine String

前言
 
LineSteringに関しては、公式の例ではマウスのドットを描いて、自動的に接続して矢印を追加しますが、実際のアプリケーションでは、マークポイントを手動で入力してから、リンクして矢印を追加して、LineSteringを使用する過程を共有します.
 
1.まずは静的データの場合:
 
-まずsourceレイヤーを用意して、点を描きます.
 

var source = new ol.source.Vector();

-そしてマークポイントの情報を入力し、すべての点でフィーチャーを構成します.
 
 

var feature = new ol.Feature({  
  				geometry:new ol.geom.LineString(coordinate1,coordinate2,coordinate3,coordinate4......)
  			});

-そしてfeat ureをsourceに追加します.

source.addFeature(feature);

-次にレイヤーを用意して線と矢印を描きます.
 
 

var vector = new ol.layer.Vector({
    		source: source,
    		style: myStyle
    	});

-ここのmyStyle関数は、線と矢印のスタイルに設定されたスタイルを返します.
 
 

var myStyle = function(feature) {
    		var geometry = feature.getGeometry();
    		var styles = [
    		new ol.style.Style({
    			fill: new ol.style.Fill({
    				color: '#0044CC'
    			}), 
    			stroke: new ol.style.Stroke({  
    				lineDash:[1,2,3,4,5,6],
    				width: 3,  
    				color: [255, 0, 0, 1]  
    			})  
    		})
    		];

    		geometry.forEachSegment(function(start, end) {
    			var arrowLonLat = [(end[0]+start[0])/2,(end[1]+start[1])/2];
    			var dx = end[0]- start[0]; 
    			var dy = end[1] - start[1];
    			var rotation = Math.atan2(dy, dx);
    			styles.push(new ol.style.Style({
    				geometry: new ol.geom.Point(arrowLonLat),
    				image: new ol.style.Icon({
    					src: 'res/arrow.png',
    					anchor: [0.75, 0.5],
    					rotateWithView: true,
    					rotation: -rotation
    				})
    			}));
    		});
    		return styles;
    	};

関数の上のstylaesは線のスタイル設定です.ラインDashは点線を設定します.下のgeometryは矢印です.回転角度を計算する必要があります.私の矢印の写真は右の三角形、arrowLonLatで得られた線の起点と終点の中点です.
 
そして地図層とこのLINE stringのレイヤーvectorを一緒にmapのlayersに入れて完成しました.
 
2.次に新しいマークを動的に追加すると言います.
 
-geometryはグローバル変数に設定できます.
 

var geometry = new ol.geom.LineString();

-そしてappndCoordinateを使って追加点を追加します.
 
 

geometry.appendCoordinate(ol.proj.transform(newPoint, 'EPSG:4326', 'EPSG:3857'));

geometryを設定したら、featureも完成して、その後のいくつかのステップの変数を更新して完成します.
 
3.効果図:
 
 
4.オンライン体験
Openlayers 3-LineStering on-line
 
5.ソースコード:
Openlayer 3-LineStering