OpenLayers 3 之動態點擴散效果

當某個地方發生一些事情之後，如果我們新增乙個靜態點在地圖上，並不能引起注意，那我們可以放置乙個動態的點，類似於在水中投入乙個石頭，水波擴散的效果，象徵發生的事件有一定的影響區域，那麼，我們如何利用 openlayers3 做出這樣的效果呢？我們要實現的效果如下圖，之前雅安發生過**，我們在雅安放置乙個這樣的點，表示雅安發生了**。

圖1 點擴散效果圖

如何實現呢，我們首先想到，在向量圖層中新增乙個點，對其賦予ol.style.icon樣式，然後將的src屬性賦值為一張 gif ，那我們就進行嘗試。

我們首先初始化乙個向量圖層，並新增 icon 樣式，並新增到地圖中：

var gif_vector = new ol.layer.vector()

})});map.addlayer(gif_vector);

然後，我們給向量圖層新增點：

gif_vector.getsource().addfeature(new ol.feature());實現效果並不是預期的情況：

圖2ol.style.icon效果

本以為會出現動態的圖示，結果發現，並沒有，動態的變成了靜態的。這裡的原因，在這篇文章中就不具體展開了，以後會在深入研究中解釋具體原因。那麼，這條路走不通，還有沒有其他的解決辦法呢？我們使用 css3 做出乙個動畫效果，並不是一件難事，但是動畫效果需要依附於乙個 html 元素，我們想到我們使用openlayers實現 popup 效果時，popup 就是乙個 html 元素，其使用的技術就是ol.overlay，那麼，我們試試ol.overlay這條路能否走通。

首先，建立乙個 div 元素，將其形狀限制為圓形，並使用 css3 為其賦予動畫：

html 元素

css3 動畫及其樣式

這樣，在頁面中，其效果如下圖：

圖3 css3點擴散動畫效果

接下來，我們建立乙個 overlay 例項，將這個 html 元素新增到 overlay 中：

var point_div = document.getelementbyid(css_animation);

var point_overlay = new ol.overlay();

map.addoverlay(point_overlay);

point_overlay.setposition([11468382.41282299,3502038.887913635]);

我們來解釋這段**：首先，var point_div = document.getelementbyid(css_animation);獲得具有動畫效果的html元素；然後將其賦予 overlay 的element引數，overlay 還有乙個引數是positioning: 'center-center'，表示 html 元素相對於 overlay 的定位點的方位，」center-center」表示元素中心對準定位點中心；最後map.addoverlay(point_overlay);將 overlay 新增到地圖中，此時的 overlay 是不可見的，最後一行：point_overlay.setposition([11468382.41282299,3502038.887913635]);設定了 overlay 可見元素（也就是具有動畫的元素）的位置，這樣動畫元素就設定到相應的點了。

這樣，我們就實現了原來文章開頭的效果。

這篇文章中，我們為了實現動態點擴散效果，嘗試了兩種方法：一種是為點賦予ol.style.icon樣式，在相應的點覆蓋一張動態 gif ，然而並沒有成功；另一種方法，是使用ol.overlay結合 css3 動畫，實現了相應的效果。

需要注意的是 css3 動畫是需要 ie10+ 、firefox（火狐）、chorme（谷歌）等現代瀏覽器的支援才可以實現，我們知道 openlayers3 利用了 html5 和 css3 的現代瀏覽器技術，也需要 ie9+支援才行。因此，要想得到好的效果，請使用現代瀏覽器。

OpenLayers 3 之動態點擴散效果

Openlayers 3載入XYZ示例

openlayers3 自定義打包

使用OPENLAYERS 3 顯示聚合資料

OpenLayers 3 之 動態點擴散效果

Openlayers 3載入XYZ示例

openlayers3 自定義打包

使用OPENLAYERS 3 顯示聚合資料

相關推薦

OpenLayers 3 之動態點擴散效果