希望 LineString 可以设置 markerPlacement 为距离,根据距离裁剪线段,绘制图标
我在制作一个车辆沿着路线前进的效果,看到 端点沿线自动旋转Marker 的例子,希望可以设置markerPlacement 为距离,根据距离裁剪线段,绘制图标。
我尝试修改源码,找到了位置却不知道 maptalks 相关的计算方法:

相关代码如下:
let l1 = turf.lineSliceAlong(line, start, end, {units: 'miles'}),
point = turf.point(l1.geometry.coordinates[0])
bearing = turf.bearing(point, turf.point(l1.geometry.coordinates[1]))
@wordgold 从小飞机的例子上看,小飞机标注的地方为拐角点,也就是(LineString的每个坐标点),不是根据距离计算,如果你用turf的话,turf.lineChunk 函数可以对线段等分切割,获取到切割的线段集合后,根据每个线段的起点和终点可以获取倾斜角(turf.bearing),在线段中间点标准相应的图标,如果是动态变化的,在动画函数里实时改变图标的经纬度和倾斜角就可以了,我就是这个干的(哈哈);
从你的需求上看,应该是轨迹播放功能,maptalks有相关插件 https://github.com/maptalks/maptalks.routeplayer ,不过不支持图标的倾斜角的功能。
如果是实时数据(比如打车的出租车的位置实时监控),我的做法是都是后台往前台实时的推送数据,根据当前点和上一个点计算倾斜角;
希望对你有帮助
@deyihu 谢谢 这里计算位置和倾斜角都不是问题,我主要是想要图标可以基于地图倾斜的功能。 因为小飞机是基于地图倾斜的才想要修改这个参数,另外这样修改的话,我只需要每帧修改下距离就可以实现轨迹播放,代码量会减少很多。
ps:推送数据时候根据当前点和上一点计算角度的话,假如车辆正好在两点之间拐了个弯,就会出现角度错误的情况,我一般是把实时数据先保留一小段时间,形成线段,稍微延时点再播放动画,这样根据线段计算角度就比较精确了
@wordgold 你的另一个问题我看到了,get到你的需求了,mapbox是用webgl渲染的,所以支持根据地图的旋转来自动调节marker的角度(bearing,pitch),maptalks的矢量数据渲染(默认渲染器)这块好像是Canvas 2d做的,所以调节角度(bearing,pitch)这块会不好做,小飞机的例子里的那个小飞机角度和webgl中渲染Mesh的还是大不一样的,你需要一个webgl渲染插件,例如 maptalks.three https://github.com/maptalks/maptalks.three 插件,当然你也可以用其他三维渲染库,(three这个插件最主要的是怎样将经纬度转化为三维的空间坐标(Vector3)和相机同步问题)。好像@fuzhenn 正在做VectorLayer的webgl渲染插件。
这个是我用three做的例子截图:


@deyihu 谢谢,不用那么麻烦,不需要做3维,我的图标只是一个平面的,只是希望它平贴在地图上就行,只需要在 _getRenderPoints 添加一个位置返回就好。
这个功能感觉不应该通过symbol解决
可以参考一下这个插件里的代码来计算沿路径指定距离的坐标: https://github.com/maptalks/maptalks.routeplayer
https://github.com/maptalks/maptalks.routeplayer