圆符号

用法

let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "circle1",
                "color": "#00ffff"
            },
            "geometry": {
                "coordinates": [
                    6971.5378667085715,
                    14385.014943907285
                ],
                "type": "Point"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "circle2",
                "color": "#ff00ff"
            },
            "geometry": {
                "coordinates": [
                    21789.770621477073,
                    14037.169104593304
                ],
                "type": "Point"
            }
        }
    ]
}
let circle = new vjmap.Circle({
    data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
    // 图标名来源于geojson属性中的icon字段
    circleColor: ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
    circleRadius: 5,
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);
circle.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
circle.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });

显示代码

全屏显示

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

map.addSource("circleSources", {
    type: "geojson",
    data: data
});
map.addLayer({
    id: 'circleLayer',
    source: 'circleSources',
    type: 'symbol',
    "layout": {},
    "paint": {
        'circle-color': ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
        'circle-radius': 10
    }
})

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

map.addGeoJSONSource("circleSources", data);
map.addCircleLayer("circleLayer", "circleSources", {
    circleColor: ['case', ["boolean", ["feature-state", "hover"], false], '#ff0000', ['get', 'color']],
    circleRadius: 10
})

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

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

常用方法

修改数据用 setData

circle.setData(newDataJson);

获取图层ID、数据源ID

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

显示或隐藏

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

删除

// 删除
circle.remove()

类型定义

/**
 * 创建圆符号图层.
 *
 **/
export  class Circle extends OverlayLayerBase {
    options: CircleOptions;
    constructor(options: CircleOptions);
    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;
    setCircleSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
    getCircleSortKey(): DataDrivenPropertyValueSpecification<number>;
    setVisibility(value: "visible" | "none"): this;
    getVisibility(): "visible" | "none";
    setCircleRadius(value: DataDrivenPropertyValueSpecification<number>): this;
    getCircleRadius(): DataDrivenPropertyValueSpecification<number>;
    setCircleColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getCircleColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setCircleBlur(value: DataDrivenPropertyValueSpecification<number>): this;
    getCircleBlur(): DataDrivenPropertyValueSpecification<number>;
    setCircleOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    getCircleOpacity(): DataDrivenPropertyValueSpecification<number>;
    setCircleTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
    getCircleTranslate(): PropertyValueSpecificationEx<[number, number]>;
    setCircleTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getCircleTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
    setCirclePitchScale(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getCirclePitchScale(): PropertyValueSpecificationEx<"map" | "viewport">;
    setCirclePitchAlignment(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getCirclePitchAlignment(): PropertyValueSpecificationEx<"map" | "viewport">;
    setCircleStrokeWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getCircleStrokeWidth(): DataDrivenPropertyValueSpecification<number>;
    setCircleStrokeColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getCircleStrokeColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setCircleStrokeOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    getCircleStrokeOpacity(): DataDrivenPropertyValueSpecification<number>;
}

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 CircleLayerSpecification = {
    id: string;
    type: "circle";
    metadata?: unknown;
    source: string;
    "source-layer"?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    layout?: {
        "circle-sort-key"?: DataDrivenPropertyValueSpecification<number>;
        visibility?: "visible" | "none";
    };
    paint?: {
        "circle-radius"?: DataDrivenPropertyValueSpecification<number>;
        "circle-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "circle-blur"?: DataDrivenPropertyValueSpecification<number>;
        "circle-opacity"?: DataDrivenPropertyValueSpecification<number>;
        "circle-translate"?: PropertyValueSpecificationEx<[number, number]>;
        "circle-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
        "circle-pitch-scale"?: PropertyValueSpecificationEx<"map" | "viewport">;
        "circle-pitch-alignment"?: PropertyValueSpecificationEx<"map" | "viewport">;
        "circle-stroke-width"?: DataDrivenPropertyValueSpecification<number>;
        "circle-stroke-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "circle-stroke-opacity"?: DataDrivenPropertyValueSpecification<number>;
    };
};

export  type CircleLayerStyleProp = {
    metadata?: unknown;
    source?: string;
    sourceLayer?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    circleSortKey?: DataDrivenPropertyValueSpecification<number>;
    visibility?: "visible" | "none";
    circleRadius?: DataDrivenPropertyValueSpecification<number>;
    circleColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    circleBlur?: DataDrivenPropertyValueSpecification<number>;
    circleOpacity?: DataDrivenPropertyValueSpecification<number>;
    circleTranslate?: PropertyValueSpecificationEx<[number, number]>;
    circleTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    circlePitchScale?: PropertyValueSpecificationEx<"map" | "viewport">;
    circlePitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport">;
    circleStrokeWidth?: DataDrivenPropertyValueSpecification<number>;
    circleStrokeColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    circleStrokeOpacity?: DataDrivenPropertyValueSpecification<number>;
};

export  interface CircleOptions extends OverlayLayerBaseOptions {
    data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any;
    circleSortKey?: DataDrivenPropertyValueSpecification<number>;
    circleRadius?: DataDrivenPropertyValueSpecification<number>;
    circleColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    circleBlur?: DataDrivenPropertyValueSpecification<number>;
    circleOpacity?: DataDrivenPropertyValueSpecification<number>;
    circleTranslate?: PropertyValueSpecificationEx<[number, number]>;
    circleTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    circlePitchScale?: PropertyValueSpecificationEx<"map" | "viewport">;
    circlePitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport">;
    circleStrokeWidth?: DataDrivenPropertyValueSpecification<number>;
    circleStrokeColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    circleStrokeOpacity?: DataDrivenPropertyValueSpecification<number>;
}