Shulou(Shulou.com)06/02 Report--

This article is to share with you about the use of genie diagrams in mapbox-gl, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

When mapbox-gl uses the official style configuration, you need to apply for token before you can use it. At the same time, mapbox-gl is also open source and supports offline deployment. You can configure your own style. In addition to the background configuration, there are two attributes in the style configuration: sprite and glyphs,glyphs are the network path configuration of fonts. If there is a place with text in the map scene, without this configuration, the text will not be displayed; sprite is the configuration of sprite images, which is equipped with some preset icons.

The CSS wizard centralizes all the sporadic background images involved in a web page into a large image, applies the large image to the web page, and locates and displays the icon according to the location and size of the icon. When a user visits the page, it only needs to send a request to the service to request a batch of icons, instead of requesting a single icon multiple times, reducing the amount of requests for the network, although the icon needs to be edited on a web page. But now there are more tools and the workload can be controlled.

The sprite configuration in mapbox-gl includes two files, one is the png picture of the icon, and the other is the json file for each icon name, location, and size.

Pictures on mapbox-gl 's official website:

Synchronized json content information:

In development, when you add an annotation layer, you can load the corresponding icon in mapbox-gl according to the icon name in the json file.

Map.addLayer ({

'id': 'points'

'type': 'symbol'

'source': 'points'

'layout': {

'icon-image': 'convenience-15'

}

});

In the actual project, the wizard diagram can be replaced, the icon used in the project will be made into a collection, in the json file, identify the size and location of the icon, can be called.

Individual icons, mapbox-gl has a way to load, you need to load the icon, give the icon a name, and then can be used.

Map.loadImage ('icon address', function (error, image) {

If (error) throw error

Map.addImage ('kitten', image)

});

In the case of multiple icons, the loading process needs to be performed many times, and you have to wait for the icon to be loaded before you can use it, so it is very convenient to use the wizard diagram method that comes with mapbox-gl.

The above is how the wizard diagram is used in mapbox-gl. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.