符号

用法

let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "point1",
                "color": "#00ffff",
                "icon": "icon1"
            },
            "geometry": {
                "coordinates": [
                    6971.5378667085715,
                    14385.014943907285
                ],
                "type": "Point"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "point2",
                "color": "#ff00ff",
                "icon": "icon2"
            },
            "geometry": {
                "coordinates": [
                    21789.770621477073,
                    14037.169104593304
                ],
                "type": "Point"
            }
        }
    ]
}
let symbol = new vjmap.Symbol({
    data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
    // 图标名来源于geojson属性中的icon字段
    iconImage: ['get', 'icon'],
    iconOffset: [0, -12],
    // 鼠标hover时设置透明度0.8,不悬浮1.0
    iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
    textField: ['get', 'name'],
    textFont: ['Arial Unicode MS Regular'],
    textSize: 14,
    textColor: '#FFA0FD',
    textOffset: [0, 0.5],
    textAnchor: 'top',
    iconAllowOverlap: false,
    textAllowOverlap: false,
    isHoverPointer: true,
    isHoverFeatureState: true
});
symbol.addTo(map);
symbol.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
symbol.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });

let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: "sys_hello", // 地图ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    showError(res.error)
    return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
    zoom: 1, // 设置地图缩放级别
    pitch: 0,
    antialias: true,
    renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "point1",
                "color": "#00ffff",
                "icon": "icon1"
            },
            "geometry": {
                "coordinates": [
                    6971.5378667085715,
                    14385.014943907285
                ],
                "type": "Point"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "point2",
                "color": "#ff00ff",
                "icon": "icon2"
            },
            "geometry": {
                "coordinates": [
                    21789.770621477073,
                    14037.169104593304
                ],
                "type": "Point"
            }
        }
    ]
}
for (let i = 1; i <= 2; i++) {
    await map.loadImageEx("icon" + i, `https://vjmap.com/static/assets/images/sensor${i + 1}.png`);
}
let symbol = new vjmap.Symbol({
    data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
    // 图标名来源于geojson属性中的icon字段
    iconImage: ['get', 'icon'],
    iconOffset: [0, -12],
    // 鼠标hover时设置透明度0.8,不悬浮1.0
    iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
    textField: ['get', 'name'],
    textFont: ['Arial Unicode MS Regular'],
    textSize: 14,
    textColor: '#FFA0FD',
    textOffset: [0, 0.5],
    textAnchor: 'top',
    iconAllowOverlap: false,
    textAllowOverlap: false,
    isHoverPointer: true,
    isHoverFeatureState: true
});
symbol.addTo(map);
// 点击事件
symbol.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
// hover事件
symbol.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });

也可以用先单独创建数据源，再创建符号图层的写法，如

map.addSource("symbolSources", {
    type: "geojson",
    data: data
});
map.addLayer({
    id: 'symbolLayer',
    source: 'symbolSources',
    type: 'symbol',
    "layout": {},
    "paint": {
        'icon-image': ['get', 'icon'],
        'icon-offset': [0, -12],
        // 鼠标hover时设置透明度0.8,不悬浮1.0
        'icon-opacity': ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
        'text-field': ['get', 'name'],
        'text-font': ['Arial Unicode MS Regular'],
        'text-size': 14,
        'text-color': '#FFA0FD',
        'text-offset': [0, 0.5],
        'text-anchor': 'top',
        'icon-allow-overlap': false,
        'text-allow-overlap': false,
    }
})

或 属性用驼峰式大小写，不用区分layout还是paint属性

map.addGeoJSONSource("symbolSources", data);
map.addSymbolLayer("symbolLayer", "symbolSources", {
    iconImage: ['get', 'icon'],
    iconOffset: [0, -12],
    // 鼠标hover时设置透明度0.8,不悬浮1.0
    iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
    textField: ['get', 'name'],
    textFont: ['Arial Unicode MS Regular'],
    textSize: 14,
    textColor: '#FFA0FD',
    textOffset: [0, 0.5],
    textAnchor: 'top',
    iconAllowOverlap: false,
    textAllowOverlap: false,
})

这种通过创建数据源和图层的写法，响应事件时，需要监听地图的图层事件进行处理

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

常用方法

修改数据用 setData

symbol.setData(newDataJson);

获取图层ID、数据源ID

// 获取图层ID
symbol.getLayerId()
// 获取数据源ID
symbol.getSourceId()

显示或隐藏

// 显示
symbol.show()
// 隐藏
symbol.hide()

删除

// 删除
symbol.remove()

相关示例

符号图标

颜色随状态值变化的符号图标

自定义图标图层

创建自定义图标

绘制批量图标文本(不重叠)

绘制批量图标文本(允许重叠)

可拉伸的文本背景图片

复杂符号文本效果

类型定义

/**
 * 创建符号图层.
 *
 **/
 class Symbol extends OverlayLayerBase {
    options: SymbolOptions;
    constructor(options: SymbolOptions);
    addTo(map: Map, beforeId?: string): void;
    /** 替换 GeoJSON 图层的当前数据。
     @param {GeoJSON} [data] GeoJSON object to set. If not provided, defaults to an empty FeatureCollection.
     */
    setData(data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any): void;
    setSymbolPlacement(value: PropertyValueSpecificationEx<"point" | "line" | "line-center">): this;
    getSymbolPlacement(): PropertyValueSpecificationEx<"point" | "line" | "line-center">;
    setSymbolSpacing(value: PropertyValueSpecificationEx<number>): this;
    getSymbolSpacing(): PropertyValueSpecificationEx<number>;
    setSymbolAvoidEdges(value: PropertyValueSpecificationEx<boolean>): this;
    getSymbolAvoidEdges(): PropertyValueSpecificationEx<boolean>;
    setSymbolSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
    getSymbolSortKey(): DataDrivenPropertyValueSpecification<number>;
    setSymbolZOrder(value: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">): this;
    getSymbolZOrder(): PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
    setIconAllowOverlap(value: PropertyValueSpecificationEx<boolean>): this;
    getIconAllowOverlap(): PropertyValueSpecificationEx<boolean>;
    setIconIgnorePlacement(value: PropertyValueSpecificationEx<boolean>): this;
    getIconIgnorePlacement(): PropertyValueSpecificationEx<boolean>;
    setIconOptional(value: PropertyValueSpecificationEx<boolean>): this;
    getIconOptional(): PropertyValueSpecificationEx<boolean>;
    setIconRotationAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getIconRotationAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setIconSize(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconSize(): DataDrivenPropertyValueSpecification<number>;
    setIconTextFit(value: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">): this;
    getIconTextFit(): PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
    setIconTextFitPadding(value: PropertyValueSpecificationEx<[number, number, number, number]>): this;
    getIconTextFitPadding(): PropertyValueSpecificationEx<[number, number, number, number]>;
    setIconImage(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
    getIconImage(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    setIconRotate(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconRotate(): DataDrivenPropertyValueSpecification<number>;
    setIconPadding(value: PropertyValueSpecificationEx<number>): this;
    getIconPadding(): PropertyValueSpecificationEx<number>;
    setIconKeepUpright(value: PropertyValueSpecificationEx<boolean>): this;
    getIconKeepUpright(): PropertyValueSpecificationEx<boolean>;
    setIconOffset(value: DataDrivenPropertyValueSpecification<[number, number]>): this;
    getIconOffset(): DataDrivenPropertyValueSpecification<[number, number]>;
    setIconAnchor(value: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">): this;
    getIconAnchor(): DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    setIconPitchAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getIconPitchAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setTextPitchAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getTextPitchAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setTextRotationAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getTextRotationAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setTextField(value: DataDrivenPropertyValueSpecification<FormattedSpecification>): this;
    getTextField(): DataDrivenPropertyValueSpecification<FormattedSpecification>;
    setTextFont(value: DataDrivenPropertyValueSpecification<string[]>): this;
    getTextFont(): DataDrivenPropertyValueSpecification<string[]>;
    setTextSize(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextSize(): DataDrivenPropertyValueSpecification<number>;
    setTextMaxWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextMaxWidth(): DataDrivenPropertyValueSpecification<number>;
    setTextLineHeight(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextLineHeight(): DataDrivenPropertyValueSpecification<number>;
    setTextLetterSpacing(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextLetterSpacing(): DataDrivenPropertyValueSpecification<number>;
    setTextJustify(value: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">): this;
    getTextJustify(): DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
    setTextRadialOffset(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextRadialOffset(): DataDrivenPropertyValueSpecification<number>;
    setTextVariableAnchor(value: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>): this;
    getTextVariableAnchor(): PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
    setTextAnchor(value: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">): this;
    getTextAnchor(): DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    setTextMaxAngle(value: PropertyValueSpecificationEx<number>): this;
    getTextMaxAngle(): PropertyValueSpecificationEx<number>;
    setTextWritingMode(value: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>): this;
    getTextWritingMode(): PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
    setTextRotate(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextRotate(): DataDrivenPropertyValueSpecification<number>;
    setTextPadding(value: PropertyValueSpecificationEx<number>): this;
    getTextPadding(): PropertyValueSpecificationEx<number>;
    setTextKeepUpright(value: PropertyValueSpecificationEx<boolean>): this;
    getTextKeepUpright(): PropertyValueSpecificationEx<boolean>;
    setTextTransform(value: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">): this;
    getTextTransform(): DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
    setTextOffset(value: DataDrivenPropertyValueSpecification<[number, number]>): this;
    getTextOffset(): DataDrivenPropertyValueSpecification<[number, number]>;
    setTextAllowOverlap(value: PropertyValueSpecificationEx<boolean>): this;
    getTextAllowOverlap(): PropertyValueSpecificationEx<boolean>;
    setTextIgnorePlacement(value: PropertyValueSpecificationEx<boolean>): this;
    getTextIgnorePlacement(): PropertyValueSpecificationEx<boolean>;
    setTextOptional(value: PropertyValueSpecificationEx<boolean>): this;
    getTextOptional(): PropertyValueSpecificationEx<boolean>;
    setIconOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconOpacity(): DataDrivenPropertyValueSpecification<number>;
    setIconColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getIconColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setIconHaloColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getIconHaloColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setIconHaloWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconHaloWidth(): DataDrivenPropertyValueSpecification<number>;
    setIconHaloBlur(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconHaloBlur(): DataDrivenPropertyValueSpecification<number>;
    setIconTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
    getIconTranslate(): PropertyValueSpecificationEx<[number, number]>;
    setIconTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getIconTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
    setTextOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextOpacity(): DataDrivenPropertyValueSpecification<number>;
    setTextColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getTextColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setTextHaloColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getTextHaloColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setTextHaloWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextHaloWidth(): DataDrivenPropertyValueSpecification<number>;
    setTextHaloBlur(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextHaloBlur(): DataDrivenPropertyValueSpecification<number>;
    setTextTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
    getTextTranslate(): PropertyValueSpecificationEx<[number, number]>;
    setTextTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getTextTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
}


export  class OverlayLayerBase {
    sourceId?: string;
    layerId?: string;
    _map?: Map;
    constructor();
    addTo(map: Map, beforeId?: string): void;
    /**
     * 获取数据源ID
     * @return {string | undefined}
     */
    getSourceId(): string | undefined;
    /**
     * 获取图层ID
     * @return {string | undefined}
     */
    getLayerId(): string | undefined;
    /**
     * 获取数据源的数据
     * @return {GeoJsonGeomertry | undefined}
     */
    getData(): GeoJsonGeomertry | undefined;
    remove(): void;
    /** 每当鼠标悬停在这些图层上时，将地图的光标设置为“指针”。
     @returns A function to remove the handler.
     * @param layerOrLayers
     */
    hoverPointer(): void;
    /**
     每当将鼠标悬停在这些图层中的某个特征上时，更新连接源 [s] 中特征的特征状态。
     * @param enterCb
     * @param leaveCb
     */
    hoverFeatureState(enterCb?: (arg0: {}) => void, leaveCb?: (arg0: {}) => void): void;
    /** 将鼠标悬停在这些图层中的某个要素上时，会显示一个弹出窗口。
     @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;
    /** 每当单击这些图层中的要素时都会显示一个弹出窗口。
     @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;
    /** 每当单击这些图层中的要素时都会触发回调。
     @param {function} cb Callback that receives event with .features property
     @returns A function that removes the handler.
     */
    clickLayer(cb: any): any;
    /** 当鼠标悬停在这些图层中的要素上时触发回调。
     @returns A function to remove the handler.
     */
    hoverLayer(cb: any): any;
    /**
     * 使给定的图层可见。
     * @param layer
     */
    show(): void;
    /**
     * 使给定的图层不可见。
     * @param layer
     */
    hide(): void;
    /** 根据参数使给定的图层隐藏或可见。
     @param {boolean} state True for visible, false for hidden.
     */
    toggle(state: boolean): boolean;
    /** 在一个或多个图层上设置绘制或布局属性。
     @example setProperty('fillOpacity', 0.5)
     */
    setProperty(prop: string | object, value?: any): void;
    /** 根据样式规范，获取给定图层 ID 的图层定义。
     */
    getLayerStyle(): LayerSpecification;
    /**
     * 设置图层样式
     * @param layer
     * @param style
     */
    setLayerStyle(style: any): void;
    /** 替换一个图层的过滤器。
     @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 SymbolLayerSpecification = {
    id: string;
    type: "symbol";
    metadata?: unknown;
    source: string;
    "source-layer"?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    layout?: {
        "symbol-placement"?: PropertyValueSpecificationEx<"point" | "line" | "line-center">;
        "symbol-spacing"?: PropertyValueSpecificationEx<number>;
        "symbol-avoid-edges"?: PropertyValueSpecificationEx<boolean>;
        "symbol-sort-key"?: DataDrivenPropertyValueSpecification<number>;
        "symbol-z-order"?: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
        "icon-allow-overlap"?: PropertyValueSpecificationEx<boolean>;
        "icon-ignore-placement"?: PropertyValueSpecificationEx<boolean>;
        "icon-optional"?: PropertyValueSpecificationEx<boolean>;
        "icon-rotation-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "icon-size"?: DataDrivenPropertyValueSpecification<number>;
        "icon-text-fit"?: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
        "icon-text-fit-padding"?: PropertyValueSpecificationEx<[number, number, number, number]>;
        "icon-image"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
        "icon-rotate"?: DataDrivenPropertyValueSpecification<number>;
        "icon-padding"?: PropertyValueSpecificationEx<number>;
        "icon-keep-upright"?: PropertyValueSpecificationEx<boolean>;
        "icon-offset"?: DataDrivenPropertyValueSpecification<[number, number]>;
        "icon-anchor"?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
        "icon-pitch-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "text-pitch-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "text-rotation-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "text-field"?: DataDrivenPropertyValueSpecification<FormattedSpecification>;
        "text-font"?: DataDrivenPropertyValueSpecification<Array<string>>;
        "text-size"?: DataDrivenPropertyValueSpecification<number>;
        "text-max-width"?: DataDrivenPropertyValueSpecification<number>;
        "text-line-height"?: DataDrivenPropertyValueSpecification<number>;
        "text-letter-spacing"?: DataDrivenPropertyValueSpecification<number>;
        "text-justify"?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
        "text-radial-offset"?: DataDrivenPropertyValueSpecification<number>;
        "text-variable-anchor"?: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
        "text-anchor"?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
        "text-max-angle"?: PropertyValueSpecificationEx<number>;
        "text-writing-mode"?: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
        "text-rotate"?: DataDrivenPropertyValueSpecification<number>;
        "text-padding"?: PropertyValueSpecificationEx<number>;
        "text-keep-upright"?: PropertyValueSpecificationEx<boolean>;
        "text-transform"?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
        "text-offset"?: DataDrivenPropertyValueSpecification<[number, number]>;
        "text-allow-overlap"?: PropertyValueSpecificationEx<boolean>;
        "text-ignore-placement"?: PropertyValueSpecificationEx<boolean>;
        "text-optional"?: PropertyValueSpecificationEx<boolean>;
        visibility?: "visible" | "none";
    };
    paint?: {
        "icon-opacity"?: DataDrivenPropertyValueSpecification<number>;
        "icon-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "icon-halo-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "icon-halo-width"?: DataDrivenPropertyValueSpecification<number>;
        "icon-halo-blur"?: DataDrivenPropertyValueSpecification<number>;
        "icon-translate"?: PropertyValueSpecificationEx<[number, number]>;
        "icon-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
        "text-opacity"?: DataDrivenPropertyValueSpecification<number>;
        "text-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "text-halo-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "text-halo-width"?: DataDrivenPropertyValueSpecification<number>;
        "text-halo-blur"?: DataDrivenPropertyValueSpecification<number>;
        "text-translate"?: PropertyValueSpecificationEx<[number, number]>;
        "text-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
    };
};

export  type SymbolLayerStyleProp = {
    metadata?: unknown;
    source?: string;
    sourceLayer?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    symbolPlacement?: PropertyValueSpecificationEx<"point" | "line" | "line-center">;
    symbolSpacing?: PropertyValueSpecificationEx<number>;
    symbolAvoidEdges?: PropertyValueSpecificationEx<boolean>;
    symbolSortKey?: DataDrivenPropertyValueSpecification<number>;
    symbolZOrder?: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
    iconAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    iconIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    iconOptional?: PropertyValueSpecificationEx<boolean>;
    iconRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    iconSize?: DataDrivenPropertyValueSpecification<number>;
    iconTextFit?: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
    iconTextFitPadding?: PropertyValueSpecificationEx<[number, number, number, number]>;
    iconImage?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    iconRotate?: DataDrivenPropertyValueSpecification<number>;
    iconPadding?: PropertyValueSpecificationEx<number>;
    iconKeepUpright?: PropertyValueSpecificationEx<boolean>;
    iconOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    iconAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    iconPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textField?: DataDrivenPropertyValueSpecification<FormattedSpecification>;
    textFont?: DataDrivenPropertyValueSpecification<Array<string>>;
    textSize?: DataDrivenPropertyValueSpecification<number>;
    textMaxWidth?: DataDrivenPropertyValueSpecification<number>;
    textLineHeight?: DataDrivenPropertyValueSpecification<number>;
    textLetterSpacing?: DataDrivenPropertyValueSpecification<number>;
    textJustify?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
    textRadialOffset?: DataDrivenPropertyValueSpecification<number>;
    textVariableAnchor?: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
    textAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    textMaxAngle?: PropertyValueSpecificationEx<number>;
    textWritingMode?: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
    textRotate?: DataDrivenPropertyValueSpecification<number>;
    textPadding?: PropertyValueSpecificationEx<number>;
    textKeepUpright?: PropertyValueSpecificationEx<boolean>;
    textTransform?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
    textOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    textAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    textIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    textOptional?: PropertyValueSpecificationEx<boolean>;
    visibility?: "visible" | "none";
    iconOpacity?: DataDrivenPropertyValueSpecification<number>;
    iconColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    iconHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    iconTranslate?: PropertyValueSpecificationEx<[number, number]>;
    iconTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    textOpacity?: DataDrivenPropertyValueSpecification<number>;
    textColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    textHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    textTranslate?: PropertyValueSpecificationEx<[number, number]>;
    textTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
};

export  interface SymbolOptions extends OverlayLayerBaseOptions {
    data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any;
    symbolPlacement?: PropertyValueSpecificationEx<"point" | "line" | "line-center">;
    symbolSpacing?: PropertyValueSpecificationEx<number>;
    symbolAvoidEdges?: PropertyValueSpecificationEx<boolean>;
    symbolSortKey?: DataDrivenPropertyValueSpecification<number>;
    symbolZOrder?: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
    iconAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    iconIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    iconOptional?: PropertyValueSpecificationEx<boolean>;
    iconRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    iconSize?: DataDrivenPropertyValueSpecification<number>;
    iconTextFit?: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
    iconTextFitPadding?: PropertyValueSpecificationEx<[number, number, number, number]>;
    iconImage?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    iconRotate?: DataDrivenPropertyValueSpecification<number>;
    iconPadding?: PropertyValueSpecificationEx<number>;
    iconKeepUpright?: PropertyValueSpecificationEx<boolean>;
    iconOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    iconAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    iconPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textField?: DataDrivenPropertyValueSpecification<FormattedSpecification>;
    textFont?: DataDrivenPropertyValueSpecification<string[]>;
    textSize?: DataDrivenPropertyValueSpecification<number>;
    textMaxWidth?: DataDrivenPropertyValueSpecification<number>;
    textLineHeight?: DataDrivenPropertyValueSpecification<number>;
    textLetterSpacing?: DataDrivenPropertyValueSpecification<number>;
    textJustify?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
    textRadialOffset?: DataDrivenPropertyValueSpecification<number>;
    textVariableAnchor?: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
    textAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    textMaxAngle?: PropertyValueSpecificationEx<number>;
    textWritingMode?: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
    textRotate?: DataDrivenPropertyValueSpecification<number>;
    textPadding?: PropertyValueSpecificationEx<number>;
    textKeepUpright?: PropertyValueSpecificationEx<boolean>;
    textTransform?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
    textOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    textAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    textIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    textOptional?: PropertyValueSpecificationEx<boolean>;
    iconOpacity?: DataDrivenPropertyValueSpecification<number>;
    iconColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    iconHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    iconTranslate?: PropertyValueSpecificationEx<[number, number]>;
    iconTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    textOpacity?: DataDrivenPropertyValueSpecification<number>;
    textColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    textHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    textTranslate?: PropertyValueSpecificationEx<[number, number]>;
    textTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
}