我目前正在使用传单使用画布在传单地图上绘制一堆线。但是,我在使用画布在线条上绘制箭头时遇到问题。
我找到了诸如polyline decorator之类的项目,但是它非常慢,我只希望箭头在指定的缩放距离(> = 13)可见。
请问如何使用传单?我不必具有可重复的箭头,而只是一种显示坡线方向的方法。
谢谢。
答案 0 :(得分:1)
我知道这个答案为时已晚,但它可以实现良好的性能,并且没有任何插件。
您可以将图标(当前是三角形箭头(▶))更改为所需的任何东西,并且其初始方向应朝向右侧(零度角)。
您还可以更改要显示的箭头数(在本示例中为5)
CSS代码:
.arrow-icon {
width: 14px;
height: 14px;
}
.arrow-icon > div {
margin-left: -1px;
margin-top: -3px;
transform-origin: center center;
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
这是Javascript代码。getArrows
函数接受折线的坐标数组(以及每行的可选参数颜色和可选参数箭头数)并返回标记数组(只需复制并粘贴所有内容):
function getArrows(arrLatlngs, color, arrowCount, mapObj) {
if (typeof arrLatlngs === undefined || arrLatlngs == null ||
(!arrLatlngs.length) || arrLatlngs.length < 2)
return [];
if (typeof arrowCount === 'undefined' || arrowCount == null)
arrowCount = 1;
if (typeof color === 'undefined' || color == null)
color = '';
else
color = 'color:' + color;
var result = [];
for (var i = 1; i < arrLatlngs.length; i++) {
var icon = L.divIcon({ className: 'arrow-icon', bgPos: [5, 5], html: '<div style="' + color + ';transform: rotate(' + getAngle(arrLatlngs[i - 1], arrLatlngs[i], -1).toString() + 'deg)">▶</div>' });
for (var c = 1; c <= arrowCount; c++) {
result.push(L.marker(myMidPoint(arrLatlngs[i], arrLatlngs[i - 1], (c / (arrowCount + 1)), mapObj), { icon: icon }));
}
}
return result;
}
function getAngle(latLng1, latlng2, coef) {
var dy = latlng2[0] - latLng1[0];
var dx = Math.cos(Math.PI / 180 * latLng1[0]) * (latlng2[1] - latLng1[1]);
var ang = ((Math.atan2(dy, dx) / Math.PI) * 180 * coef);
return (ang).toFixed(2);
}
function myMidPoint(latlng1, latlng2, per, mapObj) {
if (!mapObj)
throw new Error('map is not defined');
var halfDist, segDist, dist, p1, p2, ratio,
points = [];
p1 = mapObj.project(new L.latLng(latlng1));
p2 = mapObj.project(new L.latLng(latlng2));
halfDist = distanceTo(p1, p2) * per;
if (halfDist === 0)
return mapObj.unproject(p1);
dist = distanceTo(p1, p2);
if (dist > halfDist) {
ratio = (dist - halfDist) / dist;
var res = mapObj.unproject(new Point(p2.x - ratio * (p2.x - p1.x), p2.y - ratio * (p2.y - p1.y)));
return [res.lat, res.lng];
}
}
function distanceTo(p1, p2) {
var x = p2.x - p1.x,
y = p2.y - p1.y;
return Math.sqrt(x * x + y * y);
}
function toPoint(x, y, round) {
if (x instanceof Point) {
return x;
}
if (isArray(x)) {
return new Point(x[0], x[1]);
}
if (x === undefined || x === null) {
return x;
}
if (typeof x === 'object' && 'x' in x && 'y' in x) {
return new Point(x.x, x.y);
}
return new Point(x, y, round);
}
function Point(x, y, round) {
this.x = (round ? Math.round(x) : x);
this.y = (round ? Math.round(y) : y);
}
然后简单地绘制传单折线(仅适用于latLng
坐标数组而不适用于坐标数组):
// array of coordinates
var mylatlngs = [
[55.555, 33.33],
[..., ...],
[..., ...],
[..., ...],
[..., ...],
...
];
var polyline = L.polyline(mylatlngs, { color: 'red' }).addTo(map);
// draw 5 arrows per line
L.featureGroup(getArrows(mylatlngs, 'red', 5,map)).addTo(map);
答案 1 :(得分:0)
我认为您应该尝试一下 PolylineDecorator。 似乎您可以更改图像并插入自己的箭头。
答案 2 :(得分:0)
在PolylineDecorator主页 存在指向 Leaflet.TextPath 的链接,作为一种轻量级的替代方案。我认为它与早先提出的“getArrows”函数实现类似。