openlayers vue繪製水流 流動的虛線

2021-10-13 20:58:08 字數 1947 閱讀 5938

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 銷毀 目...