svg 配合cesium使用

2021-08-02 14:22:17 字數 1564 閱讀 8487

---恢復內容開始---

1、svg簡介

在 2003 年一月,svg 1.1 被確立為 w3c 標準。

參與定義 svg 的組織有:太陽微系統、adobe、蘋果公司、ibm 以及柯達。

與其他影象格式相比,使用 svg 的優勢在於:

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

varrectangle;23

4////for highlighting in sandcastle.

cesium.material(11}

12});13}

1415

function createbuttons(scene)

23}]);24}

2526

27function createprimitives(scene) )

34}),

36 aboveground : false

37})

38}));39}

4041

var viewer = new cesium.viewer('

cesiumcontainer');

42var scene =viewer.scene;

4344

45createprimitives(scene);

46 createbuttons(scene);

一定要注意rectangle : cesium.rectangle.fromdegrees(90, 22, 117, 40.0),的座標範圍和svg中viewbox 的範圍之間的關係。

---恢復內容結束---

cesium中使用svg方法封裝

import svglayer from components svglayer.js let svglayer new svglayer viewer let entities let coord 103.858867 31.068476 svglayer.addrotetiontype plac...

svg基本使用

svg 檔案可通過以下標籤嵌入 html 文件 或者 矩形rect x,y width height 圓形circle cx,cy cr 橢圓ellipse cx,cy rx ry 線 line x1,y1,x2,y2 折線 polyline points x1,y1 x2,y2 xn,yn 多邊形...

簡單使用SVG

在前端的工作過程中經常會使用一些圖示。在之前我們曾用過兩種方式 純css,iconfont。使用是一種簡單的方式,然而卻有樣式不好調整,資源較大的缺點。純css只能實現較簡單的圖形,多用before after實現,優點是體積小,缺點是每次使用都是手寫,調整太浪費時間。iconfont是阿里的乙個圖...