[Turf.js]ラインに沿って任意の距離を移動する

スライダーで選択した距離だけ各ライン上に沿ってマーカーが移動します。

サンプル

fetch('../_dataset/line.geojson')
	.then(function(response) {
		return response.json()
	}).then(function(json) {
		draw(json)
	});
	
function draw(geodata){
	var map = L.map('map').setView([36.3221588, 139.00579059999], 15);
	
	//地理院地図レイヤー追加
	L.tileLayer(
		'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
		{
			attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
		}
	).addTo(map);
	
	//ラインレイヤー追加
	var lineLayer = L.geoJson(geodata, {
			style: function(feature) {
				switch (feature.properties.id) {
					case 1: return {color: "#ff0000",opacity:1};
					case 2:   return {color: "#0000ff",opacity:1};
					case 3:   return {color: "#00ff00",opacity:1};
				}
			}
	}).addTo(map);

	//マーカーのスタイルを指定する
	var geojsonMarkerOptions = {
		radius: 8,
		fillColor: "#ff7800",
		color: "#000",
		weight: 1,
		opacity: 1,
		fillOpacity: 0.8
	};	
	
	//マーカーレイヤーを準備
	var markerLayer = L.geoJson(null,  {
		pointToLayer: function (feature, latlng) {
			return L.circleMarker(latlng, geojsonMarkerOptions);
		}
	}).addTo(map);
	
	//マーカーをライン上の任意の位置へ追加する
	 var addMarker = function(meter){
		markerLayer.clearLayers(); //前回のバッファをクリア
		var buffered = geodata.features.map(function(feature){
			return   turf.along(feature, meter/1000, "kilometers");
		});
		markerLayer.addData(buffered);
	};
	
	//スライダーの値が変更された際の処理
	document.querySelector("#range").addEventListener("change", function(){
		var meter = this.value;
		document.querySelector("#meter").innerText = meter;	
		document.querySelector("#meter").textContent = meter; //firefox用
		addMarker(meter);	
	})

	//初回だけchangeイベントをJSで発火させる
	document.querySelector("#range").dispatchEvent(new Event('change'))

}

fetch('../_dataset/line.geojson')

.then(function(response) {

return response.json()

}).then(function(json) {

draw(json)

});

function draw(geodata){

var map = L.map('map').setView([36.3221588, 139.00579059999], 15);

//地理院地図レイヤー追加

L.tileLayer(

'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',

{

attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"

}

).addTo(map);

//ラインレイヤー追加

var lineLayer = L.geoJson(geodata, {

style: function(feature) {

switch (feature.properties.id) {

case 1: return {color: "#ff0000",opacity:1};

case 2: return {color: "#0000ff",opacity:1};

case 3: return {color: "#00ff00",opacity:1};

}

}).addTo(map);

//マーカーのスタイルを指定する

var geojsonMarkerOptions = {

radius: 8,

fillColor: "#ff7800",

color: "#000",

weight: 1,

opacity: 1,

fillOpacity: 0.8

};

//マーカーレイヤーを準備

var markerLayer = L.geoJson(null, {

pointToLayer: function (feature, latlng) {

return L.circleMarker(latlng, geojsonMarkerOptions);

}

}).addTo(map);

//マーカーをライン上の任意の位置へ追加する

var addMarker = function(meter){

markerLayer.clearLayers(); //前回のバッファをクリア

var buffered = geodata.features.map(function(feature){

return turf.along(feature, meter/1000, "kilometers");

});

markerLayer.addData(buffered);

};

//スライダーの値が変更された際の処理

document.querySelector("#range").addEventListener("change", function(){

var meter = this.value;

document.querySelector("#meter").innerText = meter;

document.querySelector("#meter").textContent = meter; //firefox用

addMarker(meter);

})

//初回だけchangeイベントをJSで発火させる

document.querySelector("#range").dispatchEvent(new Event('change'))

}

サンプル

投稿者: shimizu