In order to provide data visualization map in Intranet environment, it is necessary to solve the localization deployment of map tile service first, and then show the map visualization effect as rich as possible under limited conditions. On this premise, a complete set of mapBox solutions were selected.

Ps: Thanks to FoxGIS Server Lite author @Jingsam for his support

Introduction to map knowledge

Before describing the specific scheme, a brief introduction to map knowledge.

Map of tiles

In order to achieve faster map loading efficiency, map resources are mostly loaded in the form of tiles, that is, at different zoom levels, the corresponding tile resources are obtained from the server. Introduction about the principle of tiles

Coordinate system

Now commonly used coordinate system is generally divided into the following three kinds, these three coordinate systems can also be converted to each other

  • WGS84 (Mapbox, Google) : namely the earth coordinate system, the international general coordinate system
  • Gcj-02 (Autonavi, Tencent) : Mars coordinate system, WGS84 coordinate system after the encryption of the coordinate system.
  • Bd-09 (Baidu) : namely baidu coordinate system, gCJ-02 coordinate system encrypted coordinate system.

Map tiles service deployed locally

Introduction to the

Use FoxGIS Server Lite to build vector tile map service

Based on NodeJS and Express, this project is a simple and easy to use vector tile map service software

The @mapbox/ MBtile library is used to process data in MBTiles format using nodeJS and tilelive

How to use it?

You can view the FoxGIS Server Lite documentation

MBTiles format data acquisition

You can obtain it in either of the following ways:

1. Open source and free OSM data can be obtained directly from Download.geofabrik. de

You can also get free or paid OSM data at OpenMaptiles.org

The difference between

Similarities:

  • All data sources are OpenStreetMap (OSM) data

Difference:

  • The former does not provide a map style, while the latter provides a full map style
  • The former provides different levels of fine-grained tile data (without layer merging or data optimization), while the latter provides complete world map tile data (data has been consolidated and optimized)
  • The former is up to date, while the latter provides free tile-based data up to three years old (for a fee, the data is newer)

In addition to some similarities and differences between the two, combined with the current situation, there are the following influencing factors:

1. Integration and processing of map tile data need to understand GIS related knowledge, which costs a lot to learn.

2, map style processing needs to have better design resources, because the characteristics of the map itself, such as zoom in or zoom out of different levels of different content or style, so it is said that the design of a good map, not only from the macro level or from the micro level need the participation of designers, maintenance costs are too high.

Finally, we choose to use the map data and map style provided in the second way.

Tile Service Setup process (local development environment)

The following process uses macOS as an example

1. Preparation

  • Download the FoxGIS Server Lite client
  • inopenmaptiles.orgdownloadMap tile data(Map version: 2017-07-03_PLANet_Z0_Z14)
  • inmaptiler-basic-gl-styleIn this projectstyle.jsonDownload the file to the local PC

2. Decompress the downloaded package to a specified directory and go to the FoxGISs-server-lite-MacOS folder

cd foxgis-server-lite-macos
Copy the code

3. Put the downloaded map into foxGIS – server-lite-MacOS /data/tilesets folder.

4. Replace the relevant content in the downloaded style.json file as follows

# replace tile data request address
# will be
"url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}"
# replace with
"url": "http://localhost:1234/api/tilesets/2017-07-03_planet_z0_z14/tilejson"

Replace the font file and add the Sprite diagram
# will be
 "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}".# replace with
"sprite": "http://localhost:1234/api/sprites/streets/sprite"."glyphs": "http://localhost:1234/api/fonts/{fontstack}/{range}.pbf".Copy the code

5. Modify the font name in style.json

# replace all "text-font" values with ["Open Sans Regular"], as in:
"text-font": ["Noto Sans Regular"].# replace with
"text-font": ["Open Sans Regular"].Copy the code

6. Add the modified style.json file to foxGIS-server-lite-macOS /data/styles folder

7. Run the FoxGIS-server-lite-macOS file directly or run the foxGIS-server-lite-macOS file in the foxGIS-server-lite-macOS folder

Start the tile service
./foxgis-server-lite-macos
Copy the code

8. A message is displayed indicating that the service started successfully

The default service port number is 1234
Listening on port 1234
If you need to change the port number, you can set the environment variable to change it
 export PORT=8080 && ./foxgis-server-lite-macos
Copy the code

Note: If you change the service port number, you also need to change the port number of the requested address in style.json

Complete the above steps, you have successfully run the map tile service, then combined with mapBox can render the map on the page.

Mapbox profile

Supports mobile terminal, desktop terminal and web page, flexible and fast geographic information visualization tool.

How to use it?

Mapbox provides rich document content, we use MapBox GL JS

It is recommended to start with Example

A simple example

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style type="text/css">* {margin: 0;
            padding: 0;
        }
        html.body.#map{
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://localhost:1234/api/assets/mapbox-gl.css" />
    <script src="http://localhost:1234/api/assets/mapbox-gl.js"></script>
</head>
<body>
    <div id="map"></div>
</body>
<script>
    var map = new mapboxgl.Map({
        container: "map".// container id
        style: "http://localhost:1234/api/styles/style".// style URL
        center: [116.40.39.9066].// starting position [lng, lat]
        zoom: 13 // starting zoom
    });
</script>
</html>
Copy the code