antv-l7/dev-demos/features/point/pointFillImage.md

point fillImage

import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import React, { useEffect } from 'react';

export default () => {
    useEffect(() => {
        
        const scene = new Scene({
            id: 'point_fillImage',
            map: new GaodeMapV2({
                style: 'light',
                center: [120, 30],
                pitch: 60,
                zoom: 14
            }),
        });

        scene.addImage(
            'marker',
            'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
          );

        const pointLayer = new PointLayer({ layerType: 'fillImage' })
        .source([{
            lng: 120, lat: 30,  name: 'marker'
        }], {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat',
            },
        })
        .shape('marker')
        .size(36)

        const pointLayer2 = new PointLayer({ layerType: 'fillImage' })
        .source([{
            lng: 120, lat: 30, name: 'marker'
        }], {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat',
            },
        })
        .shape('marker')
        .size(36)
        .active(true)
        .style({
            raisingHeight: 50,
            heightfixed: true
        })

                   
        scene.on('loaded', () => {
            scene.addLayer(pointLayer);
            scene.addLayer(pointLayer2);
        })
    }, [])
    return (
        <div
            id="point_fillImage"
            style={{
                height:'500px',
                position: 'relative'
            }}
        />
    );
}