웹 애플리케이션 내부의 대화식지도에는 많은 용도가 많이 있습니다. 데이터 시각화에서 관심 지점에 이르기까지지도는 위치의 맥락에서 쉽게 아이디어를 전달할 것으로 예상됩니다.
그러나 가장 어려운 부분은 해당 데이터를지도에서 이해할 수있는 좌표로 변환하는 것입니다. 운 좋게도 Geocoder PHP를 사용하면 다른 Geo-Coding 제공 업체에 연결할 수 있습니다. 간단한 JavaScript 라이브러리 인 Leaflet.js와 결합하여지도 생성은 산들 바람입니다.
키 테이크 아웃
GeoCoder PHP 및 Leaflet.js를 효과적으로 결합하여 웹 애플리케이션 내에서 대화식 맵을 생성하여 맵이 쉽게 이해할 수있는 조정으로 변환합니다.
Geocoder 라이브러리를 사용하면 다른 Geo-Coding 제공자와 연결할 수 있으며, 필요한 경우 응용 프로그램이 데이터를 수신하는 방법을 다시 작성하지 않고도 필요한 경우 어댑터를 전환 할 수 있습니다.
맵의 모양과 상호 작용은 다양한 리플렛 JS 옵션 및 함수를 사용하여 사용자 정의 할 수 있으며, 이러한 기능에 대한 데이터는 PHP를 사용하여 데이터베이스에서 가져온 다음 전단지 JS 함수로 전달할 수 있습니다.
시작
Geocoder PHP 라이브러리를 포함한 작곡가를 사용하는 는 간단합니다
또한 간단한 index.php 파일에 HTML을 추가하여 부트 스트랩을 포함하여 맵을 표시 할 수있는 멋진 환경을 갖도록하겠습니다.
-
지오 코더 설정
Geocoder는 PHP의 Geocoder 라이브러리가 누락 된 것으로 자체적으로 청구합니다. 세 가지 간단한 단계로 사용할 수 있습니다 :
어댑터를 등록하십시오
공급자를 등록하십시오
geocode!
어댑터를 등록하십시오
어댑터는 API를 통해 선택한 공급자에게 데이터를 연결하고 가져 오는 메커니즘 역할을합니다. 일부 어댑터는 CURL 및 소켓과 같이 PHP 5.3 내에서 내장 기능을 사용합니다. Buzz, Guzzle 및 Zend HTTP 클라이언트와 같은 다른 사람들은 Composer 파일에 종속성을 추가 해야하는 타사 오픈 소스 라이브러리를 사용합니다.
지오 코더 라이브러리의 아름다움은 어댑터 단계의 추상화입니다. 응용 프로그램을 수신하는 방법을 다시 작성하지 않고도 필요한 경우 어댑터를 교체 할 수 있습니다. -
이 예에서는 Geocoder PHP 라이브러리 내부에 Curl과 포함 된 Curlhttpadapter 클래스를 사용합니다.
<.> index.php 파일에서 어댑터를 추가하겠습니다 :
공급자를 등록하십시오
Google지도, Bing Maps, OpenStreetMap 및 TomTom을 포함한 Google지도, Bing Maps, Nominatim을 포함하여 Box를 지원하는 많은 지오 코딩 제공 업체가 있습니다.
전체 목록은 Geocoder PHP 저장소의 readme에서 찾을 수 있습니다. 각 클래스로 표시되는 각 제공자는 자체 옵션이 있습니다. 귀하의 요구에 따라 다양한 상황에 대해 여러 제공 업체를 등록 할 수 있습니다. 응용 프로그램은 OpenStreetMap을 사용하여 Costa Rica의 산호세에서 특정 거리를 매핑하고 중국 베이징에서 Baidu를 사용하여 빠른 경로를 찾아야하는 경우 유용 할 수 있습니다.
이 예에서는 Google지도를 사용 하겠지만 앞으로 다른 공급자를 추가하려면 배열에 추가하면됩니다.
지오 코드
이제 새로 인스턴스화 된 $ geocoder 객체 안에 주소를 GeoCode () 메소드로 전달할 수 있습니다. 이것은 이전에 선택한 제공자를 통해 인스턴스화 된 결과 객체를 반환합니다. 이 결과 객체는 getLatitude ()와 getLongitude ()가 사용할 수 있습니다.
leaflet.js
맵은 세 부분으로 구성됩니다 :
타일
상호 작용 계층 (일반적으로 JavaScript 및 CSS를 통한)
데이터 포인트
{
"require": {
"willdurand/geocoder": "*"
}
}로그인 후 복사
데이터 포인트는 내 지오 코더 코드로 일찍 만들어졌습니다. 나는 단순히 리플렛이 기대하는 방식으로 데이터 배열을 포맷해야합니다.
이 간단한 예에서는 PHP가 생성 한 문자열을 통해 내지도에 포함될 JavaScript 변수로 개별 마커를 만들려고합니다.
리플렛은 맵 코드를 기존 DOM 요소에 주입하기 때문에 먼저 HTML 내부의 해당 요소를 정의해야합니다. 우리는 단순히 고유 한 ID로 div를 만들어서 이것을 할 수 있습니다 : <?php
require 'vendor/autoload.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>A simple map with Geocoder PHP and Leaflet.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
<div >
<div >
<h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
</div>
<div >
<div >
</div>
</div>
</div><!-- /row -->
</div> <!-- /container -->
<script></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>로그인 후 복사
그런 다음 내장형 Map () JavaScript 메소드를 호출하여 해당 ID를 전단지에서 타겟팅하고 바닥 글에서 ID를 통과 할 수 있습니다.
이제 우리는지도의 세 부분을 만듭니다. 타일을 등록하려면 내장 Tilelayer () 메소드를 호출하여 속성을 정의하고 원하는 경우 줌 레벨을 정의 한 다음 addto () 메소드를 추가합니다.
마지막으로, 우리는 앞에서 정의한 PHP 배열을 사용하여 맵 데이터를 인쇄하고 맵을 그룹으로 정의하여 해당 데이터 포인트를 중심으로해야합니다. 바닥 글의 자바 스크립트는 다음과 같습니다.
지금까지 얻은 경우 아무 일도 일어나지 않을 것입니다.
이것은 리플렛이 맵 DIV의 높이 또는 너비에 특성을 주입하지 않기 때문에 스타일을 스타일링하고 원하는대로 크기를 조정할 수 있기 때문입니다. 단순히 DIV 높이와 너비를 주시면지도가 나타나야합니다!
결론
Geocoder PHP 라이브러리 및 Leaflet.js를 사용하여 아름답고 대화식지도를 만들 수 있습니다. 가능한 더 많은 고급 사용자 정의가 있으므로 각 프로젝트의 각 문서를 확인하십시오.
이 기사의 데모를 확인하거나 github에서 포크.
Geocoder PHP 및 리플렛 js 에 대한 맵핑에 대한 자주 묻는 질문 (FAQ)
리플렛 js를 php와 통합하려면?
PHP와 리플렛 J를 통합하는 데 몇 단계가 포함됩니다. 먼저 PHP 파일에 리플렛 JS 라이브러리를 포함시켜야합니다. 라이브러리를 다운로드하여 PHP 파일에 연결하거나 CDN을 사용하여 수행 할 수 있습니다. 라이브러리가 포함되면 l.map () 함수를 사용하여 맵을 초기화 할 수 있습니다. 그런 다음 다양한 리플렛 JS 기능을 사용하여 맵에 레이어, 마커 및 기타 기능을 추가 할 수 있습니다. 이러한 기능에 대한 데이터는 PHP를 사용하여 데이터베이스에서 가져온 다음 전단지 JS 기능으로 전달할 수 있습니다.
리플렛 js에서 지구 코딩이란 무엇이며 어떻게 사용됩니까?
지오 코딩은 프로세스입니다. 주소를 지리적 좌표로 변환하여 맵에 마커를 배치하거나지도를 배치하는 데 사용할 수 있습니다. Leaflet JS에서는 Nominatim 또는 Google의 Geocoding API와 같은 지오 코딩 서비스를 사용하여 주소를 좌표로 변환 할 수 있습니다. 좌표가 있으면 l.marker () 함수를 사용하여 지정된 좌표에 맵에 마커를 배치 할 수 있습니다. PHP를 사용하여 내지도의 데이터베이스에서 데이터를 가져 오는 방법은 무엇입니까?
내지도에 대화식 기능을 추가 할 수 있습니까? 리플렛 JS는 대화식 기능을 추가하기 위해 다양한 기능을 제공합니다. 지도에. 예를 들어, l.popup () 함수를 사용하여지도에 팝업을 추가 할 수 있으며, 마커 나 다른 기능을 클릭하면 추가 정보가 표시 될 수 있습니다. L.control.layers () 함수를 사용하여 레이어 컨트롤을 추가 할 수있어 사용자가 다른베이스 레이어와 오버레이 레이어를 전환 할 수 있습니다. 내지도의 모양을 사용자 정의 할 수있는 방법은 무엇입니까?
다양한 리플렛 JS 옵션 및 함수를 사용하여지도의 모양을 사용자 정의 할 수 있습니다. 예를 들어, setView () 함수를 사용하여 맵의 초기 지리적 센터 및 줌 레벨을 설정할 수 있습니다. L.tilelayer () 함수를 사용하여 맵에 타일 레이어를 추가하여 맵의 기본 레이어의 시각적 모양을 결정할 수 있습니다. l.map () 함수의 옵션 매개 변수는 맵의 최대 줌 레벨, 속성 제어를 표시할지 등과 같은 다양한 기타 옵션을 설정하는 데 사용될 수 있습니다. 지오 코딩 서비스를 사용 하는가?
지오 코딩 서비스를 사용할 때 네트워크 문제, 잘못된 입력 또는 서비스의 사용 제한을 초과하는 등 여러 가지 이유로 오류가 발생할 수 있습니다. 이러한 오류는 사용중인 프로그래밍 언어에서 제공하는 오류 처리 기술을 사용하여 처리 할 수 있습니다. 예를 들어, PHP에서는 Try-Catch 문을 사용하여 예외를 포착하고 적절하게 처리 할 수 있습니다. 내지도의 성능을 최적화하는 방법
최적화하는 방법에는 몇 가지가 있습니다. 지도의 성능. 한 가지 방법은 벡터 타일 레이어와 같은 성능에 최적화 된 타일 레이어를 사용하는 것입니다. 또 다른 방법은 예를 들어 클러스터링을 사용하거나 현재 맵보기에 기능 만 표시하여 맵에 표시된 기능의 수를 한 번에 제한하는 것입니다. 효율적인 데이터베이스 쿼리를 사용하고 적절한 경우 결과를 캐싱하여 PHP 코드의 성능을 최적화 할 수 있습니다.
내지도를 반응하게 만드는 방법
맵을 반응하는 방법은 어떻게 반응을 보이게 할 수 있습니까? 다른 화면 크기와 장치에서 올바르게 표시됩니다. CSS 미디어 쿼리를 사용하여 화면 크기를 기반으로 맵 컨테이너의 크기와 레이아웃을 조정하여 달성 할 수 있습니다. 컨테이너 크기가 변경 될 때 리플렛 js map.invalidatesize () 함수를 사용하여 맵의 크기와 위치를 업데이트 할 수 있습니다. 내지도에 사용자 정의 마커를 추가 할 수 있습니까?
l.icon () 함수를 사용하여 사용자 정의 마커를 맵에 추가 할 수 있습니다. 이 기능을 사용하면 마커 아이콘으로 사용할 사용자 정의 이미지를 지정할 수 있습니다. 아이콘의 크기, 앵커 포인트 및 기타 속성을 지정할 수도 있습니다. 그런 다음 l.marker () 함수 옵션으로 전달하여 마커를 만들 때 사용자 정의 아이콘을 사용할 수 있습니다.
Leaflet JS를 사용하여 Geojson 파일에서 데이터를 표시하는 방법은 무엇입니까?
리플렛 JS는 L.geojson () 함수를 제공하며지도의 Geojson 파일의 데이터를 표시하는 데 사용할 수 있습니다. 이 함수는 Geojson 객체를 입력으로 취하고 Geojson 데이터에 의해 설명 된 기능을 포함하는 레이어를 만듭니다. 이 기능은 L.geojson () 함수가 제공하는 다양한 옵션 및 메소드를 사용하여 스타일링 및 상호 작용할 수 있습니다. Geojson 데이터는 PHP 또는 JavaScript를 사용하여 파일 또는 서버에서 가져올 수 있습니다.
위 내용은 Geocoder PHP 및 Leaflet.js로 매핑의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
웹 애플리케이션 내부의 대화식지도에는 많은 용도가 많이 있습니다. 데이터 시각화에서 관심 지점에 이르기까지지도는 위치의 맥락에서 쉽게 아이디어를 전달할 것으로 예상됩니다. 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
