唯杰地图 logo唯杰地图
VJMAP
EN

svg覆盖物

更新于 2024-09-28约 12 分钟
.md
ChatGPTClaudeKimi豆包

SvgOverlay 在一个地理范围内创建一个随缩放而缩放的svg的覆盖物

svg覆盖物性能低，不建议大量使用，同时在级别特别大时会导致失真，在倾斜角很大时会导致不可见

类型定义

// 在一个地理范围内创建一个随缩放而缩放的svg的覆盖物
export  class SvgOverlay {
    constructor(options?: {
        /** 显示最大级别 */
        minZoom?: number;
        /** 显示最小级别 */
        maxZoom?: number;
        /** 显示最大倾斜角 */
        maxPitch?: number;
        /** 自动更新div大小，（如果需要svg放大，需要设置为true) */
        updateDivSize?: boolean;
        /** 放大div时，最大的div大小，超过了就像素放大了 */
        maxDivSize?: number;
        /** 当移动结束时不自动更新范围 */
        noUpdateBoundsWhenMoveend?: boolean;
        /** 类名 */
        divClassName?: string;
        /** svg初始化时最大像素宽,默认1000 */
        svgMaxWidth?: number;
        /** svg初始化时最大像素高,默认1000 */
        svgMaxHeight?: number;
        /** svg初始化时Offset像素距离,默认100 */
        svgOffset?: number;
    });
    addTo(map: Map, insertId?: string | HTMLElement): void;
    remove(): void;
    /**
     * 增加svg元素
     * @param element 要增加的元素
     * @param noUpdate 不立即更新
     */
    addElement(element: SvgElementOptions | string, noUpdate?: boolean): void;
    /**
     * 增加svg元素
     * @param elements 多个元素内容
     * @param noUpdate 不立即更新
     */
    addElements(elements: SvgElementOptions[], noUpdate?: boolean): void;
    /**
     * 获取svg获取
     */
    getSvgContainer(): SVGSVGElement;
    /**
     * 获取所有的元素
     */
    getElements(): SvgElementOptions[];
    /**
     * 移动一个元素
     */
    removeElements(id: string[] | string): SvgElementOptions[];
    /**
     * 更新一个元素
     */
    updateElements(elements: SvgElementOptions[] | SvgElementOptions): SvgElementOptions[];
    /**
     * 圆心半径属性字符串
     */
    static attr_cx_cy_r(cx: number, cy: number, r: number): string;
    /**
     * 椭圆心半径属性字符串
     */
    static attr_cx_cy_rx_ry(cx: number, cy: number, rx: number, ry: number): string;
    /**
     * 直线坐标属性字符串
     */
    static attr_x1_y1_x2_y2(x1: number, y1: number, x2: number, y2: number): string;
    /**
     * 坐标宽高属性字符串
     */
    static attr_x_y_w_h(x: number, y: number, w: number, h: number): string;
    /**
     * 坐标属性字符串
     */
    static attr_x_y(x: number, y: number): string;
    /**
     * 字体属性字符串
     */
    static attr_fontsize(fontsize: number): string;
    /**
     * 和长度有关属性字符串
     */
    static attr_length(len: number): string;
    /**
     * 和点坐标有关属性字符串
     */
    static attr_point(point: GeoPoint, joinComma?: boolean): string;
    /**
     * 坐标序列属性字符串
     */
    static attr_points(points: GeoPoint[]): string;
    /**
     * 路径序列属性字符串
     */
    static attr_path(points: GeoPoint[]): string;
}

用法

let mapBounds = map.getGeoBounds();
let len = mapBounds.width() / 5;
let svgOverlay = new vjmap.SvgOverlay({
    maxZoom: 5, // 第5级时全部不显示了
    maxPitch: 60 // 倾角超过60度就不显示了
});
svgOverlay.addTo(map);

// 增加一个渐变色
svgOverlay.addElement(`
          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:${vjmap.randomColor()};stop-opacity:0.8" />
              <stop offset="100%" style="stop-color:${vjmap.randomColor()};stop-opacity:1" />
            </radialGradient>
          </defs>
        `)
const getStyle = (style = {}) => {
    return Object.keys(style).map(key => `${key}:${style[key]}`).join(";")
}
const svgCircleHtml = (id, point, r, style) => {
    return ` <circle id="${id}" ${vjmap.SvgOverlay.attr_cx_cy_r(point.x, point.y, r)} style="${getStyle(style)}"/>`
}

const addCircle = ()=> {
    let id = "circle" + vjmap.RandomID();
    return svgOverlay.addElement({
        html: svgCircleHtml(id, mapBounds.randomPoint(), len / 4, {fill: "url(#grad1)", stroke: vjmap.randomColor(), "stroke-width": 3, cursor: "pointer"}),
        event: svgParentElement => {
            // 事件回调
            let ele = svgParentElement.getElementById(id);
            if (!ele) return;
            ele.addEventListener("mouseover", e => ele.style.opacity = 0.6);
            ele.addEventListener("mouseout", e => ele.style.opacity = 1.0);
            ele.addEventListener("click", e => message.info("点击了圆" + id));
        }
    })
}
for(let i = 0; i < 10; i++) {
    addCircle();
}
在沙箱中运行，调用唯杰地图公共演示服务


示例

image-20240928104939832
image-20240928104939832

SVG覆盖物

SVG事件

SVG动画

这篇文档有帮助吗？