PHP 및 OpenLayers를 사용하여 지도 애플리케이션 만들기-PHP 튜토리얼-php.cn

PHP 및 OpenLayers를 사용하여 지도 애플리케이션 만들기

王林

풀어 주다： 2023-05-11 20:32:02

원래의

1117명이 탐색했습니다.

인터넷이 발전함에 따라 지도 시각적 표시를 구현해야 하는 애플리케이션이 점점 더 많아지고 있습니다. 이 문서에서는 PHP와 OpenLayers를 사용하여 지도 애플리케이션을 만드는 방법을 설명합니다.

1. OpenLayers 소개

OpenLayers는 동적 지도를 표시할 수 있는 JavaScript 오픈 소스 라이브러리입니다. 표준 WMS, WFS 및 Google 지도를 표시하는 것 외에도 OpenLayers는 맞춤형 지도를 표시하고, 벡터 데이터를 표시하고, 지도 확대, 축소 및 패닝과 같은 대화형 작업을 지원할 수도 있습니다.

2. 개발 환경 설정

지도 애플리케이션을 만들기 전에 PHP 및 OpenLayers용 로컬 개발 환경을 설정해야 합니다.

PHP 개발 환경:

PHP 개발 환경을 구축하려면 XAMPP를 사용하는 것이 좋습니다. 다운로드 주소: https://www.apachefriends.org/download.html. 설치가 완료되면 로컬 브라우저에 "localhost"를 입력하세요.

OpenLayers 개발 환경:

OpenLayers 라이브러리를 다운로드하고 압축을 푼 다음 "ol" 폴더를 XAMPP의 htdocs 디렉터리에 복사합니다(기본 경로는 C:
mpphtdocs입니다). 라이브러리 다운로드 주소: https://openlayers.org/download/.

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

이 문서에서는 중국 지도를 예로 들어 기본 지도 애플리케이션을 만듭니다.

1. 새 HTML 파일을 만들고 OpenLayers 라이브러리를 도입합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="ol/ol.css" type="text/css">
    <script src="ol/ol.js"></script>
    <title>中国地图</title>
  </head>
  <body>
  </body>
</html>

로그인 후 복사

2. 지도를 표시하려면 body 태그 내에 div를 추가합니다.

<div id="map" class="map"></div>

로그인 후 복사

3. CSS 파일을 만들고 너비, 높이 및 스타일을 설정합니다. 지도 컨테이너:

.map {
  width: 100%;
  height: 500px;
}

로그인 후 복사

4 JavaScript 파일에서 지도를 만들고 지도의 중심점과 확대/축소 수준을 설정합니다.

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([105.088, 36.042]),
    zoom: 4
  })
});

로그인 후 복사

이 코드에서는 새 지도 객체가 생성되고 생성된 지도 div 요소를 가리킵니다. 그리고 타일 레이어를 생성하고 그 소스를 지도에 OSM 타일을 표시하는 OpenStreetMap으로 설정했습니다.

뷰 객체는 지도의 초기 표시 범위를 지정합니다. 이 예에서 초기 디스플레이의 확대/축소 수준은 4이고 중심점은 경도 105.088 및 위도 36.042로 설정되어 있습니다.

5. 지도 애플리케이션을 실행하고 브라우저에 "localhost/map file name.html"을 입력하면 지도 애플리케이션이 표시됩니다.

4. 벡터 데이터 추가

지도에 벡터 데이터를 추가하려면 JavaScript 파일에 소스와 레이어를 추가해야 합니다. 지방 경계 데이터를 추가하는 단계는 다음과 같습니다.

1. 벡터 데이터를 GeoJSON 형식으로 변환합니다. QGIS를 사용하여 shp 파일을 GeoJSON 형식으로 변환할 수 있습니다.

2. JavaScript 파일에서 벡터 소스를 생성하고 GeoJSON 파일을 소스로 사용합니다.

var vectorSource = new ol.source.Vector({
  url: 'data/provinces.geojson',
  format: new ol.format.GeoJSON()
});

로그인 후 복사

이 코드에서는 ol.format을 사용하여 새 VectorSource 객체가 생성되고 GeoJSON 파일이 해당 URL 속성으로 사용됩니다. GeoJSON 데이터를 읽고 구문 분석하는 GeoJSON입니다.

3. 새 벡터 레이어를 만들고 여기에 벡터 소스를 추가합니다.

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 204, 51, 0.2)'
    })
  })
});

로그인 후 복사

이 코드에서는 새 벡터 레이어 개체가 생성되고 벡터 소스가 소스 속성으로 사용됩니다. 스타일을 설정할 수 있습니다. 여기서는 지방 경계선의 선 색상과 너비, 채우기 색상과 투명도를 설정합니다.

4. 지도에 벡터 레이어 추가: