>백엔드 개발 >PHP 튜토리얼 >PHP와 Leaflet을 사용하여 지도 애플리케이션 만들기

PHP와 Leaflet을 사용하여 지도 애플리케이션 만들기

WBOY
WBOY원래의
2023-05-11 15:54:371262검색

최근 몇 년 동안 웹 GIS 기술이 점점 더 널리 사용되고 있으며 경량 오픈 소스 JavaScript 지도 라이브러리인 Leaflet은 많은 웹 지도 애플리케이션에서 첫 번째 선택이 되었습니다. PHP 언어로 작성된 웹 애플리케이션은 지도 정보와 지리적 위치 데이터를 웹에 쉽게 표시할 수 있습니다. 이 문서에서는 PHP와 Leaflet을 사용하여 지도 애플리케이션을 만드는 방법을 설명합니다.

  1. 준비

개발에 앞서 몇 가지 개발 도구를 준비해야 합니다. 먼저, PHP 개발 환경을 미리 설치해야 합니다. 본 글의 코드는 PHP7.3.12 버전을 기준으로 개발되었습니다. 둘째, Leaflet 라이브러리를 다운로드해야 합니다. 공식 웹사이트에서 최신 버전의 라이브러리를 다운로드하거나 GitHub에서 소스 코드를 얻을 수 있습니다. 마지막으로, PHP로 개발된 웹 서비스를 빠르게 구축하는 데 도움이 되는 웹 프레임워크를 선택해야 합니다. 이 기사에서는 PHP 프레임워크인 Lumen을 사용하기로 선택했습니다.

  1. 지도 애플리케이션 만들기

(1) Lumen 프로젝트 만들기

Composer를 통해 Lumen을 설치할 수 있습니다. 명령줄에 다음 명령을 입력합니다(Composer가 설치된 경우):

composer create-project --prefer-dist laravel/lumen map-app

이 명령은 현재 파일 디렉터리에 map-app이라는 Lumen 프로젝트를 생성합니다.

(2) 종속성 설치

프로젝트 루트 디렉터리에 들어가서 다음 명령을 실행하여 필요한 종속성을 설치합니다.

composer install

(3) 전단지 통합

웹 사이트에 새 폴더(예: "public")를 만듭니다. 루트 디렉터리로 이동하고 다운로드한 Leaflet 라이브러리 파일을 이 폴더에 추출합니다. Leaflet 라이브러리를 소개하려면 HTML 페이지에 다음 코드를 추가하세요.

<link rel="stylesheet" href="/public/leaflet/leaflet.css" />
<script type="text/javascript" src="/public/leaflet/leaflet.js"></script>

(4) 라우팅 정의

Lumen 프레임워크에서는 일반적으로 라우팅을 사용하여 URL 요청을 처리합니다. "routes" 디렉토리에 "web.php"라는 파일을 생성하고 다양한 프로세서에 해당하는 다양한 URL을 정의합니다. 예:

<?php
$router->get('/', 'MapController@showMap');
?>

다양한 URL 요청을 처리하기 위해 루트 디렉터리에 "MapController.php"라는 파일을 만듭니다. 파일에는 다음 메소드가 포함되어 있습니다.

<?php
namespace AppHttpControllers;

use LaravelLumenRoutingController as BaseController;

class MapController extends BaseController {

  public function showMap() {
    return view('map');
  }

}
?>

이 메소드는 사용자가 "/" URL에 액세스할 때 "map.blade.php"라는 블레이드 템플릿이 그에 따라 표시되도록 지정합니다.

(5) 블레이드 템플릿 정의

Blade는 특정 구문 형식을 사용하여 템플릿 파일을 작성할 수 있게 해주는 매우 인기 있는 PHP 템플릿 엔진입니다. "resources/views" 디렉토리에 "map.blade.php"라는 템플릿 파일을 생성합니다. 파일에는 다음 코드가 포함되어 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/public/leaflet/leaflet.css" />
  <script src="/public/leaflet/leaflet.js"></script>
  <style>
    #mapid { height: 600px; }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
          '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'change me'
    }).addTo(mymap);
  </script>
</body>
</html>

이 템플릿 파일은 Mapbox에서 제공하는 거리 지도 스타일을 사용하여 지도의 초기 위치와 확대/축소 수준을 정의합니다. 여기서 "accessToken"은 자신의 Mapbox 액세스 토큰으로 채워져야 합니다. . 템플릿 파일에서는 "public" 폴더에 소개된 Leaflet 라이브러리 파일도 참조해야 합니다.

(6) 애플리케이션 실행

이제 명령줄에 다음 명령을 입력하여 웹 서버를 시작할 수 있습니다.

php -S localhost:8000 -t public

브라우저에서 "http://localhost:8000"을 방문하여 다음을 보여주는 웹 페이지를 확인하세요. 지도 .

  1. 결론

이 글을 통해 독자들은 PHP와 Leaflet을 사용하여 지도 애플리케이션을 만드는 방법을 배웠습니다. Lumen 프레임워크를 사용하는 방법, Leaflet 라이브러리를 가져오는 방법, 템플릿에서 맵을 만드는 방법, 웹 서버를 시작하는 방법을 배웠습니다. 독자는 이 기사를 사용하여 PHP를 사용하여 웹 GIS 애플리케이션을 만드는 방법에 대한 사전 이해를 얻을 수 있습니다.

위 내용은 PHP와 Leaflet을 사용하여 지도 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.