Shulou(Shulou.com)05/31 Report--

How to make vector tile with map artifact maputnik support geoserver, I believe that many inexperienced people do not know what to do about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

I have always wanted to build a vector map matching tool like Baidu and Amap.

Baidu personalized map matching tool:

Gaud Custom Map matching tool:

I looked for it on the Internet several times, but I couldn't find it.

Inadvertently learned about Maputnik from this blog, after a period of fiddling, I felt that it was too late to meet each other. Yes! That's what I'm looking for.

What is Maputnik? What's the use?

Maputnik is Mapbox style specification open source visual editor, it and Mapbox mapbox studio, Baidu map personalized map editor, Amap custom map editor does the same thing, are used to edit vector tile map style, with graphics with.

With Maputnik, you can publish maps in this way.

Using geoserver to publish vector tiles

Configure the map style for the above vector tiles with Maputnik

Use mapbox to call vector tiles, and apply the above map style to render the map display in the foreground

Compared with mapbox studio, Maputnik is open source and can be used locally for free. You no longer need to upload your map data to mapbox's server. Accordingly, you are not subject to the restrictions on the amount of data uploaded per month and the number of map calls imposed by mapbox free accounts.

Maputnik official website: https://maputnik.github.io/

Maputnik github address: https://github.com/maputnik/editor

Maputnik official online experience address: https://maputnik.github.io/editor/

The background of the creation of Maputnik, the author is to create a standard mapbox open source GIS solution.

Problems encountered

I encountered a problem when loading vector tiles published by geoserver with Maputnik1.7.0 version, and the loaded layer did not show. This problem perplexed me for several days. When I went to Baidu and Google online, there was very little related information and there was no answer.

Do you have to pass by like this when you finally encounter a weapon? No, I won't allow it!

Kungfu live up to the dedicated people, after several days of twists and turns, I finally found the problems, the following details.

Troubleshoot the problem

Found that the map is not displayed, they habitually opened the browser developer tools, found that when zooming, dragging the map, the browser to request tiles, but without success.

Copy one of the request addresses, open it separately in the browser, and see that the error message returned by geoserver is that the requested tile is out of the data range.

The api of Maputnik Maps uses mapboxgl, so calling the published vector tiles directly with mapboxgl may make it easier to troubleshoot the problem. There are still a lot of articles about mapboxgl calling geoserver vector tiles on the Internet. I write an example with reference. Run the example, and the result tile can be correctly requested and displayed.

Code:

Var map = new mapboxgl.Map ({container: 'map', style:' mapbox://styles/mapbox/light-v10', zoom: 3, center: [108.34942054748535]}) Map.on ('load', function () {map.addLayer ({"id": "mapillary", "type": "line", "source": {"type": "vector",' scheme':'tms' "tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],}," source-layer ":" city_region " "paint": {"line-opacity": 0.6, "line-color": "rgb (53,175,109)", "line-width": 2}}, 'waterway-label') });

Effect:

This is interesting because there seems to be a problem with the invocation configuration of Maputnik. Open the browser developer tool and find that the number in the tile address requested by the example is much higher than that in maputnik.

Drag the map in maputnik. Find the same tile number as in the example, and find that the map has run to the southern hemisphere.

What could be the cause of this? could it be due to the difference in the size of the requested tiles, such as one for 256x256 and one for 512x512? usually this situation will also lead to the above problems, and the number will be exactly half the difference.

But now the number does not seem to be half, so how many vector tiles are released by geoserver? What are the rules for requests in Maputnik? With this doubt in mind, I decided to study mapboxgl's api to see if I could find anything.

In the code in the example above, the data source is configured through source

"source": {"type": "vector", 'scheme':'tms', "tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],},"

There are three parameters. The meaning of type and tiles is easy to understand. What does scheme mean?

Check out the api of mapboxgl. The explanation for scheme is as follows:

What does this xyz and tms mean respectively?

Baidu later felt that this blog made it clear that they are two protocols for requesting tiles, and different protocols have different rules for tile numbering. In the xyz protocol, Y is calculated from the top, while in the tms protocol, Y is calculated from the bottom. Mapboxgl uses the xyz protocol by default, while geoserver publishes the tms protocol. So when calling, you need to define scheme as tms.

The problem is found here, and I feel like I have seen the dawn of dawn.

Will there be the same error as Maputnik if you set scheme to xyz in the example? After trying, the answer is yes, the map also went to the southern hemisphere.

The truth is clear, because there is no option to configure scheme on the Maputnik interface, and scheme defaults to xyz protocol, so it only supports xyz protocol, not tms protocol, so it cannot request tiles and the map cannot be displayed correctly.

How to solve

When the problem is found, the next step is how to solve it. There are two ideas:

Geoserver publishes a xyz protocol vector tile service.

Modify the source code of Maputnik and add the option of scheme to support the tms protocol.

Train of thought one looked for a circle, did not find the relevant tutorials, personally feel that idea 2 is simpler, as long as the red box in the following picture to add a drop-down box to select scheme can solve the problem

Download the source code of maputnik, do some research, and find that you can modify the following two locations:

1. Add a drop-down box control here

2. Set the default value for scheme here

Ok, come on, take two steps.

One step

Two steps

Haha, the effect is leveraged! The problem is solved perfectly.

Maputnik is a vector tile matching tool, can replace mapbox studio, free to use.

Maputnik only supports vector tiles of xyz protocol by default, but does not support vector tiles of tms protocol issued by geoserver.

Maputnik's map api uses mapboxgl,mapboxgl to support the tms protocol by setting the scheme option of source.

By modifying the Maputnik source code and adding the scheme option, you can make Maputnik support the tms protocol vector tiles issued by geoserver.

Source code

Maputik source code that supports tms vector tiles

After reading the above, have you mastered how to make the vector tile and drawing artifact maputnik support geoserver? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.