关于跨日期线绘制的问题

[zhm0710]

maptalks's version and what browser you use?
0.44.2

Issue description
问题一： 如果两个点在日期线两边绘制，会导致只显示一个点显示，另一个点不显示
问题二：百度底图下如果有一条线跨越了日期线，然后使用animateShow方法时会使得动画在跨过日期线的时候发生异常

Please provide a reproduction URL (on any jsfiddle like site)
想要类似高德地图下这个效果： https://lbs.amap.com/api/javascript-api/example/common/cross-date-line-overlays，请问有方法实现吗？

[fuzhenn]

1. 另一个点并不是没有绘制，而是应该绘制在地图的另外一边了，如果仍然有问题，请提供一个重现代码。
2. 能否提供一个重现代码？

高德地图的这个效果可以实现的，跨越日期线的绘制有长边和短边两种绘制方式，maptalks是通过坐标的顺序来判断跨日期线顺序的，例如 [-181, 0] 到 [1, 0] 是绘制短边， [1, 0] 到 [-181, 0] 是绘制长边

[zhm0710]

不好意思，之前由于病情问题，回不到公司，所以现在才回复你，目前的问题是的确是绘制到了另一边，但是由于使用的是轨迹动画，就是先画一条线（a线），然后再用另一条线（b线）做animateShow,但是这个时候跨越日期线的时候会出现b的动画，在a线上走到一半就消失（实际是移到另一边继续动画，但是用户不知道，而且点也没有在线上移动，因为a和b在两边绘制），所以请问能否能做到在同一边展示动画，而不是分别到两边

[fuzhenn]

收到，能否帮忙提供一个重现代码？我还不是完全明白你要的效果。

[zhm0710]

let polyline = new mLineString([
      [-159.110020, 51.120020],
      [160, 50],
      [159.99990, 49.120020]
], {
      symbol: {
        lineColor: '#000000',
        lineOpacity: 1,
        lineWidth: 1
      }
  })
polyline.addTo(map.layer)
let animateLine = new mLineString([
      [-159.110020, 51.120020],
      [160, 50],
      [159.99990, 49.120020]
], {
        zIndex: 1,
        symbol: [{
          lineColor: 'transparent',
          lineOpacity: 0,
          lineWidth: 0
        }, {
            markerFile: './image.png',
            markerPlacement: 'vertex-last', // vertex, point, vertex-first, vertex-last, center
            markerVerticalAlignment: 'middle',
            markerWidth: 20
            markerHeight: '20'
        }]
    })
    animateLine.addTo(map.layer)
    animateLine.animateShow({
        duration: 1000,
        easing: 'linear'
      }, (frame, step:) => {
      })

[zhm0710]

你好，这是我这边提供的复现代码，就是当动画走到跨越日期线时，动画就不在线上面运动了，请问是否能确保他们在同一侧运动完，或者有其他更加好的解决方案？

[fuzhenn]

您好，上面这个代码我这里跑不起来，为求准确，是否能用codepen创建一个能运行的重现代码？谢谢
创建codepen demo的简单办法，在这个demo里，点击右上角的编辑，就会自动弹出一个codepen页面，你可以在页面里编辑代码，并能实时看到效果，编辑结束后别忘了save。

[zhm0710]

var map = new maptalks.Map('map', {
    center: [160.0007210, 50.0000387],
    zoom: 5,
    minZoom: 1,
    maxZoom: 19,
    spatialReference: {
      projection: 'baidu'
    },
    baseLayer: new maptalks.TileLayer('base', {
      'urlTemplate': 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1',
      'subdomains': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      'attribution': '© Baidu '
    })
  });
  var polyline = new maptalks.LineString([
    [-159.110020, 51.120020],
    [160, 50],
    [159.99990, 49.120020]
    ], {
      symbol: {
        lineColor: '#000000',
        lineOpacity: 1,
        lineWidth: 1
      }
    })
  var line = new maptalks.LineString([
    [-159.110020, 51.120020],
    [160, 50],
    [159.99990, 49.120020]
    ], {
      symbol: [{
        lineColor: 'transparent',
        lineOpacity: 0,
        lineWidth: 0
      }, {
        markerType: 'diamond',
        markerLineColor: '#000',
        markerFill: '#000',
        markerPlacement: 'vertex-last',
        markerVerticalAlignment: 'middle',
        markerWidth: 20,
        markerHeight: 20
      }]
    });

  var layer=new maptalks.VectorLayer('vector').addTo(map);

  polyline.addTo(layer)
  line.addTo(layer)

  replay();

  function replay() {
  // line.hide();
  //line's animateShow
  line.animateShow({
    duration: 3000,
    easing: 'linear'
  }, function(frame) {
    if (frame.state.playState === 'finished') {
      console.log('finished');
    }
  });
}

[zhm0710]

你好，这个是我在demo上的复现代码，就是轨迹和轨迹动画不在一起，还发现了一个问题是出现了异常动画轨迹

[fuzhenn]

问题已经重现， 解决ing

[zhm0710]

好的，谢谢