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

This article mainly introduces "how mapbox-gl creates Marker". In daily operation, I believe many people have doubts about how to create Marker in mapbox-gl. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to create Marker by mapbox-gl". Next, please follow the editor to study!

Mapbox-gl provides two ways to create poi on a map: using the symbol style in the layer (Layers), and the other is in the form of Marker, where the data source of the layer is geojson data, and the Marker is loaded into the map as coordinate points. The difference between the two is: layer (Layers) is suitable for bulk loading poi data, poi can only be displayed in the map as an icon or text, or a mixture of both, the amount of data loaded by poi can reach a lot; Marker is loaded into the map one by one according to coordinates, the style of poi is relatively rich, and it is designed entirely according to the typesetting and css style in html, the amount of data loaded by poi is relatively small. Create a basic native Marker on the map:

Var marker = new mapboxgl.Marker ()

.setLngLat ([30.5,50.5])

.addTo (map)

Through the development and debugging of browsing, we can find that a html element is loaded on the page, and when the map is moved, it can be changed through the transformation parameters such as translate rotate in css to follow the corresponding coordinate points on the map.

In the api of Marker, through the attributes of element, you can set custom html elements, select them from the page document, or create elements through createElement:

Var el = document.createElement ('div')

El.className = 'marker'

At the same time, loading css3 on the elements of html can achieve some better results, while adding dynamic tagging effects. After all, Marker is loaded in the form of html elements, and when there are a lot of clusters in the same place, the page will be a little stuttered, but there will be no such problem with using layers.

At this point, the study on "how to create Marker by mapbox-gl" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.