SvelteKit의 데이터 파일
SvelteKit용 Git 기반 CMS인 CloudCannon에서 제공했습니다.
데이터 파일을 사용하여 기존 데이터를 가져오거나 이 SvelteKit 자습서에서 전역 데이터를 쉽게 관리할 수 있습니다.
이 마지막 강의에서는 최고의 반려견 공원을 나열하는 지도가 있는 페이지를 만들기 위해 모든 것을 함께 모을 것입니다. 개 산책에 대한 위치 및 기타 메타데이터가 포함된
.json 파일을 생성한 다음 .json 파일을 가져와 지도를 렌더링하는 다른 파일을 생성합니다. 시작하자!JSON 파일 생성
공원의 모든 메타데이터(이름, 위도 및 경도)는 어딘가에 있어야 합니다. 간단하게 유지하기 위해 정적 JSON 파일에 저장할 것입니다. 다음 콘텐츠로 생성
/static/locations.json: [
{
"name": "Rotary Dog Park",
"latitude": "-45.883450",
"longitude": "170.541870"
},
{
"name": "Wakari Dog Park",
"latitude": "-45.8558982",
"longitude": "170.4745478"
},
{
"name": "Kew Park Dog Exercise Area",
"latitude": "-45.8993109",
"longitude": "170.4841993"
},
{
"name": "Jubilee Park",
"latitude": "-45.8792223",
"longitude": "170.4880913"
},
{
"name": "Bayfield Park",
"latitude": "-45.8937276",
"longitude": "170.5249021"
}
]
지도 렌더링
우리는 우리가 가장 좋아하는 개 공원을 출력하기 위해 사이트 어디에서나 사용할 수 있는 재사용 가능한 구성 요소를 만들 것입니다. 우리는 Leaflet이라는 라이브러리를 사용하여 지도와 마커를 생성하므로 먼저 이에 대한 종속성을 설치합니다. 터미널에서 다음을 실행합니다.
npm i -D leaflet
전단지가 설치되어 있으면 작동시킬 수 있습니다. 다음을 사용하여
/src/lib/Map.svelte에 새 맵 구성 요소를 생성해 보겠습니다. <script>
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async () => {
if (browser) {
const response = await fetch(`/locations.json`);
const markers = await response.json();
const L = await import('leaflet');
const map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
.addTo(map);
let bounds = [];
for (let i = 0; i < markers.length; i++ ) {
const marker = L.marker([markers[i].latitude, markers[i].longitude]).addTo(map);
marker.bindPopup(markers[i].name);
bounds.push([markers[i].latitude, markers[i].longitude]);
}
map.fitBounds(bounds);
}
});
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""/>
</svelte:head>
<div id="map" />
<style lang="scss">
#map {
height: 400px;
width: 100%;
}
</style>
여기에서 무슨 일이 일어나고 있는지 이해할 수 있도록 이것을 분해하겠습니다.
먼저 두 개의 스크립트를 가져옵니다.
따라서 이 모든 것이 우리가 올바른 환경에 있고 맵을 초기화할 준비가 되었는지 확인합니다.
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async () => {
if (browser) {
...
}
});
이제 위치를 가져와야 하므로 이전에 생성한
.json 파일에서 위치를 가져옵니다. const response = await fetch(`/locations.json`);
const markers = await response.json();
그런 다음 전단지 라이브러리를 가져오고 지도를 초기화합니다.
const L = await import('leaflet');
const map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
.addTo(map);
그런 다음 마커를 추가하고 경계를 설정하여 지도가 중앙에 배치되고 마커를 확대합니다.
let bounds = [];
for (let i = 0; i < markers.length; i++ ) {
const marker = L.marker([markers[i].latitude, markers[i].longitude]).addTo(map);
marker.bindPopup(markers[i].name);
bounds.push([markers[i].latitude, markers[i].longitude]);
}
map.fitBounds(bounds);
<head>에 바로 추가할 스타일을 포함해야 합니다. <svelte:head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""/>
</svelte:head>
지도를 포함하는 요소를 추가합니다.
<div id="map" />
마지막으로 몇 가지 기본 스타일을 추가합니다.
<style lang="scss">
#map {
height: 400px;
width: 100%;
}
</style>
휴! 여러분의 노력을 살펴보고 여러분이 만든 아름다운 지도를 감상해 보세요.
무엇 향후 계획?
SvelteKit 초보자가 된 것을 축하합니다! 구축할 수 있는 견고한 토대를 제공할 프레임워크의 많은 개념에 대해 높은 수준의 이해가 있어야 합니다. SvelteKit의 세계로의 여행을 계속하려면 다음과 같은 훌륭한 리소스를 추천합니다.
마지막으로 간단히 언급하고 싶습니다CloudCannon. SvelteKit을 최고 수준으로 지원하는 콘텐츠 관리 시스템입니다. Git 리포지토리와 직접 동기화되므로 콘텐츠 팀이 사이트의 콘텐츠를 관리하는 동안 개발 팀이 SvelteKit에서 계속 작업할 수 있습니다. 그것은 두 세계의 최고입니다.
읽어 주셔서 감사합니다. SvelteKit으로 계속 구축하세요!
Reference
이 문제에 관하여(SvelteKit의 데이터 파일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cloudcannon/data-files-in-sveltekit-242e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
