在 MapTalks 中，如果你希望端點(diǎn)沿線自動旋轉(zhuǎn)的 Marker 圖形樣式，可以使用 `Marker` 類結(jié)合線要素的路徑方向來實(shí)現(xiàn)動態(tài)旋轉(zhuǎn)。下面是一個示例：
// 假設(shè)已經(jīng)引入了 maptalks 庫并創(chuàng)建了地圖實(shí)例
// 定義一個 Marker 的構(gòu)造函數(shù)，其中包含自動旋轉(zhuǎn)的邏輯
function RotatingMarker(path, options) {
this._path = path; // 線要素路徑坐標(biāo)數(shù)組
maptalks.Marker.call(this, path[0], options); // 初始化 Marker 在線的第一個點(diǎn)上
}
RotatingMarker.prototype = new maptalks.Marker();
RotatingMarker.prototype.constructor = RotatingMarker;
// 重寫 'onAdd' 方法，在添加到地圖時計算并設(shè)置 Marker 的旋轉(zhuǎn)角度
RotatingMarker.prototype.onAdd = function (layer) {
maptalks.Marker.prototype.onAdd.call(this, layer);
const angle = this.calculateRotationAngle(this._path);
this.setSymbol({
markerType: 'ellipse',
// 其他 Marker 樣式配置...
rotation: -angle,
// 注意：MapTalks 中旋轉(zhuǎn)是逆時針為正，所以這里通常需要取負(fù)值
});
};
// 計算 Marker 應(yīng)該旋轉(zhuǎn)的角度
RotatingMarker.prototype.calculateRotationAngle = function (path) {
if (path.length < 2) return 0;
const start = maptalks.Coordinate.toPoint(path[0]);
const end = maptalks.Coordinate.toPoint(path[path.length - 1]);
const dx = end.x - start.x;
const dy = end.y - start.y;
const radian = Math.atan2(dy, dx);
const degree = radian * 180 / Math.PI;
return degree;
};
// 創(chuàng)建帶有自動旋轉(zhuǎn) Marker 的線要素
const lineString = new maptalks.LineString(
[
[116.39, 39.9],
[116.40, 39.91],
// 更多坐標(biāo)點(diǎn)...
]
);
// 創(chuàng)建自定義的 RotatingMarker 實(shí)例，并添加到圖層中
const rotatingMarker = new RotatingMarker(lineString.getCoordinates(), {
draggable: false, // 可根據(jù)需求調(diào)整 Marker 是否可拖動
symbol: { // Marker 的基礎(chǔ)樣式
markerType: 'ellipse',
radius: 10,
fillColor: '#ff0000',
fillOpacity: 1,
strokeColor: '#ffffff',
}
});
const vectorLayer = new maptalks.VectorLayer('vector').addTo(map);
vectorLayer.addGeometry(rotatingMarker);這個示例中，我們首先定義了一個繼承自 `maptalks.Marker` 的自定義類 `RotatingMarker`，并在其 `onAdd` 方法中計算起點(diǎn)和終點(diǎn)之間的角度差，并據(jù)此設(shè)置 Marker 的旋轉(zhuǎn)角度。
請注意，上述代碼僅展示了基本思路，實(shí)際應(yīng)用中可能需要處理更多邊界情況，比如多個折線段的情況，以及對 Marker 進(jìn)行動態(tài)更新以適應(yīng)線段的變化等。
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖形樣式 - 端點(diǎn)沿線自動旋轉(zhuǎn)Marker</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [2.3039431874999536, 50.97239313116968],
zoom: 7,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
var layer = new maptalks.VectorLayer('vector').addTo(map);
var line = new maptalks.LineString(
[
[4.460010082031204, 50.41204897711654],
[3.7129397695312036, 51.05869036408862],
[3.2295413320312036, 51.20347195727524],
[1.0872073476562036, 51.27225609350862],
[-0.15424773046879636, 51.5053534272480]
],
{
symbol:{
'lineColor' : '#1bbc9b',
'lineWidth' : 3,
'lineDasharray' : [10, 10],
'markerFile' : 'plane.png',
'markerPlacement' : 'vertex', //vertex, point, vertex-first, vertex-last, center
'markerVerticalAlignment' : 'middle',
'markerWidth' : 30,
'markerHeight' : 30
}
}
).addTo(layer);
</script>
</body>
</html>評論可見，查看隱藏內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Daraz購趣多
