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

This article shows you how the wizard diagram is used in Cesium development, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Sprite diagrams can be used in mapbox-gl, see the official account article mapbox-gl on the use of sprite diagrams. In the development of Cesium, you can also use the wizard diagram. You need to load the picture, write the method, and get the icon information in the wizard diagram. Refer to the spirit diagram and json configuration file in mapbox-gl, and implement the icon extraction method according to this format.

1. With the canvas element of html5, the icon file of Cesium can support loading the image format exported by canvas.

2. Preload the sprite image file and the configured json file

3. In order not to load the picture every time, you can use new Image () to preload the picture; 4. When selecting the icon, set the length and width of canvas according to the size in the configuration file of the icon; 5. Use the drawImage method of canvas to draw the picture on canvas, and the offset of the picture is set according to the offset of the configuration file; 6. Use the toDataURL method of canvas to export the loaded icon 7. Apply the icon to the icon style of Cesium.

The key implementation code: / / load the picture file according to the image path

Let _ image = new Image ()

_ image.src = 'picture path'

_ image.onload = function () {

Console.log (_ image)

}

/ / load the json configuration file, where axios is used

Axios.get ('profile path', {

}) .then (function (response) {

Console.log (response.data)

}) .catch (function (error) {

Console.log (error)

});

/ / canvas load picture settings

_ iconcanvas.width = _ testiconinfo.width

_ iconcanvas.height = _ testiconinfo.height

Let _ context = _ iconcanvas.getContext ("2d")

_ context.drawImage ('picture data',-xoffset,-yoffset)

/ / Cesium load icon file

Viewer.entities.add ({

Name: 'testmarker'

Position: Cesium.Cartesian3.fromDegrees (116.1705217, 39.921786)

Billboard: {

Image:

_ iconcanvas.toDataURL ()

VerticalOrigin: Cesium.VerticalOrigin.BOTTOM}

});

End

Simple load effect picture:

The above is how sprite diagrams are used in Cesium development. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to 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.