PHP と OpenLayers を使用して地図アプリケーションを作成する
- 王林オリジナル
- 2023-05-11 20:31:341079ブラウズ
インターネットの発展に伴い、地図の視覚表示を実装する必要があるアプリケーションがますます増えています。この記事では、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. ベクター レイヤーをマップに追加します:
map.addLayer(vectorLayer);
マップ アプリケーションを実行すると、中国の地図上に州の境界が表示されます。
この記事では、PHP と OpenLayers を使用してマップ アプリケーションを作成し、ベクター データを追加する基本的な手順について説明します。この記事は、開発者が独自の地図アプリケーションを構築する際の参考になると思います。
以上がPHP と OpenLayers を使用して地図アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。