リーフレットを使用して地図上にポリラインを描画したいと思います。マウスとリーフレットを使用してポリラインを描く方法
ユーザーがクリックすると、マウスボタンを保持している - >最初のマーカーを定義しています。私は、適用したい基本的なジェスチャーです。ユーザがマウスボタンを保持し、マウスを動かすと、対応する「ラバーバンド」が表示される。
ユーザーがマウスボタンを離すと、マップに2番目のマーカーが追加され、2つのマーカーが1つの線でリンクされます。
第2のマーカーから開始して、ユーザーは上記と同じ手順を使用して2行目の構築を続けることができます。
最終結果は、ポリラインでリンクされた座標/マーカーのセットである必要があります。あなたがLeaflet.drawプラグインの使用状況を見ることができます
：
としてジュリアン・VとIvanSanchezは、あなたが以下の例ではドローのようなplugins
の一部を実装することができ、と述べました。私はあなたが記述するもののような何も知らない:)
// center of the map
var center = [46.165164, 15.750443];
// Create the map
var map = L.map('map').setView(center,15);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var options = {
position: 'topleft',
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#97009c'
}
},
polyline: {
\t shapeOptions: {
color: '#f357a1',
weight: 10
}
},
// disable toolbar item by setting it to false
polyline: true,
circle: true, // Turns off this drawing tool
polygon: true,
marker: true,
rectangle: true,
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true
}
};
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
map.on('draw:created', function(e) {
var type = e.layerType,
layer = e.layer;
if (type === 'polyline') {
layer.bindPopup('A polyline!');
} else if (type === 'polygon') {
\t layer.bindPopup('A polygon!');
} else if (type === 'marker')
{layer.bindPopup('marker!');}
else if (type === 'circle')
{layer.bindPopup('A circle!');}
else if (type === 'rectangle')
{layer.bindPopup('A rectangle!');}
editableLayers.addLayer(layer);
});html, body, #map { margin: 0; height: 100%; width: 100%; }<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" />
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<div id='map'></div>
</body>
</html>ご迷惑をおかけして申し訳ありません。アドバイスありがとう – BigONotation
@BigONotation問題は、私が助けることができてうれしい:) – Svinjica
それがお役に立てば幸いです。あなたはそれを実装する必要があります。あなたは[Leaflet.draw]（https://github.com/Leaflet/Leaflet.draw）を使ってみてはいかがですか？ –
または他の[描画のようなプラグイン]（http://leafletjs.com/plugins.html#edit-geometries）、本当に。 – IvanSanchez