Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

3D弧线不支持Mapbox的globe投影 #1531

Open
bigsu opened this issue Dec 8, 2022 · 2 comments
Open

3D弧线不支持Mapbox的globe投影 #1531

bigsu opened this issue Dec 8, 2022 · 2 comments

Comments

@bigsu
Copy link

bigsu commented Dec 8, 2022 •
edited
Loading

通过参考效果想在mapbox上实现该功能https://l7.antv.antgroup.com/examples/earth/arc3d#flyline
发现3D弧线图不能正确的在mapbox球上加载，线的两端不能贴地，移动球后会飘走


代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建地图场景</title>
    <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
    	#map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.11.1/mapbox-gl.css' rel='stylesheet' />
  
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.11.1/mapbox-gl.js'></script>
<script src="https://unpkg.com/@antv/l7"></script>
<script>
  const scene = new L7.Scene({
    id: 'map',
    map: new L7.Mapbox({
      style: 'dark', // 样式URL
      center: [120.19382669582967, 30.258134],
      pitch: 0,
      zoom: 2,
      projection: { name: 'globe' },
      token: 'your token',
    }),
  });

 fetch('https://gw.alipayobjects.com/os/bmw-prod/e495c407-953b-44cc-8f77-87b9cf257578.json')
    .then(res => res.json())
    .then(data => {
      const layer = new L7.LineLayer({})
        .source(data, {
          parser: {
            type: 'json',
            x: 'from_lon',
            y: 'from_lat',
            x1: 'to_lon',
            y1: 'to_lat'
          }
        })
        .size(1)
        .shape('arc3d')
        .color('#FF7C6A')
        .style({
          segmentNumber: 15,
          opacity: 0.8
        });
      scene.addLayer(layer);
    });

</script>
</body>
</html>
@bigsu
Copy link
Author

bigsu commented Dec 8, 2022

从 v2.9 开始，Mapbox GL JS 支持将地图显示为 3D 地球，https://docs.mapbox.com/mapbox-gl-js/guides/globe/ 希望L7团队早点适配，抓紧写，村头厕所可没纸了

@lzxue
Copy link
Contributor

lzxue commented Dec 9, 2022

确实没有适配 mapbox 的新版本

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lzxue @bigsu