찾다

집 >웹 프론트엔드 >JS 튜토리얼 >leflet.js를 사용하여지도 생성에 대한 초보자 안내서

leflet.js를 사용하여지도 생성에 대한 초보자 안내서

William Shakespeare
William Shakespeare원래의
2025-02-09 10:16:12232검색

코어 포인트 : A Beginner’s Guide to Creating a Map Using Leaflet.js

leaflet.js를 사용하여 기본 맵을 작성하려면 HTML 페이지를 작성하고, 리플렛 라이브러리 파일을 참조하고,지도 데이터를 준비하고 (좌표 및베이스 맵 포함), 리플렛 맵을 설정해야합니다.
    이 튜토리얼은 가장 인기있는 해변을 강조하는 HTML, CSS 및 전단지를 사용하여 아름답고 대화식 남태평양지도를 만드는 방법을 보여줍니다. 나는 Tripadvisor 웹 사이트에서 데이터를 수집하고 2021 년 Travelers 'Choice가 선택한 남태평양에서 10 대 최고의 해변을 편집했습니다. 당신은 흥미로운지도를보고 자신만의지도를 만들고 싶었습니까? 이 흥미 진진한 여정에서 나를 따라 가면 멋진지도를 그리는 방법을 보여주고 전단지로 10 대 최고의 해변을 강조하는 방법을 보여 드리겠습니다.
  • 기본 전단지 맵을 만들기위한 4 단계 :
    • 리플렛을 사용하여 간단한지도를 구축하는 과정은 간단합니다. 일부 HTML 및 JavaScript 기본 사항은 도움이되지만 완전한 초보자라면 걱정하지 마십시오. 이 JavaScript 라이브러리를 사용하는 것은 매우 쉽고이 놀랍고 통찰력있는지도를 만들 때 모든 코드 라인을 단계별로 안내합니다.
    • 1 기본 HTML 페이지를 만듭니다 먼저, 맵 객체를 렌더링하기 위해 HTML 페이지를 만듭니다. 그런 다음

    를 추가하여지도를 잡고 나중에 참조 할 ID (예 : "Map")를 제공하십시오. 다음으로, 너비와 높이를 100VW 및 100VH로 지정하는 스타일 세부 사항을 추가합니다. 이렇게하면지도가 전체 페이지를 차지하게됩니다. <div> 2 <the> 리플렛 라이브러리를 사용하고 있으므로 라이브러리에 필요한 JavaScript 및 CSS 파일을 포함해야합니다. 파일을 직접 다운로드하거나 JavaScript Package Manager (NPM)를 사용하여 로컬로 파일을 설치하거나 CDN에서 관리되는 버전을 사용할 수 있습니다. <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;!DOCTYPE html&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/code&gt;</pre> 참고 : 속성을 ​​통해 브라우저는 검색된 스크립트를 확인하여 소스 코드가 변조 된 경우 코드가로드되지 않도록합니다. <p> <strong> 3 <map> 위도 및 경도와 같은 값을 조정하는 맵을 그립니다. 여기에서 각 데이터 포인트의 위도와 경도를 수집했습니다. 또한 전단지 개발을 위해서는 OpenStreetMap이라는 웹 사이트에서 얻는 Basemap도 필요합니다. </map></strong> </p> 4 <fun> 이제는지도를 만들고 코드를 작성하는 재미있는 부분입니다. 리플렛을 사용하여 완벽하게 작동하는 맵을 작성하는 데 얼마나 많은 코드 라인이 필요한지 믿지 않을 것입니다. 이러한 개발의 용이성과 전단지가 오픈 소스 JavaScript 라이브러리라는 사실은지도 라이브러리 목록에서 높은 순위를 차지합니다. <p> 우선,이 JavaScript 라이브러리의 모든 것은 문자 "L"을 통해 액세스하고 모든 기능이이를 통해 확장된다는 것을 기억하십시오. </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;!DOCTYPE html&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot; integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot; crossorigin=&quot;&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/code&gt;</pre> 맵을 초기화 <p> <em> <decl> 먼저, 맵 변수를 선언하고 리플렛 맵을 사용하여 초기화합니다. 첫 번째 매개 변수는 앞에서 정의 된 <code>integrity의 ID입니다. 두 번째 매개 변수는 맵 중심이 위치하기를 원하는 곳입니다. 마지막은 줌 레벨입니다. 줌 레벨을 3.5로 설정했지만 원하는 레벨로 설정할 수 있습니다. 내지도 에이 매개 변수를 사용하지만지도의 상태, 상호 작용, 애니메이션 및 이벤트를 설정하는 데 사용할 수있는 여러 가지 옵션이 있습니다.

    기본 맵을 추가하십시오

    다음으로, 나는 타일 레이어를 추가했는데, 이는 리플렛 맵의베이스 맵이 될 것입니다. 타일 ​​레이어는 직접 URL 요청을 통해 서버에서 액세스하는 타일 세트입니다. 이 타일 레이어는지도에 지리적 경계를 추가합니다. 대부분의 개발자는이 작업을 잊어 버리기 때문에 이에 대한 속성 텍스트를 포함시켜야합니다.

    기본 태그를 추가하십시오

    나는 해변을 나타내는 자국을 추가했다. 리플렛은이 기능을 기본 기능으로 제공합니다. 10 개의 해변을 전시해야하므로 마커를 별도로 추가하고 각 해변의 위도 및 경도 값을 사용합니다. 봐! 절대적으로 귀엽고 완벽하게 기능적인 전단지 맵이 설정되어 사용할 준비가되었습니다. 전단지 개발이 쉬운가요?

    다음 이미지는 지금까지 모든 것을 보여줍니다.

    A Beginner’s Guide to Creating a Map Using Leaflet.js 이 CodePen에서 전체 코드를 찾을 수 있습니다.

    사용자 정의 전단지 맵

    리플렛 JavaScript 라이브러리의 유용한 기능은 기본 맵을 신속하게 구축 할 수 있으며 맵을 사용자 정의 할 수있는 많은 옵션이 있다는 것입니다. 이 리플렛 맵을보다 유익하고 미학적으로 만들 수있는 네 가지 방법을 보여 드리겠습니다.

    (나머지 부분은 여기에 추가하고 원래 구조 및 내용에 따라 코드 블록을 조정하고 연마하고 자리 표시 자 링크와 그림을 교체하여 그림 위치를 변경하지 않도록해야합니다. 🎜> (마지막으로 요약 부분도 다시 작성하고 그에 따라 연마해야합니다)

위 내용은 leflet.js를 사용하여지도 생성에 대한 초보자 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html npm using map JS 对象 事件
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：유용한 내장 Node.js API다음 기사：유용한 내장 Node.js API

관련 기사

더보기