openlayers繪製流動的虛線和canvas繪製流動虛線原理類似,利用linedash屬性繪製一組線段和間距交替的虛線,然後利用偏移量,利用定時器迴圈,最後就可以實現水流效果;
話不多說直接上**
"box"
>
"map"
>
<
/div>
<
/div>
<
/template>
import map from
"ol/map"
;import view from
"ol/view"
;import
from
"ol/style"
;import
from
"ol/geom"
;import
from
"ol/source"
;import
from
"ol/layer"
;import feature from
'ol/feature'
;import geojson from
"ol/format/geojson"
;export
default)]
, view:
newview()
});var style=
newstyle()
});var newsource=
newvectorsource()
var newvector=
newvectorlayer()
//第二個直線資料,手動新增的位置資料
var line=
newlinestring([
[125.346473
,43.89179],
[116.617835
,39.981154],
[124.368689
,40.115714]]
)var source=
newvectorsource()
var outlinestroke=
newstyle()
})function
getanimationstrokestyle()
)})}
//手動新增資料的向量資料
var feature =
newfeature()
;function
getstyle()
var array=
feature.
setstyle
(getstyle()
) source.
addfeature
(feature)
var flightslayer=
newvectorlayer()
; map.
addlayer
(flightslayer)
map.
addlayer
(newvector)
setinterval((
)=>
,100);
newvector.
getsource()
.on('addfeature'
,function
(event)
,100);
}})}
};<
/script>
#box
#map
<
/style>效果如圖所示:
上面的**是繪製兩段流動的虛線,一段是從.geojson檔案獲取的資料路徑,資料的內容就是geojson檔案繪製路徑的資料,另一段是自己手動新增的路徑,
繪製圓心 SVG 繪製圓形
本節我們來學習如何在 svg 中繪製圓形,圓形也是 svg 的基本形狀之一,我們可以通過元素來繪製原型。要繪製圓形可以通過元素來實現,在繪製圓形時,我們需要確定這個圓的圓心及半徑。其中確定圓心需要用到cx屬性和cy屬性,半徑需要用到r屬性。除此之外,還可以使用fill屬性圓進行顏色填充,stroke...
繪製矩形 canvas 繪製矩形及弧形
矩形是唯一一種可以直接在 2d 上下文中繪製的形狀。與矩形有關的方法包括 fillrect strokerect 和 clearrect 這三個方法都能接收 4 個引數 矩形的 x 座標 矩形的 y 座標 矩形寬度和矩形高度 首先,fillrect 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色...
繪製矩形php,PHP如何繪製直線 矩形 圓形
本文是php繪圖的入門級教程,主要介紹php繪圖的基本步驟和如何繪製直線 矩形 圓形。php繪圖的基本步驟,有四步 php.ini裡的 extension php gb2.dll 元件首先需要啟用 1 建立畫布 2 畫出所需要的影象 圓 直線 矩形 扇形 弧線.3 輸出到網頁,或者另存 4 銷毀 目...