@tuoyuan/map-adapter-amap
Version:
高德地图适配器
157 lines (156 loc) • 5.85 kB
JavaScript
var w = Object.defineProperty;
var I = (r, a, t) => a in r ? w(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
var c = (r, a, t) => I(r, typeof a != "symbol" ? a + "" : a, t);
import { BasePolygon as x, Position as d, Pixel as b, Bounds as u } from "@tuoyuan/map-adapter-lib";
class C extends x {
constructor(t, e) {
super(t._top, e, {});
c(this, "_ctx");
c(this, "polygonInstance");
c(this, "labelInstance");
c(this, "infoWindowInstance");
this._ctx = t, this.renderPolygon(), this.renderLabel(), this.addListener((o, i) => {
this._ctx._top.options.dev && (console.groupCollapsed("[Polygon.event]", o), console.log("payload: ", i), console.groupEnd());
});
}
initEvent() {
["click", "dblclick", "rightclick"].forEach((e) => {
this.polygonInstance.on(e, (o) => {
this.emit(e, {
e: o.originEvent,
position: new d(o.lnglat.lng, o.lnglat.lat),
pixel: new b(o.pixel.x, o.pixel.y),
pos: new b(o.pos[0], o.pos[1]),
data: this.data
});
});
});
}
renderPolygon() {
var e, o, i, n, l, s;
this.polygonInstance && this.polygonInstance.remove();
const t = {
path: this._path.map((h) => h.toArray()),
strokeColor: (e = this._style.line) == null ? void 0 : e.color,
strokeOpacity: (o = this._style.line) == null ? void 0 : o.opacity,
strokeWeight: (i = this._style.line) == null ? void 0 : i.width,
fillColor: (n = this._style.fill) == null ? void 0 : n.color,
fillOpacity: (l = this._style.fill) == null ? void 0 : l.opacity,
strokeStyle: (s = this._style.line) == null ? void 0 : s.style
};
this.polygonInstance = new this._ctx.AMap.Polygon(t), this._ctx._map.add(this.polygonInstance), this.initEvent();
}
renderLabel() {
var o, i, n, l, s, h, p, g, y, f, _, m;
if (this.labelInstance && this.labelInstance.remove(), !((o = this._label) != null && o.text)) return;
const t = (i = this.polygonInstance.getBounds()) == null ? void 0 : i.getCenter(), e = {
name: this._name,
position: [t.lng, t.lat],
text: (n = this._label) == null ? void 0 : n.text,
visible: (l = this._label) == null ? void 0 : l.visible,
// 动态计算位置和偏移量
anchor: "bottom-center",
offset: ((g = (p = (h = (s = this._label) == null ? void 0 : s.getRealOffset) == null ? void 0 : h.call(s, {
padding: [2, 3, 2, 3]
})) == null ? void 0 : p.toArray) == null ? void 0 : g.call(p)) ?? [0, (y = this._icon) == null ? void 0 : y.getRealOffset().y],
style: {
border: "none",
"background-color": (f = this._label) == null ? void 0 : f.backgroundColor,
"font-size": ((_ = this._label) == null ? void 0 : _.fontSize) + "px",
color: (m = this._label) == null ? void 0 : m.color
}
};
this.labelInstance = new this._ctx.AMap.Text(e), this._ctx._map.add(this.labelInstance);
}
setPath(t) {
super.setPath(t), this.polygonInstance.setPath(this._path.map((e) => e.toArray()));
}
setStyle(t) {
var o, i, n, l, s, h;
super.setStyle(t);
const e = {
strokeColor: (o = this._style.line) == null ? void 0 : o.color,
strokeOpacity: (i = this._style.line) == null ? void 0 : i.opacity,
strokeWeight: (n = this._style.line) == null ? void 0 : n.width,
fillColor: (l = this._style.fill) == null ? void 0 : l.color,
fillOpacity: (s = this._style.fill) == null ? void 0 : s.opacity,
strokeStyle: (h = this._style.line) == null ? void 0 : h.style
};
this.polygonInstance.setOptions(e);
}
hidden() {
super.hidden(), this.polygonInstance.hide();
}
show() {
super.show(), this.polygonInstance.show();
}
showLabel() {
var t, e;
super.showLabel(), (e = (t = this.labelInstance) == null ? void 0 : t.show) == null || e.call(t);
}
hiddenLabel() {
var t, e;
super.hiddenLabel(), (e = (t = this.labelInstance) == null ? void 0 : t.hide) == null || e.call(t);
}
getInstances() {
return [this.polygonInstance, this.labelInstance].filter((e) => !!e);
}
remove() {
this.closeInfoWindow(), this.getInstances().forEach((t) => t.remove());
}
panTo() {
this._ctx._map.setFitView(this.getInstances());
}
getBounds() {
const { northEast: t, southWest: e } = this.polygonInstance.getBounds();
return u.getBounds([
new d(t.lng, t.lat),
new d(e.lng, e.lat)
]);
}
getArea() {
return this.polygonInstance.getArea();
}
openInfoWindow(t) {
this.closeInfoWindow();
let e = "";
t.url ? e = `<div style="width:${t.size.width}px; height:${t.size.height}px; padding:10px;">
<iframe src=${t.url}
width="100%"
height="100%"
frameborder="0">
</iframe>
</div>` : e = `<div style="width:${t.size.width}px; height:${t.size.height}px; overflow: hidden; pointer-events: auto;">
${t.html}
</div>`;
const i = {
isCustom: !0,
autoMove: !1,
closeWhenClickMap: !1,
content: e,
anchor: {
bottom: "top-center",
top: "bottom-center",
right: "middle-left",
left: "middle-right",
"right-bottom": "top-left",
"right-top": "bottom-left",
"left-bottom": "top-right",
"left-top": "bottom-right"
}[t.placement ?? "top"],
position: u.getCenter(this.getBounds()).toArray()
}, n = new this._ctx.AMap.InfoWindow(i);
n.open(this._ctx._map), n.dom.style.height = "0";
const l = n.dom.querySelector(".amap-info-contentContainer");
l && (l.style.pointerEvents = "none"), n.on("close", () => {
const s = n.dom;
s.parentNode.removeChild(s);
});
}
closeInfoWindow() {
this._ctx._map.clearInfoWindow();
}
}
export {
C as AMapPolygon
};