div Overlay

DivOverlay creates a div overlay within a geographic bounds that scales with zoom level.

For SVG content, set viewBox="0 0 width height" and preserveAspectRatio="xMinYMin meet", and set the updateDivSize option to true.

Common Methods

Method	Description
setVisible	Set visibility (show/hide)
addTo	Add to map
remove	Remove
updateBounds	Update bounds
updateSize	Update size

Option Types

Type	Description
bounds	Bounds, four point coordinates
element	HTML element
width	Element width
height	Element height
minZoom	Minimum zoom level to display
maxZoom	Maximum zoom level to display
maxPitch	Maximum pitch angle to display
updateDivSize	Auto-update div size (set to true if SVG needs to scale)
maxDivSize	Maximum div size when scaling; beyond this, pixel scaling is used

Usage

const imageWidth = 1280; // Image width
const imageHeight = 905; // Image height
const image = document.createElement( "img" );
image.style.position = "absolute"; // Must add positioning when using multiple div overlays, otherwise other drawings may be incorrect
image.style.left = '0px';
image.style.top = '0px';
image.style.width = imageWidth + "px";
image.style.height = imageHeight + "px";
image.style.opacity = '0.8';
image.style.zIndex = '-1';
image.src = "https://vjmap.com/static/assets/images/park.jpg"
image.style.pointerEvents = "none"

// Add a DIV Image overlay
const divOverlay = new vjmap.DivOverlay({
    bounds: points, // Four point positions
    element: image, // DIV element
    width: imageWidth,// DIV width
    height: imageHeight,// DIV height
    minZoom: 5, // Minimum zoom level to display (optional)
    maxZoom: 15 // Maximum zoom level to display (optional)
})
divOverlay.addTo(map);

显示代码

全屏显示

Examples

div overlay drawing image (opens new window)

div overlay drawing gradient polygon (opens new window)

A div overlay with height (opens new window)

div overlay drawing radar effect (opens new window)

div overlay drawing SVG graphics (opens new window)

Map loading SCADA SVG graphics (opens new window)

Type Definitions

/**
 * Creates a div overlay within a geographic bounds that scales with zoom level
 * Note: For SVG, set viewBox="0 0 width height" preserveAspectRatio="xMinYMin meet", and set updateDivSize option to true
 **/
export  class DivOverlay {
    options: DivOverlayOptions;
    _map?: Map;
    isShow: boolean;
    minZoom: number;
    maxZoom: number;
    maxPitch: number;
    isRemoved: boolean;
    parentContainer?: HTMLElement;
    constructor(options: DivOverlayOptions);
    addTo(map: Map, insertId?: string | HTMLElement): void;
    private _isShow;
    private _add;
    private _remove;
    /**
     * Set visibility (show/hide)
     * @param visible Whether to show
     * @param isDisplay If true, use style display to control visibility, DOM remains in document. If false, dynamically add/remove from document
     */
    setVisible(visible?: boolean, isDisplay?: boolean): void;
    remove(): void;
    updateBounds(bounds: [GeoPointLike, GeoPointLike, GeoPointLike, GeoPointLike] | GeoBounds): void;
    updateSize(width: number, height: number): void;
    private _updateZoom;
    private _updateDivSize;
    private _adjustCoord;
    private _update;
}

export  interface DivOverlayOptions {
    /** Bounds, four point coordinates */
    bounds: [GeoPointLike, GeoPointLike, GeoPointLike, GeoPointLike] | GeoBounds;
    /** HTML element */
    element: HTMLElement;
    /** Element width */
    width: number;
    /** Element height */
    height: number;
    /** Maximum zoom level to display */
    minZoom?: number;
    /** Minimum zoom level to display */
    maxZoom?: number;
    /** Maximum pitch angle to display */
    maxPitch?: number;
    /** Auto-update div size (set to true if SVG needs to scale) */
    updateDivSize?: boolean;
    /** Maximum div size when scaling; beyond this, pixel scaling is used */
    maxDivSize?: number;
}