Create a map application using PHP and OpenLayers-PHP Tutorial-php.cn

Create a map application using PHP and OpenLayers

王林

Release： 2023-05-11 20:32:02

Original

1085 people have browsed it

With the development of the Internet, more and more applications need to implement map visual display. This article explains how to create a map application using PHP and OpenLayers.

1. Introduction to OpenLayers

OpenLayers is a JavaScript open source library that can display dynamic maps. In addition to displaying standard WMS, WFS and Google Maps, OpenLayers can also display customized maps, display vector data, and support interactive operations such as map zooming in, zooming out, and panning.

2. Set up a development environment

Before creating a map application, you need to set up a local development environment for PHP and OpenLayers.

PHP development environment:

It is recommended to use XAMPP to build a PHP development environment. Download address: https://www.apachefriends.org/download.html. After the installation is complete, enter "localhost" in your local browser.

OpenLayers development environment:

Download the OpenLayers library, unzip it and copy the "ol" folder to the htdocs directory of XAMPP (the default path is C:
mpphtdocs). Library download address: https://openlayers.org/download/.

3. Create a map application

This article takes the map of China as an example to create a basic map application.

1. Create a new HTML file and introduce the OpenLayers library:

<!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>

Copy after login

2. Add a div within the body tag to display the map:

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

Copy after login

3. Create a CSS file, set the width, height and style of the map container:

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

Copy after login

4. Create the map in the JavaScript file, set the center point and zoom level of the map:

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
  })
});

Copy after login

In this code, create Create a new map object and point it to the created map div element. And created a Tile layer and set its source to OpenStreetMap, which displays OSM tiles on the map.

The view object specifies the initial display range of the map. In this example, the initial display has a zoom level of 4 and the center point is set to 105.088 longitude and 36.042 latitude.

5. Run the map application and enter "localhost/map file name.html" in the browser to display the map application.

4. Add vector data

To add vector data to the map, you need to add the source and layer to the JavaScript file. The following are the steps to add province boundary data:

1. Convert the vector data to GeoJSON format. You can use QGIS to convert shp files into GeoJSON format.

2. Create a Vector source in the JavaScript file and use the GeoJSON file as its source:

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

Copy after login

In this code, a new VectorSource object is created and the GeoJSON file is used as its source. url attribute, use ol.format.GeoJSON to read and parse GeoJSON data.

3. Create a new Vector layer and add the Vector source to it:

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)'
    })
  })
});

Copy after login

In this code, a new Vector layer object is created and the Vector source is used as its source Attributes. You can set the style, here you set the line color and width of the province border, as well as the fill color and transparency.

4. Add the Vector layer to the map:

map.addLayer(vectorLayer);

Copy after login

Run the map application and you can see the province boundaries on the China map.

This article covers the basic steps to create a map application using PHP and OpenLayers, adding vector data. I believe this article will be of reference value for developers when building their own map applications.

The above is the detailed content of Create a map application using PHP and OpenLayers. For more information, please follow other related articles on the PHP Chinese website!