@tuoyuan/map-adapter-tmap
Version:
天地图适配器
117 lines (116 loc) • 5.01 kB
JavaScript
var u = Object.defineProperty;
var x = (i, s, e) => s in i ? u(i, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[s] = e;
var c = (i, s, e) => x(i, typeof s != "symbol" ? s + "" : s, e);
import { BasePolyline as w, Position as L, Pixel as m, getDPI as v, pxToPt as P, Bounds as T } from "@tuoyuan/map-adapter-lib";
class z extends w {
constructor(e, t) {
super(e._top, t, {
labelBasePlacement: "right-bottom"
});
c(this, "_ctx");
/** 天地图polyline实例 */
c(this, "polylineInstance");
c(this, "labelInstance");
this._ctx = e, this.renderPolyline(), this.renderLabel(), this.addListener((n, l) => {
this._ctx._top.options.dev && (console.groupCollapsed("[Polyline.event]", n), console.log("payload: ", l), console.groupEnd());
});
}
initEvent() {
["click", "dblclick"].forEach((t) => {
this.polylineInstance.on(t, (n) => {
this.emit(t, {
e: n.originEvent,
position: new L(n.lnglat.lng, n.lnglat.lat),
pixel: new m(n.containerPoint.x, n.containerPoint.y),
data: this.data
});
});
});
}
renderLabel() {
var a, r, d, h, p, y, _, b, g, I, f;
if (this.labelInstance && this._ctx._map.removeOverLay(this.labelInstance), !((a = this._label) != null && a.text)) return;
const e = v(), t = super.findClosestPointToCentroid(this._path), n = (p = (h = (d = (r = this._label).getRealOffset) == null ? void 0 : d.call(r, {
// 天地图label容器左右内边距10px，自定义容器上下容器内边距2px
padding: [2, 10, 2, 10]
})) == null ? void 0 : h.toArray) == null ? void 0 : p.call(h), l = new this._ctx.TMap.Point(
n[0] - 12,
// 天地图label 横向偏移量
n[1] + 15
// 天地图label 纵向偏移量
), o = {
text: `<div style="line-height: 1.2; padding: 2px 0; font-size: ${(y = this._label) == null ? void 0 : y.fontSize}px">${((_ = this._label) == null ? void 0 : _.text) || ""}</div>`,
position: new this._ctx.TMap.LngLat(t == null ? void 0 : t.longitude, t == null ? void 0 : t.latitude),
offset: l
};
this.labelInstance = new this._ctx.TMap.Label(o), this.labelInstance.setBorderLine(0), this.labelInstance.setFontColor((b = this._style.label) == null ? void 0 : b.color), this.labelInstance.setFontSize(P((g = this._style.label) == null ? void 0 : g.fontSize, e)), this.labelInstance.setBackgroundColor((I = this._style.label) == null ? void 0 : I.backgroundColor), ((f = this._label) == null ? void 0 : f.visible) === !1 && this.labelInstance.hide(), this._ctx._map.addOverLay(this.labelInstance), this.initEvent();
}
renderPolyline() {
var t, n, l, o;
this.polylineInstance && this._ctx._map.removeOverLay(this.polylineInstance);
const e = this._path.map((a) => this._ctx.TMap.LngLat(a.longitude, a.latitude));
this.polylineInstance = new this._ctx.TMap.Polyline(e, {
color: (t = this._style.line) == null ? void 0 : t.color,
weight: (n = this._style.line) == null ? void 0 : n.width,
opacity: (l = this._style.line) == null ? void 0 : l.opacity,
lineStyle: (o = this._style.line) == null ? void 0 : o.style
}), this._ctx._map.addOverLay(this.polylineInstance);
}
remove() {
this.closeInfoWindow(), this.getInstances().forEach((e) => this._ctx._map.removeOverLay(e));
}
panTo() {
const e = this.getBounds(), t = T.getCenter(e);
this._ctx._map.panTo(this._ctx.TMap.LngLat(t.longitude, t.latitude));
}
getInstances() {
return [this.polylineInstance, this.labelInstance].filter((t) => !!t);
}
setName(e) {
super.setName(e);
}
setPath(e) {
super.setPath(e);
const t = e.map((n) => this._ctx.TMap.LngLat(n[0], n[1]));
this.polylineInstance.setLngLats(t);
}
setStyle(e) {
super.setStyle(e), this.renderPolyline(), this.renderLabel();
}
show() {
var e;
super.show(), this.polylineInstance.setOpacity(((e = this._style.line) == null ? void 0 : e.opacity) ?? 1);
}
hidden() {
super.hidden(), this.polylineInstance.setOpacity(0);
}
showLabel() {
var e, t;
super.showLabel(), (t = (e = this.labelInstance) == null ? void 0 : e.show) == null || t.call(e);
}
hiddenLabel() {
var e, t;
super.hiddenLabel(), (t = (e = this.labelInstance) == null ? void 0 : e.hide) == null || t.call(e);
}
openInfoWindow(e) {
let t = "";
e.url ? t = `<div style="width:${e.size.width}px; height:${e.size.height}px; padding:10px;">
<iframe src=${e.url}
width="100%"
height="100%"
frameborder="0"
scrolling="auto">
</iframe>
</div>` : t = `<div style="width:${e.size.width}px; height:${e.size.height}px;">
${e.html}
</div>`;
const n = new this._ctx.TMap.InfoWindow();
n.setContent(t), this.polylineInstance.openInfoWindow(n);
}
closeInfoWindow() {
this.polylineInstance.closeInfoWindow();
}
}
export {
z as TMapPolyline
};