리플렛의 geojson

간단한 지오지슨 파일

const geojson = {
 "type": "Feature",
 "properties": {
 "name": "Coors Field",
 "amenity": "Baseball Stadium",
 "popupContent": "This is where the Rockies play!"
 },
 "geometry": {
 type: "Point",
 "coordinates": [-104.99404, 39.75621]
 }
};

geojson 파일을 분석하면 크게 유형(유형), 속성(속성 정보), 지오메트리(형상 정보)의 세 가지 큰 모듈로 나눌 수 있습니다.

리플렛 대 지오지슨

데이터 로드

1. 직접 로드

L.geoJSON(geojson).addTo(map);

1. 리소스를 로드하기 전에 빈 레이어를 선언하세요.

const myLayer = L.geoJSON().addTo(map);
myLayer.addData(geojson);

geojson 스타일 설정

1. 간단한 설정 스타일

const myLines = [{
 "type": "LineString",
 "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
 "type": "LineString",
 "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];
//  
const myStyle = {
 "color": "#ff7800", //  
 "weight": 5, //  
 "opcity": 0.65 //  
};
 L.geoJSON(myLines, {
 style: myStyle
}).addTo(map);

1. 속성을 통해 선택적으로 스타일 설정

const states = [{
 "type": "Feature",
 "properties": {"party": "Republican"},
 "geometry": {
 "type": "Polygon",
 "coordinates": [[
 [-104.05, 48.99],
 [-97.22, 48.98],
 [-96.58, 45.94],
 [-104.03, 45.94],
 [-104.05, 48.99]
 ]]
 }
}, {
 "type": "Feature",
 "properties": {"party": "Democrat"},
 "geometry": {
 "type": "Polygon",
 "coordinates": [[
 [-109.05, 41.00],
 [-102.06, 40.99],
 [-102.03, 36.99],
 [-109.04, 36.99],
 [-109.05, 41.00]
 ]]
 }
}];
L.geoJSON(states, {
 style: function(feature) {
 // 각 그래프 반복
 switch (feature.properties.party) {
 case 'Republican': return {color: "#ff0000"};
 case 'Democrat': return {color: "#0000ff"};
 }
 }
}).addTo(map);

1. 스타일을 설정하는 setStyle 메서드

 layer.setStyle({
 weight: 5,
 color: '#666',
 dashArray: '',
 fillOpacity: 0.7
});

스타일 제거: geojson.resetStyle(layer)

일반적으로 사용되는 내부 메소드

1. onEachFeature: onEachFeature(feature, layer)

기능: 모든 데이터 형식이 지오지슨에 있나요?

레이어: 지오지슨에서 변환된 리플렛 데이터 객체입니다.

기능은 geojson에서 일부 속성 데이터를 읽는 데 사용되며, 레이어는 일부 리플렛 메서드를 마운트하는 데 사용됩니다.

L.geoJSON(geojson, {
 onEachFeature: onEachFeature
}).addTo(map);
function onEachFeature(feature, layer) {
 console.log(feature,layer)
 if (feature.properties && feature.properties.popupContent) {
 layer.bindPopup(feature.properties.popupContent);
 }
};

1. filter

const someFeatures = [{
 "type": "Feature",
 "properties": {
 "name": "Coors Field",
 "show_on_map": true
 },
 "geometry": {
 "type": "Point",
 "coordinates": [-104.99404, 39.75621]
 }
}, {
 "type": "Feature",
 "properties": {
 "name": "Busch Field",
 "show_on_map": true
 },
 "geometry": {
 "type": "Point",
 "coordinates": [-104.98404, 39.74621]
 }
}];
L.geoJSON(someFeatures, {
 filter: function(feature, layer) {
 return feature.properties.show_on_map
 }
}).addTo(map);

1. 특수 포인트 레이어

const geojsonMarkerOptions = {
 radius: 8,
 fillColor: "#ff7800",
 color: "#000",
 weight: 1,
 opacity: 1,
 fillOpacity: 0.8
};
L.geoJSON(geojson, {
 pointToLayer: function (feature, latlng) {
 return L.circleMarker(latlng, geojsonMarkerOptions);
 }
}).addTo(map);