Leafletjs-vector-layers
LeafletJS-ベクターレイヤー
前の章では、リーフレットでマーカーを使用する方法を学びました。 マーカーとともに、円、多角形、長方形、ポリラインなどのさまざまな形状を追加することもできます。 この章では、Googleマップが提供する図形の使用方法について説明します。
ポリライン
Leaflet JavaScriptライブラリを使用して地図上にポリラインオーバーレイを描画するには、以下の手順に従ってください-
ステップ1 *-<div>要素(文字列またはオブジェクト)とマップオプション(オプション)を渡すことで *Map オブジェクトを作成します。
ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。
ステップ3 *- *Map クラスの* addLayer()*メソッドを使用して、レイヤーオブジェクトをマップに追加します。
ステップ4 *-以下に示すように、ポリラインを描画するポイントを保持する *latlangs 変数を作成します。
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.000538, 81.804034],
[17.686816, 83.218482]
];
ステップ5 *- L.polyline()*を使用してポリラインを作成します。 ポリラインを描画するには、変数として位置を渡し、線の色を指定するオプションを渡します。
//Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});
ステップ6 *- *Polyline クラスの* addTo()*メソッドを使用して、ポリラインをマップに追加します。
//Adding to poly line to map
polyline.addTo(map);
例
以下は、ハイデラバード、ヴィジャヤワダ、ラジャマヘンドラダラム、およびヴィシャカパトナム(インド)の都市をカバーするポリラインを描くコードです。
DOCTYPE html>
<html>
<head>
<title>Leaflet Poly lines</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
//Creating a map object
var map = new L.map('map', mapOptions);
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//Adding layer to the map
map.addLayer(layer);
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.000538, 81.804034],
[17.686816, 83.218482]
];
//Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});
//Adding to poly line to map
polyline.addTo(map);
</script>
</body>
</html>
次の出力を生成します
ポリゴン
Leaflet JavaScriptライブラリを使用して地図上にポリゴンオーバーレイを描画するには、以下の手順に従ってください-
ステップ1 *-<div>要素(文字列またはオブジェクト)とマップオプション(オプション)を渡すことで *Map オブジェクトを作成します。
ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。
ステップ3 *- *Map クラスの* addLayer()*メソッドを使用して、レイヤーオブジェクトをマップに追加します。
ステップ4 *- *latlangs 変数を作成して、ポリゴンを描画するポイントを保持します。
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
ステップ5 *- L.polygon()*を使用してポリゴンを作成します。 位置/ポイントを変数として渡してポリゴンを描画し、オプションを使用してポリゴンの色を指定します。
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
ステップ6 *- *Polygon クラスの* addTo()*メソッドを使用して、ポリゴンをマップに追加します。
//Adding to polygon to map
polygon.addTo(map);
例
以下は、都市ハイデラバード、ヴィジャヤワダ、およびヴィシャカパトナム(インド)をカバーするポリゴンを描画するコードです。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
//Creating a map object
var map = new L.map('map', mapOptions);
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//Adding layer to the map
map.addLayer(layer);
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
//Adding to polygon to map
polygon.addTo(map);
</script>
</body>
</html>
それは次の出力を生成します-
矩形
Leaflet JavaScriptライブラリを使用して長方形のオーバーレイを地図に描画するには、以下の手順を実行します
ステップ1 *-<div>要素(文字列またはオブジェクト)とマップオプション(オプション)を渡すことで *Map オブジェクトを作成します。
ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。
ステップ3 *- *Map クラスの* addLayer()*メソッドを使用して、レイヤーオブジェクトをマップに追加します。
- ステップ4 *-latlangs変数を作成して、マップ上に長方形を描くポイントを保持します。
//Creating latlng object
var latlngs = [
[17.342761, 78.552432],
[16.396553, 80.727725]
];
ステップ5 *- L.rectangle()関数を使用して長方形を作成します。 位置/ポイントを変数として渡し、長方形を描画し、 *rectangleOptions を使用して長方形の色と重さを指定します。
//Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}
//Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);
ステップ6 *- *Polygon クラスの* addTo()*メソッドを使用して、長方形をマップに追加します。
//Adding to rectangle to map
rectangle.addTo(map);
例
以下は、Leaflet JavaScriptライブラリを使用して地図上に長方形を描くコードです。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Rectangle</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
var map = new L.map('map', mapOptions);//Creating a map object
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);//Adding layer to the map
//Creating latlng object
var latlngs = [
[17.342761, 78.552432],
[16.396553, 80.727725]
];
var rectOptions = {color: 'Red', weight: 1} //Creating rectOptions
//Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);
rectangle.addTo(map); //Adding to rectangle to map
</script>
</body>
</html>
それは次の出力を生成します-
サークル
Leaflet JavaScriptライブラリを使用して地図上に円のオーバーレイを描画するには、以下の手順に従います。
ステップ1 *-<div>要素(文字列またはオブジェクト)とマップオプション(オプション)を渡すことで *Map オブジェクトを作成します。
ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。
ステップ3 *- *Map クラスの* addLayer()*メソッドを使用して、レイヤーオブジェクトをマップに追加します。
- ステップ4 *-以下に示すように、円の中心を保持するlatlangs変数を作成します。
//Center of the circle
var circleCenter = [17.385044, 78.486671];
- ステップ5 *-変数circleOptionsを作成して、以下に示すように、オプションcolor、fillColor、およびfillOpacityに値を指定します。
//Circle options
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0
}
ステップ6 *- L.circle()*を使用して円を作成します。 円の中心、半径、および円のオプションをこの関数に渡します。
//Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);
ステップ7 *- *Polyline クラスの* addTo()*メソッドを使用して、上記で作成した円をマップに追加します。
//Adding circle to the map
circle.addTo(map);
例
以下は、都市ハイデラバードの座標を半径とする円を描くコードです。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Circle</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 7
}
var map = new L.map('map', mapOptions);//Creating a map object
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); //Adding layer to the map
var circleCenter = [17.385044, 78.486671]; //Center of the circle
//Circle options
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0
}
//Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);
circle.addTo(map); //Adding circle to the map
</script>
</body>
</html>>
それは次の出力を生成します-