3D Extrude

In addition to the flat filled map on the map, the geometry layer can also be a geometric block with height.

accomplish

Below we will introduce how to draw a simple3DFill in the figure.

you canL7Found on the official websiteOnline case

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

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',
    pitch: 50,
    center: [ 118.8, 32.056 ],
    zoom: 10
  })
});
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json')
    .then(res => res.json())
    .then(data => {
      const filllayer = new PolygonLayer({
        name: 'fill',
        zIndex: 3
      })
        .source(data)
        .shape('extrude')
        .color('unit_price', [
        '#87CEFA',
        '#00BFFF',
        '#7FFFAA',
        '#00FF7F',
        '#32CD32',
        '#F0E68C',
        '#FFD700',
        '#FF7F50',
        '#FF6347',
        '#FF0000'
      ])
        .size('unit_price', unit_price => unit_price * 50)
        .style({
          opacity:{
            field:'unit_price',
            value: [ 0, 1 ]
          }
          pickLight: true
        })
      scene.addLayer(filllayer);
    });
});

source

It is recommended to use the standard geometry layerGeoJSONdata.

shape

3D Polygon Stretch the polygon upward along the Z axis

extrude constants do not support data mapping

layer.shape('extrude');

size

size represents the height of the stretch and supports data mapping

layer.size(10); // Set height to constant
layer.size('floor', [0, 2000]); // Data mapping based on floor field defaults to line
layer.size('floor', (floor) => {
  //Set size through callback function
  return floor * 2;
});

style

pickLightSets whether the picking highlight color of the 3D fill map calculates lighting.

pickLightThe default isfalseIndicates that lighting calculations will not be performed on the picked colors. When turned on, some additional calculations will be added.

style({
  pickLight: true, //default is false
});

heightFixedset up3DThe height of the fill image is always fixed.

default3DThe height of the filled image will bezoomThe level is related, and is used to keep the pixel length of the graphics height constant, and in some cases we need to keep the actual height of the graphics unchanged rather than the pixel height.

style({
  heightfixed: true, //default is false
});

🌟 Supported starting from v2.7.6.

Online case

raisingHeightset up3DThe elevation of the fill pattern.

🌟 The prerequisite for setting the lifting height isheightfixedfortrue。
🌟 Supported starting from v2.8.17.

Online case

mapTextureset up3DThe top texture of the fill image. 🌟 Setting upmapTextureallows the user to configure the gradient color on the side. 🌟 Supported starting from v2.8.17.

const provincelayer = new PolygonLayer({})
  .source(data)
  .size(150000)
  .shape('extrude')
  .color('#0DCCFF')
  .style({
    heightfixed: true,
    pickLight: true,
    raisingHeight: 200000,
    mapTexture:
      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0tmIRJG9cQQAAAAAAAAAAAAAARQnAQ',
    sourceColor: '#333',
    targetColor: '#fff',
  });

topsurface:booleanControls the visibility of the top surface, the default istrue。
sidesurface:booleanControl the visibility of the sides, the default istrue。

Online case