填充图

几何体图层在地图上最简单的表现就是填充图，即使用指定的颜色填充指定区域。

实现

下面我们来介绍如何绘制一个简单的填充图。

你可以在 L7 官网上找到在线案例

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

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
    center: [-96, 37.8],
    zoom: 3,
  }),
});
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json')
    .then((res) => res.json())
    .then((data) => {
      const color = [
        'rgb(255,255,217)',
        'rgb(237,248,177)',
        'rgb(199,233,180)',
        'rgb(127,205,187)',
        'rgb(65,182,196)',
        'rgb(29,145,192)',
        'rgb(34,94,168)',
        'rgb(12,44,132)',
      ];
      const layer = new PolygonLayer({})
        .source(data)
        .scale('density', {
          type: 'quantile',
        })
        .color('density', color)
        .shape('fill')
        .active(true);
      const layer2 = new LineLayer({
        zIndex: 2,
      })
        .source(data)
        .color('#fff')
        .active(true)
        .size(1)
        .style({
          lineType: 'dash',
          dashArray: [2, 2],
        });
      scene.addLayer(layer);
      scene.addLayer(layer2);
    });
});

source

几何体图层推荐使用标准的 GeoJSON 数据。

shape

绘制填充图，shape 为 fill 常量，不支持数据映射

layer.shape('fill');

size

填充图不需要设置 size;

style

opacityLinear 设置几何填充图的径向渐变。

style({
  opacityLinear: {
    enable: true, // true - false
    dir: 'in', // in - out
  },
});

径向渐变 in

径向渐变 out

raisingHeight 设置 3D 填充图的抬升高度。