Building a simple Web GIS site: using GEOSERVER+POSTGRESQL+POSTGIS+OPENLAYERS3

1 Server Setup

Using tomcat requires you to install Java first. Download the latest version of Java from the official Oracle website:

Http://www.oracle.com/technetwork/java/javase/downloads/index.html

After the installation has finished Java, you need to configure the environment variables. The specific method, please own Baidu. After the installation is successful, you can download the server.

Download the latest version from the Tomcat official website and unzip it under Windows 10 system:

http://tomcat.apache.org/

Open Startup.bat in the bin directory, wait a moment, enter localhost:8080 in the browser, the Tomcat webpage appears, indicating the success of the configuration:

Next you need to open the Tomcat-users.xml file in the Conf directory and change the final message to the following text:

In this way, set the login Tomcat account as: admin, Password: Tomcat.
After the WebApps directory, the manager directory, the Web-inf folder in Web. Xml opens, find <max-file-size>, the first digit of the value from 5 to 8, or 82428800, the same will < The max-request-size> is changed to the upper value. Such as:

This is because GeoServer is larger than 50M and exceeds the default limit.

Next go to geoserver official website to download the latest version:

http://blog.geoserver.org/

Download the war file. In the downloaded package can see the Geoserver.war file, this is the GeoServer server file. Copy this file to the WebApps directory.

Next, restart the Apache-tomcat server, enter localhost:8080 in the browser, click the manager App at the top of the homepage, enter the account: admin and Password: Tomcat to login to the app Manager:

Find the war file to deploy below the Web page, select Geoserver.war files, upload, wait a moment, wait for the upload to succeed. At this point, refresh the page, the above will appear GeoServer application, click to enter the GeoServer home.

You can then set the GeoServer administrator account. Account Admin, password GeoServer. When it appears, the server configuration is successful.

The graph is the first page of GeoServer on the server. You can connect and publish data on this page.

2 Geographic Information data import and publication

In this paragraph, the author will use the Chinese 2014GDP data as an example for the publication of data.

For the import of geographic information data, you need to use a spatial database. In this article, the author uses Postgresql+postgis to accomplish this task. Next, you'll learn more about importing data.

First go to the PostgreSQL official website to download the latest version of the software, recommended 9.5 and previous versions:

https://www.postgresql.org/

Installation needs to remember the database access account and password, for convenience, can be set to Postgres as a test. Set the port to the default value of 5432.

After the installation is complete, you can continue to install PostgreSQL's plug-in management software, which can be installed by selecting PostGIS, or go to PostGIS's official website to download:

http://www.postgis.org/

During the installation process, be careful to check the installation space database. When you need to log in to the PostgreSQL database, use the account password you previously set.

After the installation is complete, open the Pgadmin management tool to manage PostgreSQL.

The first is to connect PostgreSQL, and then you can create a new database by right-clicking the database or by using the SQL statement, as needed.

After the database is established, click the Schema->public-> data table under the database and add the spatial database management plug-in POSTGIS using the SQL statement:

CREATE EXTENSION PostGIS

After the success, refresh, the data table will appear Spatial_ref_sys, indicating that the spatial data can be imported.

Click the plug-in above Pgadmin, select the PostGIS plugin, you can import shp files. Select the Add file, select the SHP file by path, then click Import to import the file.

At this point the data has been imported into the spatial database, you can do the data publishing operations.

Open the browser, go to the GeoServer home page, click on the left side of the workspace (Workspaces), and then click Add New Workspace (add Workspaces) to create a workspace. The purpose of a workspace is to keep data from different data sources together. When setting the URI, set to Http://localhost:8080/CHINA,CHINA is the name of the workspace, so that all related pages are behind the URI.

You can add a new data source by clicking on the data Store (Stores) and then clicking Add New Data Store (the Add new store). As we can see, GeoServer supports a variety of data types. Here we use PostGIS as an example for the release of services.

Click the PostGIS option to enter the data source information page. Click the workspace (Workspace) drop-down option to select a specific workspace, for example, select China in this article.

Next enter the data source name, which is the basis for identifying different data, such as entering GDP in this article.

In the connection parameters, enter host, if the local is localhost, Port 5432, and then enter the database name of the data source in PostgreSQL, then enter the account and password to connect PostgreSQL to complete the database connection.

Click Save at the bottom.

The next step is to publish the specific layer. Click on the layer (Layers) to go to the layer selection screen, and then click Add a new layer (add a resource) to publish the specific layer. After clicking, select the specific data source, the various tables under the data source will appear, select the data table that needs to be published as a layer, click Publish (Publish), then publish.

You can enter the layer name as needed, or you can use the default layer name directly. It is important to note that the definition of a map projection:

Here you can enter a map projection. If the original image does not have a projection, it will not be displayed, where you can click Find and enter the projected code (for example, WGS84 4326). Next, in the range below, click Calculate from Data (Compute from) to calculate the range.

Other text boxes may not be filled in. This is the publication of the layer after it is saved.

To see what's post, click Layer Preview on the left to find what you just posted. GeoServer provides a variety of data formats that can be called. Click Openlayers to see the layers called using openlayers directly.

You can also select WMS and WFS Services in the dropdown box. These also make up the data on the server side.

3 using Openlayers as the front end

The author uses openlayers to write the front-end. Currently the latest version is OPENLAYERS3, you can go to GitHub to download the code:

Https://github.com/openlayers/openlayers

It contains CSS files and JS files, which need to be included in the Web page when writing the front end:

<link rel= "stylesheet" type= "Text/css" href= "Css/ol.css"/>

<script type= "Text/javascript" src= "Scripts/ol.js" ></script>

Its API documentation is available on the official website:

http://openlayers.org/en/latest/apidoc/

You can also refer to the official case study:

http://openlayers.org/en/latest/examples/

In addition, jquery should be downloaded in order to complete the interaction between the front and back ends.

http://jquery.com/download/

You should also add it to your Web page after that.

The core component of the openlayers is map (OL.MAP), which is equivalent to a container of maps. The data for the entire map is displayed through that part.

A layer layer control and a view view control are included in the map, respectively, for the manipulation of the layers data and for the user view. Layer (Ol.layer) controls the visualization of the data, supports tile (tile map), image (image data), vector (vector data) display, and view (Ol.view) controls the center point, magnification, projection, and other settings of the map.

Add a map and display the JS code as follows:

1 <div id="map">
 2 <script>
 3 var format = ‘image/png’;
 4 var bounds = [73.441277, 18.159829,
 5 135.08693, 53.561771];//Scope
 6
 7 //The base map of China's provinces (face)
 8 var ImageMap = new ol.layer.Image({
 9 source: new ol.source.ImageWMS({
10 ratio: 1,
11 //Own service url
12 url: ‘http://localhost:8080/geoserver/CHINA/wms‘,
13 / / set the service parameters
14 params: {
15 ‘FORMAT’: format,
16 ‘VERSION’: ‘1.1.0’,
17 STYLES: ‘‘,
18 //layer information
19 LAYERS: ‘CHINA:china_2014gdp’,
20 }
twenty one             })
twenty two         });
twenty three 
24 //Set map projection
25 var projection = new ol.proj.Projection({
26 code: ‘EPSG: 4326’, // projection coding
27 units: ‘degrees’,
28 axisOrientation: ‘neu‘
29 });
30
31 //Set the map
32 var map = new ol.Map({
33 //The control elements such as the scale in the map
34 controls: ol.control.defaults({
35 attribution: false
36 }).extend([
37 new ol.control.ScaleLine()
38 ]),
39 //Set the displayed container
40 target: ‘map’,
41 //Set the layer
42 layers: [
43 //Add a layer
44 ImageMap
45 ],
46 //Set the view
47 view: new ol.View({
48 //Set projection
49 projection: projection
50 })
51 });
52
53 //Map display
54 map.getView().fit(bounds, map.getSize());
55 </script>
56 </div> 

First you need to define a layer, and this layer calls the WMS Service published by GeoServer, whose data source is the URL of the service, which can be accessed by entering the server, finding the appropriate service, and clicking on the appropriate WMS service to get its URL.

The next step is to set the display format, where the map projection is WGS84, which is code 4326.

Map container maps are created, the layers are added, and the projections are set.

Next, set the initial display range of the map, and finally call the GetView (). Fit function to display the map.

：

Specific code and data can refer to Github:https://github.com/kkyyhh96/webgis

2017.2.24 UPDATE statement: Replace the original English version of the software with the latest Chinese version of the software, insert some new images, add case explanation, modify the code display.

Building a simple Web GIS site: using GEOSERVER+POSTGRESQL+POSTGIS+OPENLAYERS3