@sl-utils/map 1.0.0

package/src/canvas/slu-canvas-text.ts

@@ -0,0 +1,179 @@
+
+import { u_TextSplitMultilineText } from '../utils/txt';
+import { SLUCanvas } from './slu-canvas';
+/**画布绘制文本工具类 */
+export class SLUCanvasText {
+  private static ctx: CanvasRenderingContext2D;
+  /**绘制文本（包含重叠处理）
+   * @param info 文本信息
+   * @param textRects 已绘制文本
+   * @param ctx 画布
+  */
+  public static drawText(
+    info: SLTCanvas.Text,
+    textRects: SLTCanvas.TextRect[] = [],
+    ctx: CanvasRenderingContext2D = this.ctx
+  ): void {
+    let { text = '', maxWidth = 0, font = ctx.font, ifHide } = info;
+    if (ifHide === true || !text) return null;
+    this.ctx = ctx;
+    /**字体配置决定meas的值，所以计算前需要设置配置 */
+    SLUCanvas.setCtxPara(ctx, info);
+    const texts = this.wordWrap(text, maxWidth, font);
+    const textRect = this.calcTextRect(texts, info);
+    const ctr = this.avoidOverlap(info, textRect, textRects);
+    this.renderTexts(info, texts, textRect, textRects, ctr, ctx);
+  }
+  /**对文本换行计算,按规则得到多行文本 
+   * @param text 文本
+   * @param ctx 画布
+   * @param max 最大宽度
+   * @param font 字体
+  */
+  private static wordWrap(text: string, max: number, font: string, ctx: CanvasRenderingContext2D = this.ctx): string[] {
+    /**强制分行分隔符 */
+    let strs = text.split('\n').filter(e => e != '');
+    if (max <= 0) return strs;
+    let texts: string[] = [];
+    strs.forEach((text) => {
+      texts.push(...u_TextSplitMultilineText(ctx, text, font, max, true, (str) => {
+        return [str.lastIndexOf(',') + 1]
+      }))
+    })
+    return texts
+  }
+  /**计算得到文本框(无论是否绘制背景框都需要计算)
+   * @param texts 文本组
+   * @param info 文本配置
+   * @param ctx 画布
+   */
+  private static calcTextRect(texts: string[], info: SLTCanvas.Text, ctx: CanvasRenderingContext2D = this.ctx): SLTCanvas.TextRect {
+    let { point = [20, 20], panel = {}, lineHeight, textAlign, px = 0, py = 0 } = info;
+    let w = 0, h = 0, [x0, y0] = point;
+    let { actualBoundingBoxDescent = 0 } = ctx.measureText('M');
+    h = (lineHeight || actualBoundingBoxDescent) * texts.length;
+    w = Math.max(...texts.map(text => ctx.measureText(text).width));
+    const { pl = 0, pr = pl, pt = 0, pb = pt } = panel;
+    let width = w + pl + pr, height = h + pt + pb;
+    if (textAlign === 'center') x0 -= width / 2;
+    if (textAlign === 'right') x0 -= width;
+    let textRect: SLTCanvas.TextRect = {
+      x: x0 + px,
+      y: y0 + py,
+      width: width,
+      height: height
+    };
+    return textRect;
+  }
+  /**八个方向查找空隙 
+* @param rect 文本范围
+* @param rects 已存在的文本范围
+* @returns [X轴偏移量,Y轴偏移量,状态控制标识 0-7:方位 8:正常显示 9:不显示 ]
+*/
+  private static avoidOverlap(info: SLTCanvas.Text, rect: SLTCanvas.TextRect, rects: SLTCanvas.TextRect[]): [number, number, number] {
+    const { x, y, width = 0, height = 0 } = rect, { overlap, textAlign } = info, { type = "show", querySpace = 1, maxDistance = 200, minSpacing = 0 } = overlap || {};
+    if (type === 'show') return [0, 0, 8];
+    let ifOverlap = this.isTextOverlap(rect, rects);
+    if (type === 'hide') {
+      if (ifOverlap) return [0, 0, 9]
+      return [0, 0, 8]
+    }
+    if (!ifOverlap) {
+      return [0, 0, 8];
+    } else {
+      let flag: boolean = false;
+      for (let total = 0; total <= maxDistance; total += querySpace) {
+        for (let dir = 0; dir < 8; dir++) {
+          /**根据移动方向确定xy的偏移量 dir : 0 上 4下 1-3 右 5-7左 */
+          const dirX = dir % 4 === 0 ? 0 : dir < 4 ? 1 : -1, dirY = (dir == 2 || dir == 6) ? 0 : dir < 2 || dir > 6 ? -1 : 1;
+          /**不同方位偏移量算法不一样 */
+          let px = total * dirX - (dirX < 0 ? width : 0), py = total * dirY - (dirY < 0 ? height : 0);
+          // if (!flag) {
+          //   let w = textAlign == 'center' ? width/2 : 0;
+          //   /**先左右上下移动文本框的宽度或者一半 */
+          // }
+
+          if (!this.isTextOverlap({ x: x + px, y: y + py, width, height }, rects, minSpacing)) {
+            return [px, py, dir]
+          }
+        }
+      }
+    }
+    return [0, 0, 9];
+  }
+  /**绘制文本
+   * @param info 文本配置
+   * @param texts 文本字符串组
+   * @param rect 文本框
+   * @param textRects 已绘制文本框
+   * @param ctr 偏移控制
+   */
+  private static renderTexts(info: SLTCanvas.Text, texts: string[], rect: SLTCanvas.TextRect, textRects: SLTCanvas.TextRect[], ctr: [number, number, number], ctx: CanvasRenderingContext2D) {
+    const [px, py, status] = ctr,
+      { panel = {}, overlap = {}, textAlign = 'center', px: upx = 0, py: upy = 0, point = [0, 0] } = info,
+      { pl = 0, pt = 0, pb = pt, pr = pl } = panel,
+      { line } = overlap,
+      { width = 0, height = 0 } = rect,
+      [x0, y0] = point;
+    if (status === 9) return;
+    rect.x += px, rect.y += py;
+    textRects.push({ ...rect });
+    if (px != 0 || py != 0 && line) {
+      //status 0正上 1右上 2右 3右下 4正下 5左下 6左 7左上
+      let { x: x1, y: y1 } = rect;
+      switch (status) {
+        case 0: x1 = x1, y1 = y1 + height; break;
+        case 1: x1 = x1, y1 = y1 + height; break;
+        case 2: x1 = x1, y1 = y1; break;
+        case 3: x1 = x1, y1 = y1; break;
+        case 4: x1 = x1, y1 = y1; break;
+        case 5: x1 = x1 + width, y1 = y1; break;
+        case 6: x1 = x1 + width, y1 = y1; break;
+        case 7: x1 = x1 + width, y1 = y1 + height; break;
+      }
+      SLUCanvas.drawLine({ ...line, points: [[x0, y0], [x1, y1]] }, ctx);
+    }
+    if (panel) {
+      SLUCanvas.drawRect(
+        {
+          point: [rect.x, rect.y],
+          width: rect.width,
+          height: rect.height,
+          radius: panel.radius,
+          ...panel,
+        },
+        ctx
+      );
+    }
+    SLUCanvas.setCtxPara(ctx, info);
+    this.renderMultiText(texts, [rect.x + pl, rect.y + pt], info, ctx);
+    SLUCanvas.setCtxPara(ctx);
+  }
+  /**绘制多行文本*/
+  public static renderMultiText(texts: string[], start: number[], info: SLTCanvas.Text, ctx: CanvasRenderingContext2D) {
+    let [x, y] = start;
+    const { lineHeight, ifShadow } = info;
+    let { actualBoundingBoxDescent } = ctx.measureText('M');
+    texts.forEach(text => {
+      /**文本居中 需偏移量 */
+      let fontTop = lineHeight && lineHeight > actualBoundingBoxDescent ? (lineHeight - actualBoundingBoxDescent) / 2 : 0;
+      /**行高 变化量 */
+      let dH = lineHeight || actualBoundingBoxDescent;
+      if (ifShadow) /**绘制描边 */ ctx.strokeText(text, x, y + fontTop);
+      /**绘制文本 */
+      ctx.fillText(text, x, y + fontTop);
+      y += dH;
+    })
+  }
+  /**文本是否重叠 */
+  private static isTextOverlap(rect: SLTCanvas.TextRect, rects: SLTCanvas.TextRect[], minSpacing: number = 0) {
+    for (const eRect of rects) {
+      const { x, y, width = 0, height = 0 } = rect;
+      const { x: ex, y: ey = 0, width: ew = 0, height: eh = 0 } = eRect;
+      if (!(ex > x + width + minSpacing || ex + ew + minSpacing < x || ey > y + height + minSpacing || ey + eh + minSpacing < y)) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

package/src/canvas/slu-canvas.ts

@@ -0,0 +1,188 @@
+// import { SLTCanvas.Line, SLPCanvas, SLTCanvas.Polygon, SLTCanvas.Rect, SLTCanvas.Text, SLTCanvas.Arc, SLTCanvas.Image } from "./slu-canvas.model";
+export class SLUCanvas {
+  /**canvas画布的工具类*/
+  constructor() { }
+  /** */
+  protected static ctx: CanvasRenderingContext2D;
+  /**绘图的默认配置 */
+  static readonly ctxFig: SLPCanvas = {
+    alpha: 1,
+    widthLine: 1,
+    colorLine: '#FFFFFF',
+    colorFill: '#EE3434',
+    dash: [10, 0],
+    dashOff: 0,
+    fillAlpha: 1,
+    font: '14px serif',
+    textBaseline: "top",
+    globalCompositeOperation: 'source-over',
+    shadowBlur: 0,
+    shadowColor: '#000000',
+  };
+  /**绘制小圆点 */
+  public static drawArc(arc: SLTCanvas.Arc, ctx: CanvasRenderingContext2D = this.ctx): SLUCanvas {
+    if (arc.ifHide === true) return this;
+    let { point, points = [], size = 10 } = arc;
+    if (point) points = [...points, point];
+    this.setCtxPara(ctx, arc);
+    for (let i = 0, len = points.length; i < len; i++) {
+      ctx.beginPath();
+      const e = points[i]!;
+      ctx.arc(e[0], e[1], size, 0, 2 * Math.PI, false);
+      ctx.stroke();
+      ctx.globalAlpha = arc.fillAlpha == undefined ? 1 : arc.fillAlpha;
+      ctx.fill();
+    }
+    this.setCtxPara(ctx);
+    return this;
+  }
+  /**绘制矩形 */
+  public static drawRect(rect: SLTCanvas.Rect, ctx: CanvasRenderingContext2D = this.ctx) {
+    if (rect.ifHide === true) return this;
+    let { point, points = [point], width = 0, height = 0, radius = [0, 0, 0, 0] } = rect;
+    this.setCtxPara(ctx, rect);
+    for (let i = 0; i < points.length; i++) {
+      let [x, y] = points[i] || [0, 0];
+      ctx.beginPath();
+      ctx['roundRect'](x, y, width, height, radius);
+      ctx.stroke();
+      ctx.globalAlpha = rect.fillAlpha == undefined ? 1 : rect.fillAlpha;
+      ctx.fill();
+      ctx.closePath();
+      // radius = 3;
+      // x = x + 300;
+      // ctx.beginPath();
+      // ctx.moveTo(x + radius, y);
+      // ctx.arcTo(x + width, y, x + width, y + height, radius);
+      // ctx.arcTo(x + width, y + height, x, y + height, radius);
+      // ctx.arcTo(x, y + height, x, y, radius);
+      // ctx.arcTo(x, y, x + width, y, radius);
+      // ctx.closePath();
+      // ctx.stroke();
+    }
+    this.setCtxPara(ctx);
+    return this;
+  }
+  /**画绘制多边形*/
+  public static drawPolygon(rect: SLTCanvas.Polygon, ctx: CanvasRenderingContext2D = this.ctx): SLUCanvas {
+    let { points = [] } = rect;
+    if (rect.ifHide === true || points.length < 2) return this;
+    this.setCtxPara(ctx, rect);
+    for (let i = 0, len = points.length; i < len; i++) {
+      let [x, y] = points[i];
+      if (i == 0) {
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+      } else if (i == len - 1) {
+        ctx.lineTo(x, y);
+        ctx.closePath();
+        ctx.globalAlpha = rect.fillAlpha == undefined ? 1 : rect.fillAlpha;
+        ctx.fill();
+        if (ctx.lineWidth > 0) {
+          ctx.globalAlpha = rect.alpha || 1;
+          ctx.stroke();
+        }
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+    this.setCtxPara(ctx);
+    return this;
+  }
+  /**画线*/
+  public static drawLine(line: SLTCanvas.Line, ctx: CanvasRenderingContext2D = this.ctx): SLUCanvas {
+    if (line.ifHide === true) return this;
+    let { points = [] } = line;
+    if (points.length < 2) return this;
+    this.setCtxPara(ctx, line);
+    let s = points[0] || [], lineWidth = line.widthLine || 1;
+    ctx.beginPath();
+    ctx.moveTo(s[0], s[1]);
+    for (let i = 1, len = points.length; i < len; i++) {
+      let point = points[i];
+      ctx.lineTo(point[0], point[1]);
+    }
+    ctx.stroke();
+    this.setCtxPara(ctx);
+    return this;
+  }
+  /**画贝塞尔曲线*/
+  public static drawBezierLine(line: SLTCanvas.Line, ctx: CanvasRenderingContext2D = this.ctx): SLUCanvas {
+    if (line.ifHide === true) return this;
+    let { points = [] } = line;
+    if (points.length < 2) return this;
+    this.setCtxPara(ctx, line);
+    let s = points[0],
+      degree = line.degree;
+    ctx.beginPath();
+    ctx.moveTo(s[0], s[1]);
+    for (let i = 1, len = points.length; i < len; i++) {
+      let s = points[i - 1],
+        e = points[i];
+      let c = this.getBezierCtrlPoint(s, e, degree);
+      ctx.quadraticCurveTo(c[0], c[1], e[0], e[1]);
+    }
+    ctx.stroke();
+    this.setCtxPara(ctx);
+    return this;
+  }
+  /**创建一个画布 */
+  public static createCanvas(): HTMLCanvasElement {
+    return document.createElement('canvas');
+  }
+  /**获取贝塞尔曲线的控制点
+   * @param s:起点
+   * @param e:终点
+   * @param degree：曲度等级（越大越弯曲）
+   */
+  public static getBezierCtrlPoint(s: [number, number], e: [number, number], degree: number = 1): [number, number] {
+    const e0 = s,
+      e1 = e,
+      c = [(e0[0] + e1[0]) / 2, (e0[1] + e1[1]) / 2],
+      d = degree;
+    let x = c[0] - e0[0],
+      y = c[1] - e0[1];
+    /**中点到起点间的距离 */
+    let len = Math.sqrt(x * x + y * y);
+    /**角度 */
+    let angle = Math.PI / 2 - Math.asin(y / len);
+    let xd = d * Math.cos(angle) * len,
+      yd = (d * Math.sin(angle) * len * x) / Math.abs(x);
+    xd = isNaN(xd) ? 0 : xd;
+    yd = isNaN(yd) ? 0 : yd;
+    let curve: [number, number] = [c[0] + xd, c[1] - yd];
+    return curve;
+  }
+  /**设置画布的相关配置
+   * @param fig 画布属性配置
+   * @param ctx 2D画布渲染上下文
+   */
+  public static setCtxPara(ctx: CanvasRenderingContext2D, fig: SLPCanvas = {}): CanvasRenderingContext2D {
+    this.ctx = ctx;
+    this.deletePara(fig);
+    fig = Object.assign({}, this.ctxFig, fig);
+    ctx.globalAlpha = fig.alpha!;
+    ctx.globalCompositeOperation = fig.globalCompositeOperation!;
+    ctx.fillStyle = fig.colorFill!;
+    ctx.strokeStyle = fig.colorLine!;
+    ctx.lineWidth = fig.widthLine!;
+    ctx.shadowColor = fig.shadowColor!;
+    ctx.shadowBlur = fig.shadowBlur!;
+    ctx.font = fig.font!;
+    ctx.textBaseline = fig.textBaseline!;
+    ctx.setLineDash(fig.dash!);
+    ctx.lineDashOffset = fig.dashOff!;
+    return ctx;
+  }
+  /**移除掉值为 undefined 或 null 的属性，方便赋值 */
+  private static deletePara(obj: any = {}) {
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        const ele = obj[key];
+        if (ele === undefined || ele === null) {
+          Reflect.deleteProperty(obj, key);
+        }
+      }
+    }
+  }
+}

package/src/map/canvas-draw.ts

@@ -0,0 +1,250 @@
+import * as L from 'leaflet';
+import { u_arrItemDel, u_mapGetMapSize, u_mapGetPointByLatlng, u_mapGetPointsByLatlngs, u_mapGetSizeByMap } from '../utils/slu-map'
+import { SLUCanvas, SLUCanvasGif, SLUCanvasImg, SLUCanvasText } from '../canvas';
+
+/** 地图canvas基础图形绘制类    点(arc) 线(line BezierLine) 多边形(rect) 图片(img)*/
+export class MapCanvasDraw {
+  constructor(map: AMAP.Map | L.Map, canvas: HTMLCanvasElement) {
+    this.map = map;
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d')!;
+  }
+  private canvas: HTMLCanvasElement;
+  protected ctx: CanvasRenderingContext2D;
+  protected map: AMAP.Map | L.Map;
+  private gif: SLUCanvasGif;
+  /**所有的小圆数据 */
+  protected _allArcs: MapArc[] = [];
+  /**所有的线数据 */
+  protected _allLines: MapLine[] = [];
+  /**所有的贝塞尔曲线数据 */
+  protected _allBLins: MapLine[] = [];
+  /**所有的多边形数据 */
+  protected _allRects: MapRect[] = [];
+  /**所有的文本数据 */
+  protected _allTexts: MapText[] = [];
+  /**所有的图片数据 */
+  protected _allImgs: MapImage[] = [];
+  /**所有的Gif数据 */
+  protected _allGifs: MapGif[] = [];
+  protected get zoom(): number {
+    return this.map.getZoom();
+  }
+  /** 清空并重新设置画布 */
+  public reSetCanvas(): void {
+    let { canvas, map, ctx } = this;
+    const { w, h } = u_mapGetMapSize(map);
+    canvas.style.width = w + 'px';
+    canvas.style.height = h + 'px';
+    //清除画布
+    canvas.width = w;
+    canvas.height = h;
+  }
+  /**绘制所有需要绘制的类(按drawIndex顺序) */
+  public drawMapAll() {
+    this.reSetCanvas();
+    this.drawByIndex();
+  }
+  /**绘制通过index */
+  protected async drawByIndex() {
+    let textRects: SLTCanvas.TextRect[] = [], that = this, { ctx, zoom } = that,
+      all: any[] = that._allRects.map((e) => ({ ...e, mold: 'R' }));
+    all = all.concat(that._allLines.map((e) => ({ ...e, mold: 'L' })));
+    all = all.concat(that._allBLins.map((e) => ({ ...e, mold: 'B' })));
+    all = all.concat(that._allArcs.map((e) => ({ ...e, mold: 'A' })));
+    all = all.concat(that._allTexts.map((e) => ({ ...e, mold: 'T' })));
+    all = all.concat(that._allImgs.map((e) => ({ ...e, mold: 'I' })));
+    all = all.concat(that._allGifs.map((e) => ({ ...e, mold: 'G' })));
+    all.sort((a, b) => (a.index || 0) - (b.index || 0));
+    all.forEach((e, index) => {
+      let { minZoom = 0, maxZoom = 50, overlap } = e;
+      if (zoom >= minZoom && zoom <= maxZoom) {
+        that.transformXY(e);
+        switch (e.mold) {
+          case 'A':
+            that.transformArcSize(e);
+            SLUCanvas.drawArc(e, ctx);
+            break;
+          case 'L':
+            SLUCanvas.drawLine(e, ctx);
+            break;
+          case 'B':
+            SLUCanvas.drawBezierLine(e, ctx);
+            break;
+          case 'R':
+            SLUCanvas.drawPolygon(e, ctx);
+            break;
+          case 'T':
+            SLUCanvasText.drawText(e, textRects, ctx);
+            break;
+          case 'I':
+            that.transformImageSize(e);
+            SLUCanvasImg.drawImg(e, ctx);
+            break;
+          case 'G':
+            that.transformImageSize(e);
+            that.gif = that.gif || new SLUCanvasGif();
+            that.gif.loadGIF(e, ctx);
+            break;
+        }
+      }
+    });
+  }
+  /**设置原点 */
+  public setAllArcs(arcs: MapArc[]) {
+    this._allArcs = arcs;
+    return this;
+  }
+  /**设置线数据 */
+  public setAllLines(lines: MapLine[]) {
+    this._allLines = lines;
+    return this;
+  }
+  /**设置贝塞尔曲线数据 */
+  public setAllBezierLines(lines: MapLine[]) {
+    this._allBLins = lines;
+    return this;
+  }
+  /**设置多边形数据 */
+  public setAllRects(rects: MapRect[]) {
+    this._allRects = rects;
+    return this;
+  }
+  /**设置文本数据 */
+  public setAllTexts(texts: MapText[]) {
+    this._allTexts = texts;
+    return this;
+  }
+  /**设置图片数据 */
+  public setAllImgs(imgs: MapImage[]) {
+    this._allImgs = imgs;
+    return this;
+  }
+  /**设置图片数据 */
+  public setAllGifs(gifs: MapGif[]) {
+    this._allGifs = gifs;
+    return this;
+  }
+  /**增加原点 */
+  public addArc(arc: MapArc) {
+    if (!arc.latlngs && !arc.latlng) return this;
+    this._allArcs.push(arc);
+    return this;
+  }
+  /**增加线 */
+  public addLine(line: MapLine) {
+    if (!line.latlngs) return this;
+    this._allLines.push(line);
+    return this;
+  }
+  /**增加贝塞尔曲线 */
+  public addBezierLine(line: MapLine) {
+    if (!line.latlngs) return this;
+    this._allBLins.push(line);
+    return this;
+  }
+  /**增加多边形 */
+  public addRect(rect: MapRect) {
+    if (!rect.latlngs) return this;
+    this._allRects.push(rect);
+    return this;
+  }
+  /**增加文本 */
+  public addText(text: MapText) {
+    if (!text.latlngs && !text.latlng) return this;
+    this._allTexts.push(text);
+    return this;
+  }
+  /**增加图片 */
+  public addImg(img: MapImage) {
+    if (!img.latlngs && !img.latlng) return this;
+    this._allImgs.push(img);
+    return this;
+  }
+  /**删除指定圆点 */
+  public delArc(arc: MapArc) {
+    u_arrItemDel(this._allArcs, arc);
+    return this;
+  }
+  /**删除指定线 */
+  public delLine(line: MapLine) {
+    u_arrItemDel(this._allLines, line);
+    return this;
+  }
+  /**删除指定贝塞尔曲线 */
+  public delBezierLine(line: MapLine) {
+    u_arrItemDel(this._allBLins, line);
+    return this;
+  }
+  /**删除指定多边形 */
+  public delRect(rect: MapRect) {
+    u_arrItemDel(this._allRects, rect);
+    return this;
+  }
+  /**删除指定文本 */
+  public delText(text: MapText) {
+    u_arrItemDel(this._allTexts, text);
+    return this;
+  }
+  /**删除指定Img */
+  public delImg(img: MapImage) {
+    u_arrItemDel(this._allImgs, img);
+    return this;
+  }
+  /**清空
+   * @param type 不填清空所有内容数据
+   */
+  public delAll(type: 'all' | 'text' | 'arc' | 'line' | 'bezier' | 'rect' | 'img' | 'gif' = 'all') {
+    const that = this;
+    switch (type) {
+      case 'arc':
+        that._allArcs = [];
+        break;
+      case 'line':
+        that._allLines = [];
+        break;
+      case 'bezier':
+        that._allBLins = [];
+        break;
+      case 'rect':
+        that._allRects = [];
+        break;
+      case 'img':
+        that._allImgs = [];
+        break;
+      case 'gif':
+        that._allGifs = [];
+        break;
+      case 'text':
+        that._allTexts = [];
+        break;
+      case 'all':
+        that._allArcs = [];
+        that._allLines = [];
+        that._allBLins = [];
+        that._allRects = [];
+        that._allImgs = [];
+        that._allGifs = [];
+        that._allTexts = [];
+    }
+    return that;
+  }
+  /**将对象上经纬度数据(latlngs,latlng)变换为像素XY的数据(points,point)
+   * latlngs为undefined,points也为undefined
+   * latlng为undefined,point为[0,0]
+   */
+  public transformXY(info: MapPoint & SLTCanvas.Point) {
+    info.points = u_mapGetPointsByLatlngs(this.map, info.latlngs);
+    info.point = u_mapGetPointByLatlng(this.map, info.latlng);
+  }
+  /**设置固定大小的图片 */
+  public transformImageSize(img: MapImage) {
+    let [x, y] = u_mapGetSizeByMap(this.map, img)
+    img.size = [x, y];
+  }
+  private transformArcSize(arc: MapArc) {
+    let [x, y] = u_mapGetSizeByMap(this.map, arc);
+    /**经度的差值为X故 */
+    arc.size = x;
+  }
+}