maptalks中的点运动

最新推荐文章于 2023-09-13 11:18:54 发布

原创最新推荐文章于 2023-09-13 11:18:54 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

工作专栏收录该内容

18 篇文章

订阅专栏

本文讲述了在石家庄这样的城市中实施Java前后台分离的可行性，并分享了在修改公司旧项目时，将地图API从未知来源替换为maptalks的经历。作者遇到的主要问题是：如何让车辆沿着由100个点组成的线进行运动，并处理方向变化。目前的解决方案包括使用setInterval和定向问题的权宜之计。尽管找到了地图点运动的示例，但缺少maptalks的中文API文档。文章探讨了在地图动画中遇到的技术难点和实践中的妥协策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先问一个问题：java前后台分离在石家庄这样的城市可能实现嘛？

然后进入正题：前两天去修改公司的旧项目，将不知道哪里来的地图API改为maptalks。我七月份进入当前公司才了解到原来还有maptalks这个东西，提到地图我还以为只有高德，百度呢。maptalk的API我至今没有找到中文的，读者如果有的话麻烦告知我，万分感谢。中间遇到了一个需求是这样的，有一辆车（marker）需要沿着地图中的线去运动。地图划线在maptalks官网有例子（这个是中文的，就很怪）。点运动也有例子，代码如下

function replay() {
  marker.setCoordinates(start);
  marker.bringToFront().animate({
     //animation translate distance
     translate: [offset['x'], offset['y']]
  }, {
     duration: 2000,
     //let map focus on the marker
     focus : true
   });
}

地址：maptalks 点沿线运动。

这段代码的意思就是有一个起点，然后他有x方向（请允许我这么不专业），y方向的偏移，要求在2000毫秒内完成偏移。偏移过程中保证视线焦点在marker上。

遇到的问题：

1、我有100个点组成的线。是用循环嘛？那么等你循环完了，那第一个2000毫秒还没完，所以会看到小车到了终点还在跑。所以这时候我用了setInterval。果然有新问题，就是如果点击了重置什么的按钮，需要clearInterval。否则小车还会继续运动。听着简单，但是不知道什么时候就重置了。

2、方向的偏移问题，如果是个普通的图标，当然就直接移动了，没有什么东北、西北、正东……的概念。但是那是辆车啊，运动的时候怎么能一直没方向呢？这个我也没解决，偷懒的解决办法是，因为美工提供的是朝北的车头，我就画了一条南向北的路线，反正是演示用。