VJMAP logoVJMAP
CAD · WebGIS
中

Polygon

Updated 2026-03-07~ 27 min read
.md
ChatGPTClaudeKimiDoubao

Usage

let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "polygon1",
                "color": "#00ffff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            3006.0952985307595,
                            15198.972934052355
                        ],
                        [
                            12606.64046359223,
                            9285.59366571666
                        ],
                        [
                            4745.324495099878,
                            3720.060236694666
                        ],
                        [
                            3006.0952985307595,
                            15198.972934052355
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "polygon2",
                "color": "#ff00ff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            19841.833921319492,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            13807.589576796912
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        }
    ]
}
let polygon = new vjmap.Polygon({
    data: map.toLngLat(data), // Convert CAD geometry coordinates to render longitude/latitude
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
polygon.addTo(map);
polygon.clickLayer(e => map.logInfo(`You clicked No. ${e.features[0].id}, name: ${e.features[0].properties.name}, color: ${e.features[0].properties.color} `))
polygon.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });
Runs in a sandbox against the VJMAP public demo service


Alternatively, create the data source first, then create the fill layer, e.g.

map.addSource("fillSources", {
    type: "geojson",
    data: data
});
map.addLayer({
    id: 'fillLayers',
    source: 'fillSources',
    type: 'fill',
    "layout": {},
    "paint": {
        "fill-color": ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //color
        'fill-opacity': 0.8,
        'fill-outline-color': "#f00"
    }
})

Or use camelCase for properties, no need to distinguish layout vs paint

map.addGeoJSONSource("fillSources", data);
map.addFillLayer("fillLayers", "fillSources", {
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //color
    fillOpacity: 0.8,
    fillOutlineColor: "#f00"
})

When using this approach of creating data source and layer, listen to map layer events for event handling

map.on("click", layerId, e => {})

Common Methods

Use setData to modify data

polygon.setData(newDataJson);

Get layer ID and data source ID

// Get layer ID
polygon.getLayerId()
// Get data source ID
polygon.getSourceId()

Show or hide

// Show
polygon.show()
// Hide
polygon.hide()

Remove

// Remove
polygon.remove()
image-20240928153704452
image-20240928153704452

Single polygon

Two polygons

Batch draw polygons

Polygon conditional filter

Batch draw different types of polygons

Hollow polygon

Complex hollow polygon

Polygon pattern style

Polygon show line width on highlight

Type Definitions


/**
 * Create polygon.
 *
 **/
export  class Polygon extends OverlayLayerBase {
    options: PolygonOptions;
    constructor(options: PolygonOptions);
    addTo(map: Map, beforeId?: string): void;
    /** Replace the current data of the GeoJSON layer.
     @param {GeoJSON} [data] GeoJSON object to set. If not provided, defaults to an empty FeatureCollection.
     */
    setData(data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any): void;
    /** Set `fill-sort-key` layout property on one or more layers. */
    setFillSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
    /** Set `fill-antialias` paint property on one or more layers. */
    setFillAntialias(value: PropertyValueSpecificationEx<boolean>): this;
    /** Set `fill-opacity` paint property on one or more layers. */
    setFillOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    /** Set `fill-color` paint property on one or more layers. */
    setFillColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    /** Set `fill-outline-color` paint property on one or more layers.*/
    setFillOutlineColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    /** Set `fill-translate` paint property on one or more layers. */
    setFillTranslate(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
    /** Set `fill-translate-anchor` paint property on one or more layers. */
    setFillTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    /** Set `fill-pattern` paint property on one or more layers. */
    setFillPattern(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
    /** Get `fill-sort-key` layout property of layer. */
    getFillSortKey(): DataDrivenPropertyValueSpecification<number>;
    /** Get `fill-antialias` paint property of layer. */
    getFillAntialias(): PropertyValueSpecificationEx<boolean>;
    /** Get `fill-opacity` paint property of layer. */
    getFillOpacity(): DataDrivenPropertyValueSpecification<number>;
    /** Get `fill-color` paint property of layer. */
    getFillColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    /** Get `fill-outline-color` paint property of layer. */
    getFillOutlineColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    /** Get `fill-translate` paint property of layer. */
    getFillTranslate(): PropertyValueSpecificationEx<[number, number]>;
    /** Get `fill-translate-anchor` paint property of layer. */
    getFillTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
    /** Get `fill-pattern` paint property of layer. */
    getFillPattern(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
}


export  class OverlayLayerBase {
    sourceId?: string;
    layerId?: string;
    _map?: Map;
    constructor();
    addTo(map: Map, beforeId?: string): void;
    /**
     * Get data source ID
     * @return {string | undefined}
     */
    getSourceId(): string | undefined;
    /**
     * Get layer ID
     * @return {string | undefined}
     */
    getLayerId(): string | undefined;
    /**
     * Get data source data
     * @return {GeoJsonGeomertry | undefined}
     */
    getData(): GeoJsonGeomertry | undefined;
    remove(): void;
    /** Set map cursor to "pointer" when mouse hovers over these layers.
     @returns A function to remove the handler.
     * @param layerOrLayers
     */
    hoverPointer(): void;
    /**
     Update feature state in connected source when mouse hovers over a feature in these layers.
     * @param enterCb
     * @param leaveCb
     */
    hoverFeatureState(enterCb?: (arg0: {}) => void, leaveCb?: (arg0: {}) => void): void;
    /** Show a popup when mouse hovers over a feature in these layers.
     @param htmlFunc Function that receives feature and popup, returns HTML.
     @param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
     @example hoverPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { anchor: 'left' });
     */
    hoverPopup(htmlFunc: any, popupOptions?: PopupOptions): any;
    /** Show a popup when clicking a feature in these layers.
     @param htmlFunc Function that receives feature and popup, returns HTML.
     @param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.

     @returns A function that removes the handler.
     @example clickPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { maxWidth: 500 });

     */
    clickPopup(htmlFunc: (arg0: {}) => void, popupOptions?: PopupOptions): any;
    /** Trigger callback when clicking a feature in these layers.
     @param {function} cb Callback that receives event with .features property
     @returns A function that removes the handler.
     */
    clickLayer(cb: any): any;
    /** Trigger callback when mouse hovers over a feature in these layers.
     @returns A function to remove the handler.
     */
    hoverLayer(cb: any): any;
    /**
     * Make the given layer visible.
     * @param layer
     */
    show(): void;
    /**
     * Make the given layer invisible.
     * @param layer
     */
    hide(): void;
    /** Hide or show the given layer based on parameter.
     @param {boolean} state True for visible, false for hidden.
     */
    toggle(state: boolean): boolean;
    /** Set paint or layout property on one or more layers.
     @example setProperty('fillOpacity', 0.5)
     */
    setProperty(prop: string | object, value?: any): void;
    /** Get layer definition for given layer ID according to style spec.
     */
    getLayerStyle(): LayerSpecification;
    /**
     * Set layer style
     * @param layer
     * @param style
     */
    setLayerStyle(style: any): void;
    /** Replace the filter of a layer.
     @param {Array} filter New filter to set.
     @example setFilter(['==','level','0']]);
     */
    setFilter(filter: FilterSpecification): void;
}

export  interface OverlayLayerBaseOptions {
    sourceId?: string;
    sourceLayer?: string;
    layerId?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: any;
    visibility?: "visible" | "none";
    isHoverPointer?: boolean;
    isHoverFeatureState?: boolean;
}


export  type FillLayerSpecification = {
    id: string;
    type: "fill";
    metadata?: unknown;
    source: string;
    "source-layer"?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    layout?: {
        "fill-sort-key"?: DataDrivenPropertyValueSpecification<number>;
        visibility?: "visible" | "none";
    };
    paint?: {
        "fill-antialias"?: PropertyValueSpecificationEx<boolean>;
        "fill-opacity"?: DataDrivenPropertyValueSpecification<number>;
        "fill-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "fill-outline-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "fill-translate"?: PropertyValueSpecificationEx<[number, number]>;
        "fill-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
        "fill-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    };
};

export  type FillLayerStyleProp = {
    metadata?: unknown;
    source?: string;
    sourceLayer?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    visibility?: "visible" | "none";
    fillSortKey?: DataDrivenPropertyValueSpecification<number>;
    fillAntialias?: PropertyValueSpecificationEx<boolean>;
    fillOpacity?: DataDrivenPropertyValueSpecification<number>;
    fillColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    fillOutlineColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    fillTranslate?: PropertyValueSpecificationEx<[number, number]>;
    fillTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    fillPattern?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
};

export  type FilterSpecification = ["has", string] | ["!has", string] | ["==", string, string | number | boolean] | ["!=", string, string | number | boolean] | [">", string, string | number | boolean] | [">=", string, string | number | boolean] | ["<", string, string | number | boolean] | ["<=", string, string | number | boolean] | Array<string | FilterSpecification>;
Was this page helpful?