svg is used with cesium

1. Introduction to SVG

In January 2003, SVG 1.1 was established as a W3C standard.

The organizations involved in defining SVG are: Sun Microsystems, Adobe, Apple, IBM, and Kodak.

The advantages of using SVG over other image formats are:

SVG can be read and modified by many tools (such as Notepad)
SVG is smaller and more compressible than JPEG and GIF images.
SVG is scalable
SVG images can be printed with high quality at any resolution
SVG can be scaled up without loss of image quality
Text in SVG images is optional and searchable (great for maps)
SVG can run with Java technology
SVG is an open standard
SVG files are pure XML

The main competitor to SVG is Flash.

The biggest advantage of SVG over Flash is compatibility with other standards such as XSL and DOM. Flash, on the other hand, is a proprietary technology that is not open sourced.

2. SVG application

svg is a vector image. General browsers will support vector images in svg format. I think the most difficult thing to understand is the viewbox, height and width of svg.

First of all, the coordinate format of svg is different from the coordinate format that the Chinese think. The x-axis of svg is the same as our general coordinate system (the horizontal right direction is the positive direction). in the positive direction)

There are generally three steps from drawing svg to displaying svg on the screen.

The first part: establish a coordinate system in the logical space (that is, imagine), and then complete the realization of the image in this coordinate system,

The second part: a viewbox (that is, a window) is needed. We use this window to watch the image you implemented in the logical space, that is, the periphery of the window is opaque, and only the range specified by the viewbox is in the logical space coordinate system. Inside is the space where we can see the pattern we draw. The four numbers in the viewbox (viewbox=”0 0 10 10”) mean: x in the upper left corner, y in the upper left corner, the diffraction range of x in the x-axis direction, and the diffraction range of y in the positive direction of the y-axis.

The third part: Set the size of the pixels to be displayed on the screen according to the size of the width and height, and then copy the graphics seen in the viewbox (which may be the drawn graphics, or part of the drawn graphics) to the on the screen.

3. Put svg pictures on the 3D earth in cesium

 1 var rectangle;
 2 
 3 function applyImageMaterial(primitive, scene) {
 4     //Sandcastle.declare(applyImageMaterial); // For highlighting in Sandcastle.
 5     primitive.appearance.material = new Cesium.Material({
 6         fabric : {
 7             type : 'Image',
 8             uniforms : {
 9                 image : '../images/weiduoliya.svg'// '../images/wumenchenglou.svg'
10             }
11         }
12      });
13 }
14 
15 function createButtons(scene) {
16     
17     Sandcastle.addToolbarMenu([{
18        text : 'Image',
19         onselect : function() {
20             applyImageMaterial(rectangle, scene);
21             Sandcastle.highlight(applyImageMaterial);
22         }
23     }]);
24 }
25 
26 
27 function createPrimitives(scene) {
28     rectangle = scene.primitives.add(new Cesium.Primitive({
29         geometryInstances : new Cesium.GeometryInstance({
30             geometry : new Cesium.RectangleGeometry({
31                 rectangle : Cesium.Rectangle.fromDegrees(90, 22, 117, 40.0),//west,south,east,north 2,-50,152,35
32                 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
33             })
34         }),
35         appearance : new Cesium.EllipsoidSurfaceAppearance({
36             aboveGround : false
37         })
38     }));
39 }
40 
41 var viewer = new Cesium.Viewer('cesiumContainer');
42 var scene = viewer.scene;
43 
44 
45 createPrimitives(scene);
46 createButtons(scene);

svg is used with cesium

Guess you like