OpenLayer實現路徑運動

近期由於業務的需求，讓我這從未想過要碰web gis的業餘前端開發者，走了web gis的開發道路。功能需求很簡單，但卻也是讓自己難為了好幾天。如，應該選擇那個gis框架，gis框架的相容性如何，直接ie哪些版，能不能簡單到只有一張就行解決問題，等等。。。。。。

在如此多的技術盲點，以及不確定的因素，我開始了征程，現將一些心得做些記錄。

客戶需要的功能就是能在一張gis圖上實現小車根據路徑進行移動，為什麼一定要gis呢(這是客戶指定需求，無語一該)。並且客戶還說底圖要很容易更換，但他想要用gis表現的卻是室內的地理資訊，我也沒辦法用baidu, 高德等現成的gis介面。

針對上述需求，我沒有去了解過多的web gis框架。因為客戶對gis的概念就是能放大，縮小，可以做路徑規劃等。所以我就選擇ol，利用他的靜態(選擇這個是為滿足客戶靈活更新底圖的需求)做gis底圖的功能來解決此問題。

由於是技術驗證**，有些雜亂，現只給出關鍵性**。如有業務需要歡迎共同討論。

此步驟還是相對簡單的，主要用到ol的draw物件，**哪下：

draw(type));
this._draw.on('drawend', (event)=>
if(type != 'icon') return
; let f =event.feature;
f.setstyle(
newstyle(),
text: 
newtext()
})}));
f.type = 'battery';
});this.map.addinteraction(this
._draw);
this._snap = new snap();
this.map.addinteraction(this
._snap);
}

關鍵**在於drawend事件的監聽，如果是linestring情況，就將此feature放在乙個共公變數，方便路徑執行時使用。

此部分就是獲取到3.1步驟的路徑路徑，然後進行解析，因為3.1上的linestring是多個線段的集合，但運動其本質就是改變圖示的座標，使其快速且連續的變化就形成了移動效果。所以這裡有乙個方法進行路徑細分，**如下：

cuttrace()
else
destcroods.push(nextpoint);
}while(curstep * step 
}return
destcroods;
}

其中用到了一些數學上的三角函式和計算方法。此方法最終選乙個根據步長計算後的座標集合。

**如下：

tracerun()
movefeature(event)
let dx, dy, rotation;
if(this.tracecroods[index] && this.tracecroods[index + 1])
dx = bcrood[0] - ecrood[0];
dy = bcrood[1] - ecrood[1];
rotation =math.atan2(dy,dx);
if(rotation > (math.pi / 2))
else
if(rotation < -1 * (math.pi / 2))
else
console.log(dx + ' ' + dy + ' ' +rotation);
let curpoint = this
.tracecroods[index];
var anchor = new
feature(curpoint);
let style = new
style(),
text: 
newtext(),
offsety: -20})
}); 
vcxt.drawfeature(anchor, style);
} 
this
.map.render();
}

此移動**的是用ol的postcompose事件進行實現的，因為render方法執行完成後會觸發postcompose事件，所以就代替了定時器的的實現方案。其中rotation根據兩點座標計算出移**標的斜度、以及移動的方向等，更為影響的展示。

OpenLayer實現路徑運動

openlayer3之高階標註實現

SVG文字沿指定路徑運動

運動模糊的實現

OpenLayer實現路徑運動

openlayer3之高階標註實現

SVG文字沿指定路徑運動

運動模糊的實現

相關推薦