svg 配合cesium使用

---恢复内容开始---

1、svg简介

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

2、svg应用

     svg是一个矢量图，一般的浏览器都会支持svg格式的矢量图片，我认为其中最难理解的就是svg的viewbox、height和width方面

      首先svg的坐标格式是和中国人认为的坐标格式有所不同，svg的x轴和我们一般的坐标系相同（横向右方向为正方向），当时y轴和我们平时立即的相反（纵向下方向为正方向）

      画svg到展示svg到屏幕上一般都是三个步骤，

            第一部：在逻辑空间中（也就是想象着）建立一个坐标系，然后在此坐标系中完成图像的实现，

            第二部：需要一个viewbox（也就是窗口），我们是通过这个窗口来观看你在逻辑空间中实现的图像，也就是窗口的外围都是不透明的，只有viewbox指定的在逻辑空间坐标系的范围内是可以看到我们所画图型处于的那个空间。viewbox中的四个数字(viewbox="0 0 10 10"),的含义是：左上角的x，左上角的y，x在x轴方向的衍射范围，y在y轴正方向的衍射范围。

           第三部：根据width和height的大小来设置要在屏幕上显示的像素的大小，然后在把viewbox中看到的图形（不定是所画的图形，也可能是所画图形的一部分）复制到屏幕上。

3、在cesium中实现把svg图片贴道三维地球上

         

 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);

 

一定要注意rectangle : Cesium.Rectangle.fromDegrees(90, 22, 117, 40.0),的坐标范围和svg图片中viewbox 的范围之间的关系。

 

---恢复内容结束---