LeafletJS-레이어 그룹
레이어 그룹
레이어 그룹을 사용하면 맵에 여러 레이어를 추가하고 단일 레이어로 관리 할 수 있습니다.
아래 단계에 따라 LayerGroup 지도에 추가합니다.
Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.
Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.
Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.
Step 4 − 아래와 같이 각 클래스를 인스턴스화하여 필요한 마커, 다각형, 원 등과 같은 요소 (레이어)를 생성합니다.
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// 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'});Step 5 − 다음을 사용하여 레이어 그룹 생성 l.layerGroup(). 아래와 같이 위에서 생성 된 마커, 다각형 등을 전달합니다.
// Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);Step 6 − 이전 단계에서 생성 한 레이어 그룹을 addTo() 방법.
// Adding layer group to map
layerGroup.addTo(map);예
다음 코드는 마커 3 개와 다각형 1 개를 포함하는 레이어 그룹을 만들어지도에 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Layer Group</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
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// 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'});
// Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
layerGroup.addTo(map); // Adding layer group to map
</script>
</body>
</html>다음 출력을 생성합니다-
레이어 (요소) 추가
다음을 사용하여 피쳐 그룹에 레이어를 추가 할 수 있습니다. addLayer()방법. 이 메서드에 추가 할 요소를 전달해야합니다.
중앙에 하이데라바드 도시가있는 원을 추가 할 수 있습니다.
// Creating a circle
var circle = L.circle([16.506174, 80.648015], 50000, {color: 'red', fillColor:
'#f03', fillOpacity: 0} );
// Adding circle to the layer group
layerGroup.addLayer(circle);다음 출력이 생성됩니다. −
레이어 (요소) 제거
다음을 사용하여 피쳐 그룹에서 레이어를 제거 할 수 있습니다. removeLayer()방법. 이 메서드에 제거 할 요소를 전달해야합니다.
아래와 같이 Vijayawada라는 도시에서 마커를 제거 할 수 있습니다.
// Removing layer from map
layerGroup.removeLayer(vjwdMarker);다음과 같은 출력이 생성됩니다.
기능 그룹
유사하다 LayerGroup그러나 마우스 이벤트를 허용하고 팝업을 바인딩합니다. 다음을 사용하여 전체 그룹에 스타일을 설정할 수도 있습니다.setStyle() 방법.
아래 단계에 따라 피쳐 그룹을 생성하고 맵에 추가합니다.
Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.
Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.
Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.
Step 4 − 아래와 같이 각 클래스를 인스턴스화하여 필요한 마커, 다각형 및 원과 같은 요소 (레이어)를 만듭니다.
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// 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'});>Step 5 − 다음을 사용하여 기능 그룹 생성 l.featureGroup(). 아래와 같이 위에서 만든 마커, 다각형 등을 전달합니다.
// Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);Step 6− 피처 그룹에 스타일을 설정하면 그룹의 각 요소 (레이어)에 적용됩니다. 다음을 사용하여 그렇게 할 수 있습니다.setStyle() 메서드와이 메서드에 색상 및 불투명도 등과 같은 옵션에 값을 전달해야합니다.
위 단계에서 만든 기능 그룹에 스타일을 설정합니다.
// Setting style to the feature group
featureGroup.setStyle({color:'blue',opacity:.5});Step 7 − 다음을 사용하여 팝업을 바인딩합니다. bindPopup() 방법은 아래와 같습니다.
// Binding popup to the feature group
featureGroup.bindPopup("Feature Group");Step 8 − 이전 단계에서 생성 한 기능 그룹을 addTo() 방법.
// Adding layer group to map
featureGroup.addTo(map);예
다음 코드는 마커 3 개와 다각형을 포함하는 기능 그룹을 만들고이를지도에 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Feature Group</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
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
var polygon = L.polygon(latlngs, {color: 'red'}); // Creating a polygon
// Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
featureGroup.setStyle({color:'blue',opacity:.5});
featureGroup.bindPopup("Feature Group");
featureGroup.addTo(map); // Adding layer group to map
</script>
</body>
</html>다음 출력을 생성합니다-
