唯杰地图 logo唯杰地图
VJMAP
EN

div覆盖物

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

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

如果是svg，则需设置为 viewBox="0 0 width height" preserveAspectRatio="xMinYMin meet", updateDivSize选项设置为true

常用方法

方法 描述
setVisible 设置是否显示隐藏
addTo 增加至地图
remove 移除
updateBounds 更新范围
updateSize 更新大小

菜单项类型

类型 描述
bounds 范围，四个点坐标
element html元素
width 元素宽
height 元素高
minZoom 显示最大级别
maxZoom 显示最小级别
maxZoom 显示最小级别
maxPitch 显示最大倾斜角
updateDivSize 自动更新div大小，（如果需要svg放大，需要设置为true)
maxDivSize 放大div时，最大的div大小，超过了就像素放大了

用法

const imageWidth = 1280; // 图像宽
const imageHeight = 905; // 图像高
const image = document.createElement( "img" );
image.style.position = "absolute"; // 有多个divoverlay时，一定要加定位，否则会导致其他绘制不对
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"

// 增加一个DIV的Image覆盖物
const divOverlay = new vjmap.DivOverlay({
    bounds: points, // 四个点的位置
    element: image, // DIV 元素
    width: imageWidth,// DIV 宽
    height: imageHeight,// DIV 高
    minZoom: 5, // 能显示的最小级别 （可以不填）
    maxZoom: 15 // 能显示的最大级别 （可以不填）
})
divOverlay.addTo(map);
在沙箱中运行，调用唯杰地图公共演示服务


示例

image-20240928102640288

div覆盖物绘制图片

div覆盖物绘制渐变多边形

一个有高度的div覆盖物

div覆盖物绘制雷达效果

div覆盖物绘制SVG图形

地图加载组态SVG图形

类型定义文件

/**
 * 在一个地理范围内创建一个随缩放而缩放的div的覆盖物
 * 注：如果是svg，则需设置为 viewBox="0 0 width height" preserveAspectRatio="xMinYMin meet", updateDivSize选项设置为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;
    /**
     * 设置是否显示隐藏
     * @param visible 是否显示
     * @param isDisplay true的话，表示用style的display去控制隐藏显示，dom还在文档中。false的话，会从文档动态清空增加
     */
    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: [GeoPointLike, GeoPointLike, GeoPointLike, GeoPointLike] | GeoBounds;
    /** html元素 */
    element: HTMLElement;
    /** 元素宽 */
    width: number;
    /** 元素高 */
    height: number;
    /** 显示最大级别 */
    minZoom?: number;
    /** 显示最小级别 */
    maxZoom?: number;
    /** 显示最大倾斜角 */
    maxPitch?: number;
    /** 自动更新div大小，（如果需要svg放大，需要设置为true) */
    updateDivSize?: boolean;
    /** 放大div时，最大的div大小，超过了就像素放大了 */
    maxDivSize?: number;
}
这篇文档有帮助吗？