Symbol

The point layer supports drawing icons and placing different pictures as symbols on geographical areas, usually representing the distribution of different geographical features.

accomplish

Let’s introduce how to draw a common symbol map.

• you canL7Found on the official websiteOnline case

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

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
    center: [121.434765, 31.256735],
    zoom: 14.83,
  }),
});
scene.addImage(
  '00',
  'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
  '01',
  'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
  '02',
  'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
);
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
    .then((res) => res.json())
    .then((data) => {
      const imageLayer = new PointLayer()
        .source(data, {
          parser: {
            type: 'json',
            x: 'longitude',
            y: 'latitude',
          },
        })
        .shape('name', ['00', '01', '02'])
        .size(25);
      scene.addLayer(imageLayer);
    });
});

addImage(field: string, url: string): void

In order to draw an icon using a point layer, we need tosceneAdd corresponding image resources globally. Then we can click on the layershapeSpecify the corresponding image in the method.

scene.addImage(
  '02',
  'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
);

shape

we need to passshapeThe method specifies the image resources that need to be loaded for the current point layer.ID，IDis used by usersscene.addImage(id, url)When adding image resources globallyID, that is, the symbolic diagram needs toshapeset as pictureid。

scene.addImage(
  '00',
  'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
  '01',
  'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);

layer.shape('00');

⚠️ Symbol diagramIDIt cannot be the same as the existing shape name of the point layer. For example, it cannot be set.circle。

Same symbol diagramshapeData mapping is also supported

const scatter = new PointLayer()
  .source(data)
  .shape('name', (v) => {
    switch (v) {
      case 'p1':
        return '00';
      case 'p2':
        return '01';
    }
  })
  .size(5)
  .style({
    opacity: 0.3,
    strokeWidth: 1,
  });

⚠️ Symbol diagram should not be setcolorPass in color,colorThe color you set will override the color of the image.

⚠️ In order to get a better realistic effect (the picture is clear and has no obvious aliasing), we should keep it consistent when selecting the picture and setting the icon size, or the icon size set in the L7 layer is slightly smaller than the pixel size of the actual picture.

Online case

style

billboard

1. Pass by defaultPointLayerinstantiatedimageIt is essentially a sprite map, so it always faces the camera, and the size of the map is also limited by the device.
2. Since the sprite always faces the camera, we can’t customize the configuration eitherimageof rotation angle.

In order to solve the above two problems (1. Limited size, 2. Unable to customize the rotation angle), we provide a separate non-elf modebillboardmode.

Just configure billboard in style asfalse

const imageLayer = new PointLayer({ layerType: 'fillImage' })
  .source(data, {
    parser: {
      type: 'json',
      x: 'longitude',
      y: 'latitude',
    },
  })
  .shape('name', ['00', '01', '02'])
  .style({
    rotation: 0,
    billboard: false,
  })
  .size(45);

rotation

We support usingrotationCustomize the rotation angle of the configuration icon (clockwise, angle system).

• rotation: number|undefined // Angle unit 0-360

layer.style({
  rotation: 90,
});

rotation supports constants and data mapping

layer.style({
  rotation: {
    field: 'rotate',
    value: [0, 360],
  },
});

layer.style({
  rotation: {
    field: 'rotate',
    value: (rotate) => {
      return rotate;
    },
  },
});

Online case

Non-billboard mode support for symbol graphsrotationMethod maps rotation angle based on data.

const imageLayer = new PointLayer()
  .source(data)
  .shape('wind', (wind) => {
    if (wind === 'up') {
      return 'arrBlue';
    }
    return 'arrRed';
  })
  .size(15)
  .style({
    rotation: 0, //
    billboard: false,
  });
scene.addLayer(imageLayer);

Online case