OpenLayer——繪製帶箭頭的線
阿新 • • 發佈：2022-11-30
繪製帶箭頭的線，計算相對複雜，多少是有點影響效能了。更簡單的做法：初始、目標點用不同的點進行強調即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <link href="ol/ol.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script> </head> <body> <div id="map" style="width: 100%;height: 100%"></div> <script> var layerVector = new ol.layer.Vector({ source: new ol.source.Vector() }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }) , layerVector ], target:'map', view: new ol.View({ center: [12950000, 4860000], zoom: 7 }) }); /** * 採用閉包的寫法，封裝一個style * @param resolution 比例尺（跟比例尺相關的一個量，暫不明確具體是什麼） * @returns {[*]} */ var featureStyles = function (resolution) { let feature = this; let geometry = feature.getGeometry(); let styles = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 8 }) }) ]; /** * 根據兩個點的座標，找出中間值，在中間繪製箭頭圖示，並且根據兩個點，確定圖示的角度 * * @param start 開始的點 * @param end 結束的點 */ function draw(start, end) { let arrowLonLat = [(parseFloat(end[0]) + parseFloat(start[0])) / 2, (parseFloat(end[1]) + parseFloat(start[1])) / 2]; let dx = parseFloat(end[0]) - parseFloat(start[0]); let dy = parseFloat(end[1]) - parseFloat(start[1]); //旋轉角度計算 let rotation = Math.atan2(dy, dx); feature.set("inRotation", rotation); //設定圖示 styles.push(new ol.style.Style({ geometry: new ol.geom.Point(arrowLonLat), image: new ol.style.Icon({ src: 'img/routearrow.png', anchor: [0.75, 0.5], size: [8, 8], rotateWithView: true, rotation: -rotation }) })); } /** * 取a/b兩個點的n等分點 * @param n 分母 * @param m 分子 * @param p1 a點 * @param p2 b點 * @returns {*[]} */ function dividedPoint(n, m, p1, p2) { return [(p2[0] - p1[0]) / n * m + p1[0], (p2[1] - p1[1]) / n * m + p1[1]] } /** * 遍歷所有的點 */ geometry.forEachSegment(function (start, end) { //求兩點之間的距離，勾股定理的應用 let res = Math.sqrt(Math.pow(Math.abs(end[1] - start[1]), 2) + Math.pow(Math.abs(end[0] - start[0]), 2)); if (res !== 0) { //根據比例尺，算出兩點之間需要繪製的箭頭數量，下面的50是通過測試，獲得的使用者體驗較好的一個值 let n = Math.ceil(res / 50 / resolution); let pre = start; //從第一個點開始繪製，直到繪製完所有的箭頭 let m = 1; while (m <= n) { let next = dividedPoint(n, m, start, end); draw(pre, next); pre = next; m++; } } }); return styles; }; //一條線段 var pointFeature2 = new ol.Feature({ geometry: new ol.geom.LineString([[0, 0], [12950000, 4760000], [12850000, 4760000]]) }); //設定樣式 pointFeature2.setStyle(featureStyles); layerVector.getSource().addFeature(pointFeature2); </script> </body> </html>