Great Circle

View MarkdownEdit this page

Consider the earth as a sphere, and draw a plane through any two points on the ground and the center of the earth. The circle seen when the plane intersects the earth’s surface is a great circle. The great circle arc between two points is the shortest distance between the two points on the ground. The route along this great arc is called a great circle route.

accomplish

Let’s introduce how to draw a simple large arc line.

you canL7Found on the official websiteOnline case

import { Scene, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',
    center: [107.77791556935472, 35.443286920228644],
    zoom: 2.9142882493605033,
  }),
});
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
    .then((res) => res.text())
    .then((data) => {
      const layer = new LineLayer({})
        .source(data, {
          parser: {
            type: 'csv',
            x: 'lng1',
            y: 'lat1',
            x1: 'lng2',
            y1: 'lat2',
          },
        })
        .size(1)
        .shape('greatcircle')
        .color('#8C1EB2')
        .style({
          opacity: 0.8,
        });
      scene.addLayer(layer);
    });
});

source

To draw an arc, you need to provide the coordinates of both the starting point and the ending point (if the starting and ending points are swapped, the shape of the arc will be symmetrical and opposite, and the direction of the flying line animation will be opposite).

const data = [
  {
    lng1: 120,
    lat1: 30,
    lng2: 130,
    lat2: 30,
  },
];
layer.source(data, {
  parser: {
    type: 'json',
    x: 'lng1',
    y: 'lat1',
    x1: 'lng2',
    y1: 'lat2',
  },
});

shape

In order to draw a great arc line graph, we need toshapeThe parameters are set togreatcircle。

animate

开启关闭动画

layer.animate(true);
layer.animate(false);

设置动画参数

duration 动画时间单位(s)秒
interval 轨迹间隔, 取值区间 0 - 1
trailLength 轨迹长度取值区间 0 - 1

layer.animate({
  duration: 4,
  interval: 0.2,
  trailLength: 0.1,
});

参数动画介绍

L7 目前动画参数为相对单位，我们默认一条线段的长度为 1 L7 动画参数

如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。

在线案例

style

linearColor

线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高

const layer = new LineLayer({})
  .source(data, {
    parser: {
      type: 'csv',
      x: 'lng1',
      y: 'lat1',
      x1: 'lng2',
      y1: 'lat2',
    },
  })
  .size(1)
  .shape('arc')
  .color('#8C1EB2')
  .style({
    sourceColor: '#f00', // 起点颜色
    targetColor: '#0f0', // 终点颜色
  });

在线案例

dash

线图层通过在 style 中设置线的类型，同时指定虚线部分和实线部分

const layer = new LineLayer({})
  .source(data)
  .size(1.5)
  .shape('line')
  .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])
  .active(true)
  .style({
    lineType: 'dash',
    dashArray: [5, 5],
  });
scene.addLayer(layer);

lineType 默认为 solid，表示实线，dash 表示虚线
dashArray[len1: number, len2: number] len1 实线长度 len2 间隔长度

在线案例

线图层支持纹理贴图和多种表现形式，通过 scene.addImage 方法添加到全局的资源，使用 texture 方法指定贴图。

scene.addImage(
  '02',
  'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
const layer = new LineLayer()
  .source(data)
  .size(4)
  .shape('line')
  .texture('02')
  .color('#25d8b7')
  .animate({
    interval: 1, // 间隔
    duration: 1, // 持续时间，延时
    trailLength: 2, // 流线长度
  })
  .style({
    lineTexture: true, // 开启线的贴图功能
    iconStep: 20, // 设置贴图纹理的间距
  });

lineTexture 指定是否开启纹理贴图能力
iconStep 指定贴图在线图层上面排布的间隔

在线案例

texture advance

✨ animate
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关.

线图层上排列的纹理的数量大致为 duration/interval

.animate({
    duration: 1,
    interval: 0.2,
    trailLength: 0.1
});

// 此时 纹理贴图数量为  duration / interval = 5

✨ textureBlend 参数
通过控制 style 方法中的 textureBlend 参数，我们可以控制纹理图层和线图层的混合情况

normal
replace

.style({
    lineTexture: true, // 开启线的贴图功能
    iconStep: 30, // 设置贴图纹理的间距
    textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
  });

在线案例