PHP と OpenLayers を使用して地図アプリケーションを作成する-PHPチュートリアル-php.cn

PHP と OpenLayers を使用して地図アプリケーションを作成する

王林

リリース： 2023-05-11 20:32:02

オリジナル

1116 人が閲覧しました

インターネットの発展に伴い、地図の視覚表示を実装する必要があるアプリケーションがますます増えています。この記事では、PHP と OpenLayers を使用して地図アプリケーションを作成する方法について説明します。

1. OpenLayers の概要

OpenLayers は、動的マップを表示できる JavaScript オープンソースライブラリです。 OpenLayers は、標準の WMS、WFS、Google マップの表示に加えて、カスタマイズされたマップの表示、ベクトルデータの表示、マップのズームイン、ズームアウト、パンなどのインタラクティブな操作をサポートすることもできます。

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 要素をポイントします。そして、Tile レイヤーを作成し、そのソースを OpenStreetMap に設定します。これにより、地図上に OSM タイルが表示されます。

ビューオブジェクトは、マップの初期表示範囲を指定します。この例では、初期表示のズームレベルは 4 で、中心点は経度 105.088、緯度 36.042 に設定されています。

5. 地図アプリケーションを実行し、ブラウザに「localhost/地図ファイル名.html」と入力すると地図アプリケーションが表示されます。

4. ベクターデータの追加

ベクターデータをマップに追加するには、ソースとレイヤーを JavaScript ファイルに追加する必要があります。州境界データを追加する手順は次のとおりです:

1. ベクターデータを GeoJSON 形式に変換します。 QGIS を使用して shp ファイルを GeoJSON 形式に変換できます。

2. JavaScript ファイルで Vector ソースを作成し、GeoJSON ファイルをそのソースとして使用します:

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

ログイン後にコピー

このコードでは、新しい VectorSource オブジェクトが作成され、GeoJSON ファイルがそのソースとして使用されます。 source.url 属性では、ol.format.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. ベクターレイヤーをマップに追加します: