🌍yymap

Appearance

YY. Overlay ​

覆盖物的抽象类，点，线，面，圆形等的基类，其具有的方法，点，线，面等要素都具有

DANGER

其只是一个抽象类, 不应用于实际使用，其意义为用来描述所有覆盖物的公共行为和属性

其子类有:

Overlay
│   Point
│   MultiPoint
│   Text
│   Polyline
│   LineString
│   MultiLineString
│   Polygon
│   MultiPolygon
│   Rectangle
│   Circle
│   Ellipse
│   Sector
│   ArcCurve
│   ConnectorLine
│   ArcConnectorLine
│   ......

creation ​

  • constructor()

events ​

editrecord ​

editrecord

dragstart ​

dragstart

dragging ​

dragging

dragend ​

dragend

editstart ​

editstart

editend ​

editend

redoedit ​

redoedit

undoedit ​

undoedit

idchange ​

idchange

propertieschange ​

propertieschange

show ​

show

hide ​

hide

zindexchange ​

zindexchange

removestart ​

removestart

removeend ​

removeend

remove ​

remove

shapechange ​

shapechange

positionchange ​

positionchange

symbolchange ​

symbolchange

add ​

add

mousedown ​

mousedown

mouseup ​

mouseup

mousemove ​

mousemove

click ​

click

dblclick ​

dblclick

contextmenu ​

contextmenu

js
var point = new YY.Point(
    [120.53207100578902, 31.407848582671903],
    YY.Style.formatImage({
        markerFile: "../../../../assets/icons/0001.png"
    })
);

var text = new YY.Text([120.23757934570312, 31.063544373155793]);

var polyline = new YY.Polyline(
    [
        [120.62558, 31.30043],
        [120.791015625, 31.310257642312564],
    ],
    YY.Style.formatLine({
        lineWidth: 10
    })
);

var polygon = new YY.Polygon([
    [120.6114, 31.27683],
    [120.6666, 31.23761],
    [120.57162, 31.21344],
]);

var rec = new YY.Rectangle(
    [120.42091369628906, 31.119992647233545],
    10000,
    3000
);

var circle = new YY.Circle([120.80818176269531, 31.555156204332008], 6000);

var ellipse = new YY.Ellipse(
    [120.35568237304688, 31.300870831588014],
    20000,
    10000
);

var sector = new YY.Sector(
    [120.76766967773438, 31.0870685629383],
    10000,
    20,
    180
);

var arcCurve = new YY.ArcCurve(
    [
        [120, 31],
        [120, 31.1],
        [120, 31.2],
    ],
    YY.Style.formatLine({
        lineColor: "red",
        lineWidth: 8
    })
);

var overlays = [
    point,
    text,
    polyline,
    polygon,
    rec,
    circle,
    ellipse,
    sector,
    arcCurve,
];

vectorLayer.addOverlays(overlays);
point.on("click", function(e) {});

methods ​

getId() ​

  • 获取 id
  • 返回值： String

setId(id) ​

  • 设置 id
  • 参数
    • {Stirng} id:
  • 返回值： this

getProperties() ​

  • 获取属性信息
  • 返回值： Object

setProperties(properties) ​

  • 设置属性信息
  • 参数
    • {Object} properties:
  • 返回值： this

getType() ​

  • 获取类别
  • 返回值： String

getStyle() ​

setStyle(style) ​

demo

  • 设置 style 样式
  • 参数
  • 返回值： this
js
var point = new YY.Point(
    [120.53207100578902, 31.407848582671903],
    YY.Style.formatImage({
        markerFile: "../../../../assets/icons/0003.png"
    })
);

vectorLayer.addOverlay(point);

setTimeout(() => {
    let style = YY.Style.formatImage({
        markerFile: "../../../../assets/icons/0001.png",
    });
    point.setStyle(style);
}, 1000);

updateStyle(style) ​

  • 更新 style 样式
  • 参数
  • 返回值： this
js
var point = new YY.Point(
    [120.53207100578902, 31.407848582671903],
    YY.Style.formatImage({
        markerFile: "../../../../assets/icons/0003.png"
    })
);

vectorLayer.addOverlay(point);

setTimeout(() => {
    let style = YY.Style.formatImageAndText({
        markerFile: "../../../../assets/icons/0001.png",
        textName: "hello",
        textDy: -30,
    });
    point.updateStyle(style);
}, 1000);

getCenter() ​

containsPoint(lnglat) ​

  • 是否包含所给的经纬度坐标
  • 参数
  • 返回值： Boolean

show() ​

  • 显示
  • 返回值： this

hide() ​

  • 隐藏
  • 返回值： this

isVisible() ​

  • 判断是否可见
  • 返回值： Boolean

getZIndex() ​

  • 获取层级值
  • 返回值： Number

setZIndex(zIndex) ​

  • 设置层级大小
  • 参数
    • {Number} zIndex:
  • 返回值： this

bindTooltip(content, [options]) ​

  • 绑定提示消息组件 demo
  • 参数
    • {String} content:
    • {Object} options:
  • 返回值： this
js
var point = new YY.Point(
    [120.53207100578902, 31.407848582671903],
    YY.Style.formatImage({
        markerFile: "../../../../assets/icons/0001.png"
    })
);

var text = new YY.Text([120.23757934570312, 31.063544373155793]);

var polyline = new YY.Polyline(
    [
        [120.62558, 31.30043],
        [120.791015625, 31.310257642312564],
    ],
    YY.Style.formatLine({
        lineWidth: 4
    })
);

var polygon = new YY.Polygon([
    [120.6114, 31.27683],
    [120.6666, 31.23761],
    [120.57162, 31.21344],
]);

var rectangle = new YY.Rectangle(
    [120.42091369628906, 31.119992647233545],
    10000,
    3000
);

var circle = new YY.Circle([120.80818176269531, 31.555156204332008], 6000);

var ellipse = new YY.Ellipse(
    [120.35568237304688, 31.300870831588014],
    20000,
    10000
);

var sector = new YY.Sector(
    [120.76766967773438, 31.0870685629383],
    10000,
    20,
    180
);

var arcCurve = new YY.ArcCurve(
    [
        [120, 31],
        [120, 31.1],
        [120, 31.2],
    ],
    YY.Style.formatLine({
        lineColor: "red",
        lineWidth: 8
    })
);

var overlays = [
    point,
    text,
    polyline,
    polygon,
    rectangle,
    circle,
    ellipse,
    sector,
    arcCurve,
];

vectorLayer.addOverlays(overlays);

overlays.forEach((element) => {
    element.bindTooltip(element.getType());
});

getTooltip() ​

openTooltip([lnglat]) ​

  • 打开 tooltip
  • 参数
  • 返回值： this

closeTooltip() ​

  • 关闭 tooltip
  • 返回值： this

removeTooltip() ​

  • 移除提示消息组件
  • 返回值： this

bindPopup(content, [options]) ​

  • 绑定消息弹出框组件 demo
  • 参数
    • {String} content:
    • {Object} options:
  • 返回值： this
js
var point = new YY.Point(
    [120.53207100578902, 31.407848582671903],
    YY.Style.formatImage({
        markerFile: "../../../../assets/icons/0001.png"
    })
);

var text = new YY.Text([120.23757934570312, 31.063544373155793]);

var polyline = new YY.Polyline(
    [
        [120.62558, 31.30043],
        [120.791015625, 31.310257642312564],
    ],
    YY.Style.formatLine({
        lineWidth: 4
    })
);

var polygon = new YY.Polygon([
    [120.6114, 31.27683],
    [120.6666, 31.23761],
    [120.57162, 31.21344],
]);

var rectangle = new YY.Rectangle(
    [120.42091369628906, 31.119992647233545],
    10000,
    3000
);

var circle = new YY.Circle([120.80818176269531, 31.555156204332008], 6000);

var ellipse = new YY.Ellipse(
    [120.35568237304688, 31.300870831588014],
    20000,
    10000
);

var sector = new YY.Sector(
    [120.76766967773438, 31.0870685629383],
    10000,
    20,
    180
);

var arcCurve = new YY.ArcCurve(
    [
        [120, 31],
        [120, 31.1],
        [120, 31.2],
    ],
    YY.Style.formatLine({
        lineColor: "red",
        lineWidth: 8
    })
);

var overlays = [
    point,
    text,
    polyline,
    polygon,
    rectangle,
    circle,
    ellipse,
    sector,
    arcCurve,
];

vectorLayer.addOverlays(overlays);

overlays.forEach((element) => {
    element.bindPopup(element.getType());
});

getPopup() ​

  • 获取消息弹出框组件
  • 返回值： YY. Popup

openPopup([lnglat]) ​

  • 打开消息弹出框组件
  • 参数
  • 返回值： this

closePopup() ​

  • 关闭消息弹出框组件
  • 返回值： this

removePopup() ​

  • 移除消息弹出框组件
  • 返回值： this

config(conf) ​

  • 动态修改覆盖物的配置
  • 参数
    • {Object} conf:
  • 返回值： this

getBounds() ​

getMap() ​

  • 获取地图对象
  • 返回值： YY. Map

getDistance() ​

  • 获取覆盖物的长度/距离
  • 返回值： Number

getArea() ​

  • 获取覆盖物的面积
  • 返回值： Number

clone() ​

animate(styleOptions, options, step) ​

  • 动画函数，主要用于动态修改覆盖物的样式
  • 参数
    • {Object} styleOptions: 样式配置
    • {Object} options: 动画配置
    • {function} step: 动画回调函数
  • 返回值： this
js
let style = YY.Style.formatGraphical({
    markerWidth: 50,
    markerHeight: 30,
    markerType: "bar",
    markerFill: "red",
    markerLineColor: "white",
});
let point = new YY.Point([120, 31], style);
vectorLayer.addOverlay(point);

point.animate({
    markerHeight: 100,
    markerWidth: 30,
}, {
    duration: 1500,
});

setMenu(options) ​

  • 设置右键菜单，上下文菜单
  • 参数
    • {Object} options
  • 返回值： this
js
var options = {
    custom: true,
    items: '<ul class="custom_menu">' +
        '<li onclick="clickItem(this);">Locate</li>' +
        '<li onclick="clickItem(this);">Mark</li>' +
        '<li onclick="clickItem(this);">Identify</li>' +
        '<li onclick="clickItem(this);">About</li>' +
        "</ul>",
};
overlay.setMenu(options);

removeMenu() ​

  • 移除右键菜单，上下文菜单
  • 返回值： this

openMenu(lnglat) ​

  • 打开右键菜单，上下文菜单
  • 参数
  • 返回值： this

closeMenu() ​

  • 关闭右键菜单，上下文菜单

  • 返回值： this

  • split()

    • 自身拆分，主要是用于将 multi 拆分成多个 overlay, 比如 MultiPoint 会被拆分成多个 Point
    • 返回值： Array[Overlay]

serialize() ​

  • 序列化，将 Overlay 格式化成扁平的 json 对象，方便存储到数据库 demo
  • 返回值： Object
js
const overlays = [
    point,
    polyline,
    polygon,
    text,
    lineString,
    multiPoint,
    multiLineString,
    multiPolygon,
    circle,
    rectangle,
    ellipse,
    sector,
    arcCurve,
    connectorLine,
    arcConnectorLine,
];
vectorLayer.addOverlay(overlays);
overlays.forEach((overlay) => {
    //序列化，可以将其值直接存储到数据库
    console.log(overlay.serialize());
});

on(events, handler, [context]) ​

  • 事件监听
  • 参数
    • {String} events:click, ......
    • {function} handler: 处理函数
    • {context} context: 上下文, 默认 this
  • 返回值： this

once(events, handler, [context]) ​

  • 事件监听只有一次
  • 参数
    • {String} events:click, ......
    • {function} handler: 处理函数
    • {context} context: 上下文, 默认 this
  • 返回值： this

off(events, handler, [context]) ​

  • 移除事件监听
  • 参数
    • {String} events:click, ......
    • {function} handler: 处理函数
    • {context} context: 上下文, 默认 this
  • 返回值： this

fire(eventType, param) ​

  • 派发事件
  • 参数
    • {String} eventType:click, ......
    • {Object} param: 传递的参数
  • 返回值： this

This document is generated by vitepress and Edit by deyihu

Email:mehudeyi@163.com