AILabel.js基本使用

*Major*

已于 2023-10-14 17:20:44 修改

阅读量5.2k

点赞数 14

文章标签： javascript 开发语言 ecmascript

于 2023-08-06 17:41:28 首次发布

本文链接：https://blog.csdn.net/qq_41375318/article/details/132133301

版权

AILabel.js基本使用

AiLabel学习交流群
qq群号 632162227

github：https://github.com/TigerShuai/AILabel

官网：https://www.npmjs.com/package/ailabel/v/5.1.15

https://www.npmjs.com/package/ailabel/v/5.1.15?activeTab=code

特性：
1.多类型要素展示：图片/矢量数据/文本/标注
2.高效绘图：canvas矢量数据绘制

一个核心Map类：AILabel.Map

五大—核心图层类：
图像层实例化：AILabel.Layer.Image
矢量数据层：AILabel.Layer.Feature
涂抹层：AILabel.Layer.Mask
标注图层：AILabel.Layer.Marker
文本图层：AILabel.Layer.Text

四大—绘制标注特征类：
点：AILabel.Feature.Point
多线段：AILabel.Feature.Polyline
矩形：AILabel.Feature.Rect
多边形：AILabel.Feature.Polygon

六大—常用工具类
标注对象：AILabel.Marker
文本对象：AILabel.Text
控件—缩略图：AILabel.Control.EagleMap
控件—比例尺： AILabel.Control.Scale
样式对象：AILabel.Style
工具库：AILabel.Util

名词解释：
1.zoom：zoom值的意思就是缩放值，即显示容器的宽所代表的实际距离宽；比如容器宽度是1000px，而此时如果设置zoom为2000，则zoom的意思就是1000px宽的容器所指代的实际距离是2000

AILabel.js之实例1：显示一张图像

定义dom元素

元素必须赋值id属性
<div id="testMap"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="testMap"></div>
</body>

</html>

根据定义的dom元素，生成map实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="testMap"></div>
</body>

<script>

    // 声明容器
const gMap =new AILabel.Map('testMap', {
    center: {x: 250, y: 177},
    zoom: 800,
    mode: 'PAN' // 绘制线段
});
</script>
</html>

显示一张图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="testMap"></div>
</body>
<script src="./js/AILabel.pkg.min.js"></script>
<script>

// 声明容器
const gMap =new AILabel.Map('testMap', {
    center: {x: 250, y: 177},
    zoom: 800,
    mode: 'PAN' // 绘制线段
});

// 显示一张图片
let gImageLayer = new AILabel.Layer.Image('img', './images/9.jpg', {w: 1080, h: 720}, {zIndex: 1});



// 添加图层
gMap.addLayer(gImageLayer);
</script>
</html>

在这里插入图片描述

AILabel.js之实例2：绘制图像

AILabel.js之实例3：绘制标注

AILabel.js之实例4：绘制标记图案

AILabel.js之实例5：绘制文本

AILabel.js之实例6：鼠标划入高亮标注

AILabel.js之实例7：绘制矩形

AILabel.js之切换图像

绘制多边形

// 添加矢量图层（用于展示矢量图形）
const gFirstFeatureLayer = new AILabel.Layer.Feature(
    'first-layer-feature', // id
    {name: '第一个矢量图层'}, // props
    {zIndex: 10} // style
);
gMap.addLayer(gFirstFeatureLayer);

// gMap实例添加events事件监听
gMap.events.on('drawDone', (type: EMapMode, data) => {
    if (type === 'POLYGON') {
        const polygonFeature = new AILabel.Feature.Polygon(
            `${+new Date()}`, // id
            {points: data}, // shape
            {name: '矢量图形'}, // props
            drawingStyle // style
        );
        gFirstFeatureLayer.addFeature(polygonFeature);
    }
    else if (...) {
        // 其他类型Feature绘制完成处理
    }
}

综合标注示例：

<template>
  <div class="main">
    <div class="operation">
      <div class="button-wrap">
        <el-button type="text" class="el-icon-thumb" @click="setMode('PAN')"
          >平移</el-button
        >
        <el-button
          type="text"
          class="el-icon-location-outline"
          @click="setMode('MARKER')"
          >注记</el-button
        >
        <el-button
          type="text"
          class="el-icon-more-outline"
          @click="setMode('POINT')"
          >点</el-button
        >
        <el-button type="text" class="el-icon-minus" @click="setMode('LINE')"
          >线段</el-button
        >
        <el-button
          type="text"
          class="el-icon-share"
          @click="setMode('POLYLINE')"
          >多段线</el-button
        >
        <el-button type="text" class="el-icon-orange" @click="setMode('CIRCLE')"
          >圆</el-button
        >
        <el-button
          type="text"
          class="el-icon-full-screen"
          @click="setMode('RECT')"
          >矩形</el-button
        >
        <el-button type="text" class="el-icon-house" @click="setMode('POLYGON')"
          >多边形</el-button>
        <el-button type="text" class="el-icon-magic-stick" @click="Fill()"
          >填充</el-button
        >
        <el-button type="text" class="el-icon-refresh-left" @click="Revoke()"
          >撤销</el-button
        >
        <el-button type="text" @click="getFeatures()">获取标注数据</el-button>
 
        <!-- <button class="btn btn-default" @click="setMode('DRAWMASK')">
          涂抹
        </button> -->
        <!-- <button class="btn btn-default" @click="setMode('CLEARMASK')">
          擦除
        </button> -->
        <!-- <button class="btn btn-default" @click="getRle()">获取rle数据</button> -->
      </div>
      <div class="zoom-icon-wrapper">
        <div class="zoom-icon-plus" @click="zoomIn">+</div>
        <div class="zoom-icon-minus" @click="zoomOut">-</div>
      </div>
    </div>
 
    <div id="map"></div>
  </div>
</template>
 
<script>
import AILabel from "ailabel";
 
export default {
  name: "LabelingView",
  data() {
    return {
      imgUrl: "9.jpg",           //"./assets/imgs/9.jpg",
      drawingStyle: {},
      mode: "",
      itemName: "",
      editId: "", //待填充图形id
      deleteIconId: "delete01",
      gMap: null, //AILabel实例
      gFirstFeatureLayer: null, //矢量图层实例(矩形，多边形等矢量)
      allFeatures: null, //所有features
    };
  },
  watch: {
    mode(mode) {
      this.gMap.setMode(mode);
      this.setDrawingStyle(mode);
    },
  },
  methods: {
    zoomIn() {
      this.gMap.zoomIn();
    },
    zoomOut() {
      this.gMap.zoomOut();
    },
    setMode(mode) {
      this.mode = mode;
    },
    // 获取所有features
    getFeatures() {
      this.allFeatures = this.gFirstFeatureLayer.getAllFeatures();
      console.log("--allFeatures--", this.allFeatures);
    },
    // 初始样式
    setDrawingStyle(mode) {
      let drawingStyle = {};
      switch (mode) {
        //平移
        case "PAN": {
          break;
        }
        //注记
        case "MARKER": {
          // 忽略
          break;
        }
        //点
        case "POINT": {
          this.drawingStyle = { fillStyle: "#FF8C00" };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //圆
        case "CIRCLE": {
          this.drawingStyle = {
            fillStyle: "#87CEFF",
            strokeStyle: "#87CEFF",
            lineWidth: 5,
          };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //线段
        case "LINE": {
          this.drawingStyle = {
            strokeStyle: "#BA55D3",
            lineJoin: "round",
            lineCap: "round",
            lineWidth: 10,
            arrow: false,
          };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //多线段
        case "POLYLINE": {
          this.drawingStyle = {
            strokeStyle: "#FF1493",
            lineJoin: "round",
            lineCap: "round",
            lineWidth: 10,
          };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //矩形
        case "RECT": {
          this.drawingStyle = { strokeStyle: "#0f0", lineWidth: 1 };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //多边形
        case "POLYGON": {
          this.drawingStyle = {
            strokeStyle: "#0099CC", //边框颜色
            fill: true, //是否填充
            fillStyle: "#FF6666", //填充色
            globalAlpha: 0.3,
            lineWidth: 3,
            fill: true,
            stroke: true,
          };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //涂抹
        case "DRAWMASK": {
          this.drawingStyle = {
            strokeStyle: "rgba(255, 0, 0, .5)",
            fillStyle: "#00f",
            lineWidth: 50,
          };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        //擦除
        case "CLEARMASK": {
          this.drawingStyle = { fillStyle: "#00f", lineWidth: 30 };
          this.gMap.setDrawingStyle(drawingStyle);
          break;
        }
        default:
          break;
      }
    },
 
    // 添加图形
    addFeature(data, type, id) {
      let that = this;
      let drawingStyle = this.drawingStyle;
      //线
      if (type === "LINE") {
        const scale = that.gMap.getScale();
        const width = drawingStyle.lineWidth / scale;
        const lineFeature = new AILabel.Feature.Line(
          id, // id
          { ...data, width }, // shape
          { name }, // props
          drawingStyle // style
        );
        that.gFirstFeatureLayer.addFeature(lineFeature);
      }
      //线段
      else if (type === "POLYLINE") {
        const scale = that.gMap.getScale();
        const width = drawingStyle.lineWidth / scale;
        const polylineFeature = new AILabel.Feature.Polyline(
          id, // id
          { points: data, width }, // shape
          { name }, // props
          drawingStyle // style
        );
        that.gFirstFeatureLayer.addFeature(polylineFeature);
      }
      //矩形
      else if (type === "RECT") {
        const rectFeature = new AILabel.Feature.Rect(
          id, // id
          data, // shape
          { name }, // props
          drawingStyle // style
        );
        that.gFirstFeatureLayer.addFeature(rectFeature);
      }
      //多边形
      else if (type === "POLYGON") {
        const polygonFeature = new AILabel.Feature.Polygon(
          id, // id
          { points: data }, // shape
          { name }, // props
          drawingStyle // style
        );
        that.gFirstFeatureLayer.addFeature(polygonFeature);
      }
      //点
      else if (type == "POINT") {
        const gFirstFeaturePoint = new AILabel.Feature.Point(
          id, // id
          { x: data.x, y: data.y, r: 5 }, // shape
          { name }, // props
          { fillStyle: "#FF8C00", zIndex: 5, lineWidth: 2 } // style
        );
        that.gFirstFeatureLayer.addFeature(gFirstFeaturePoint);
      }
      //注记
      else if (type == "MARKER") {
        const gFirstMarker = new AILabel.Marker(
          id, // id
          {
            src: "http://ailabel.com.cn/public/ailabel/demo/marker.png",
            position: {
              // marker坐标位置
              x: data.x,
              y: data.y,
            },
            offset: {
              x: -16,
              y: 32,
            },
          }, // markerInfo
          { name: "第一个marker注记" } // props
        );
        that.gFirstFeatureLayer.addFeature(gFirstMarker);
      }
      //圆
      else if (type == "CIRCLE") {
        const gFirstFeatureCircle = new AILabel.Feature.Circle(
          id, // id
          { cx: data.cx, cy: data.cy, r: data.r }, // shape
          { name: "第一个矢量图层" }, // props
          {
            fillStyle: "#87CEFF",
            strokeStyle: "#3CB371",
            globalAlpha: 1,
            lineWidth: 5,
          } // style
        );
        that.gFirstFeatureLayer.addFeature(gFirstFeatureCircle);
      }
      //涂抹
      else if (type == "DRAWMASK") {
        const drawMaskAction = new AILabel.Mask.Draw(
          `${+new Date()}`, // id
          "铅笔",
          { points: data, width: 5 }, // shape
          { name: "港币", price: "1元" }, // props
          { strokeStyle: "#FF0000" } // style
        );
        that.gFirstFeatureLayer.addAction(drawMaskAction);
      }
      //擦除
      else if (type == "CLEARMASK") {
        const clearMaskAction = new AILabel.Mask.Clear(
          "first-action-clear", // id
          { points: data, width: 5 } // shape
        );
        that.gFirstMaskLayer.addAction(clearMaskAction);
      }
      this.getFeatures();
    },
    // 画完取名
    getName(mode) {
      return this.$prompt("请输入填写名字", {
        confirmButtonText: "确定",
        showCancelButton: false,
      })
        .then(({ value }) => {
          this.itemName = value;
          return value;
        })
        .catch(() => {
          return null;
        });
    },
    // 增加删除图标
    addDeleteIcon(feature, shape) {
      let gMap = this.gMap;
      let that = this;
      // 添加delete-icon
      // let points = that.getPoints(feature);
      console.log(shape, "shape");
      const gFirstMarker = new AILabel.Marker(
        that.deleteIconId, // id
        {
          src: "https://s1.aigei.com/src/img/png/45/45aabfc232a34e5b9bfaf75412973c08.png?|watermark/3/image/aHR0cHM6Ly9zMS5haWdlaS5jb20vd2F0ZXJtYXJrLzUwMC0xLnBuZz9lPTE3MzU0ODgwMDAmdG9rZW49UDdTMlhwemZ6MTF2QWtBU0xUa2ZITjdGdy1vT1pCZWNxZUpheHlwTDpjYWQ1NHVoRlhGUUViSGR3Vm02aXctVTJoWVE9/dissolve/40/gravity/NorthWest/dx/18/dy/21/ws/0.0/wst/0&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:C11LKqsRLbAqQo2uVPETYDya0QU=",
          position: { x: shape.x + shape.width, y: shape.y - 15 }, // 矩形右上角 根据图形动态调整
          offset: {
            x: -20,
            y: -4,
          },
        }, // markerInfo
        { name: "delete" } // props
      );
      gFirstMarker.events.on("click", (marker) => {
        // 首先删除当前marker
        gMap.markerLayer.removeMarkerById(marker.id);
        // 删除对应text
        // gFirstTextLayer.removeTextById(textId);
        // 删除对应feature
        that.gFirstFeatureLayer.removeFeatureById(feature.id);
      });
      gMap.markerLayer.addMarker(gFirstMarker);
 
      // that.gFirstFeatureLayer
    },
    // 删除 删除按钮
    deIcon() {
      this.gMap.markerLayer.removeAllMarkers();
    },
    // 增加事件
    addEvent() {
      let that = this;
      let gMap = this.gMap;
      gMap.events.on("drawDone", (type, data) => {
        console.log("--type, data--", type, data);
        // that.addFeature(data, type);
        if (type == "CLEARMASK" || type == "DRAWMASK") {
          that.addFeature(data, type);
        } else {
          that.getName(type).then((id) => {
            if (id) {
              that.addFeature(data, type, id);
            } else {
              this.$message({
                type: "info",
                message: "请填写名字",
              });
            }
          });
        }
      });
      
      gMap.events.on("boundsChanged", (data) => {
        console.log("--map boundsChanged--", data);
        return "";
      });
      // 双击编辑 在绘制模式下双击feature触发选中
      gMap.events.on("featureSelected", (feature) => {
        this.editId = feature.id;
        console.log("--map featureSelected--", feature, "双击编辑");
        //设置编辑feature
        gMap.setActiveFeature(feature);
        if (feature.type != "POINT") {
          // 增加删除按钮
          that.addDeleteIcon(feature, feature.shape);
        }
      });
      //右键 目前只针对点双击选中右键触发
      gMap.events.on("featureDeleted", (feature) => {
        if (feature.type == "POINT") {
          // 根据id删除对应feature
          that.gFirstFeatureLayer.removeFeatureById(feature.id);
        }
      });
      // 单机空白取消编辑
      gMap.events.on("featureUnselected", () => {
        // 取消featureSelected
        that.editId = "";
        that.deIcon();
        gMap.setActiveFeature(null);
      });
      // 更新完
      gMap.events.on("featureUpdated", (feature, shape) => {
        console.log(feature);
        // 更新或者移动需要重新设置删除图标
        that.deIcon();
        feature.updateShape(shape);
        if (feature.type != "POINT") {
          that.addDeleteIcon(feature, shape);
        }
      });
      // 删除
      gMap.events.on("FeatureDeleted", () => {
        console.log(2222222);
        // that.gFirstFeatureLayer.removeFeatureById(that.editId);
      });
    },
    // 获取坐标 需要自行添加
    getPoints(feature) {
      switch (feature.type) {
        case "RECT":
          return feature.getPoints();
        case "LINE":
          return [feature.shape.start, feature.shape.end];
        case "POLYLINE":
          return feature.shape.points;
        case "POLYGON":
          return feature.shape.points;
        default:
          return [];
      }
    },
    //填充事件
    Fill() {
      console.log("填充事件");
      let fill = this.gFirstFeatureLayer.getFeatureById(this.editId);
      console.log("--填充对象--", fill);
      fill.style.fillStyle = "#FFDAB9";
      fill.style.fill = true;
      //刷新map
      this.gMap.refresh();
    },
    //撤销
    Revoke() {
      console.log("撤销");
      this.getFeatures();
      this.allFeatures.pop();
      //刷新map
      this.gMap.refresh();
      console.log(this.allFeatures, "--所有操作--");
    },
  },

  // 加载模板页面han
  mounted() {
    let that = this;
    const gMap = new AILabel.Map("map", {
      center: { x: 250, y: 150 }, // 为了让图片居中
      zoom: 500,
      mode: "PAN", // 绘制线段
      refreshDelayWhenZooming: true, // 缩放时是否允许刷新延时，性能更优
      zoomWhenDrawing: true,
      panWhenDrawing: true,
      zoomWheelRatio: 5, // 控制滑轮缩放缩率[0, 10), 值越小，则缩放越快，反之越慢
      withHotKeys: true, // 关闭快捷键
    });
    that.gMap = gMap;
    // 添加各类绘画等等事件
    this.addEvent();
    // 图片层添加
    const gFirstImageLayer = new AILabel.Layer.Image(
      "first-layer-image", // id
      {
        src: that.imgUrl,
        width: 500,
        height: 300,
        crossOrigin: false, // 如果跨域图片，需要设置为true
        position: {
          // 左上角相对中心点偏移量
          x: 0,
          y: 0,
        },
        // 网格
        grid: {
          // 3 * 3
          columns: [{ color: "#9370DB" }, { color: "#FF6347" }],
          rows: [{ color: "#9370DB" }, { color: "#FF6347" }],
        },
      }, // imageInfo
      { name: "第一个图片图层" }, // props
      { zIndex: 5 } // style
    );
    // 添加到gMap对象
    gMap.addLayer(gFirstImageLayer);
    // 添加矢量图层
    const gFirstFeatureLayer = new AILabel.Layer.Feature(
      "first-layer-feature", // id
      { name: "第一个矢量图层" }, // props
      { zIndex: 10 } // style
    );
    this.gFirstFeatureLayer = gFirstFeatureLayer;
    gMap.addLayer(gFirstFeatureLayer);
 
    window.onresize = function () {
      this.gMap && this.gMap.resize();
    };
  },
  beforeDestroy() {
    this.gMap.destroy();
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  display: flex;
  flex-direction: row;
  margin: 50px;
  justify-content: center;
}
 
.button-wrap {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  position: relative;
  z-index: 99;
}
 
#map {
  /* margin: 0 auto; */
  overflow: hidden;
  position: relative;
  height: 600px;
  width: 800px;
  border: 1px dashed #ccc;
}
 
.zoom-icon-wrapper {
  position: absolute;
  /* left: 20px; */
  /* top: 20px; */
  z-index: 1000;
}
 
.zoom-icon-plus {
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  border: 3px solid #6495ed;
  font-size: 20px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
}
 
.zoom-icon-plus:hover {
  border-color: #4169e1;
}
 
.zoom-icon-minus {
  margin-top: 6px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  border: 3px solid #6495ed;
  font-size: 25px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
}
 
.zoom-icon-minus:hover {
  border-color: #4169e1;
}
/* 删除图标 */
#delete01 {
  width: 20px;
  height: 20px;
}
.el-button + .el-button {
  margin-left: 0px;
}
</style>

在这里插入图片描述

名词解释

zoom：容器宽代表的实际距离宽

zoom值的意思就是缩放值，即显示容器的宽所代表的实际距离宽；比如容器宽度是1000px，而此时如果设置zoom为2000，则zoom的意思就是1000px宽的容器所指代的实际距离是2000，更进一步说就是，比如从您家到您姑姑家距离是2000米，则显示在屏幕上设置zoom=2000就是1000px宽的显示容器代表的实际距离就是2000米；

实际坐标系：要素或实体代表的实际坐标值所在的坐标系
屏幕标注系：用来展示的坐标系

实际坐标系与屏幕坐标系区别？

实际坐标系就是实体的本身坐标系，不会随着视野范围变化而产生变化。屏幕坐标系就是用来将实际意义的坐标应用于电子地图上展示的临时坐标系。举个栗子：比如您家的房子位于(lat36, lng128)，在电子地图上展示你家的实际位置用户不会变化，但是当电子地图进行平移或者缩放时，您家房子的展示位置可能会发生变化，这里所说的展示位置就是屏幕坐标位置；

AILabel坐标系

AILabel的原点是基于用户数据的原点，即原点依赖于传入数据，x轴向右，y轴向上（当图片存在时，图片的中心点就是实际坐标系的原点）；

综合示例

绘制编辑

其他示例

要素
注记
文本
矩形编辑
要素hover
图像&缩略图&比例尺

一 AILabel.Map

// js: 伪代码
const gMap = new AILabel.Map(containerId, config);
// js: demo【gMap将作为后续使用的容器实例，不再进行重复实例操作】
const gMap = new AILabel.Map('map', {zoom: 640, cx: 0, cy: 0, zoomMax: 650 * 10, zoomMin: 650 / 10,  autoPan: true, drawZoom: true});

在这里插入图片描述

AILabel.Map支持各类事件监听。

// js: 伪代码
gMap.events.on(eventType, callback);
// js: demo
gMap.events.on('mouseDown', xy => {console.log('xy');});

在这里插入图片描述

addLayer

给gMap实例上添加图层。

// js: 伪代码
const gFeatureLayer = new AILabel.Layer.Feature(layerId, config); // 请参考AILabel.Layer.Feature【此处不做赘述】
gMap.addLayer(gFeatureLayer); // 图层添加

removeLayer

给gMap实例上移除图层。

// js: 伪代码
const gFeatureLayer = new AILabel.Layer.Feature(layerId, config); // 请参考AILabel.Layer.Feature【此处不做赘述】
gMap.addLayer(gFeatureLayer); // 图层添加
gMap.removeLayer(gFeatureLayer); // 图层移除

getAllLayers

获取gMap实例上所有图层。

gMap.getAllLayers(); // 返回[](layer)

getZoom

获取gMap实例当前缩放zoom值。

gMap.getZoom();

setZoom

设置gMap实例zoom值。

在这里插入图片描述

zoomIn

gMap实例放大。

gMap.zoomIn(num);

在这里插入图片描述

zoomOut

gMap实例缩小。

gMap.zoomOut(num);

在这里插入图片描述

setMode

gMap实例设置当前模式，同时可设置当前style样式。

gMap.setMode(mode[, gStyle]);

在这里插入图片描述

getMode

获取gMap实例当前模式。

gMap.getMode();

setCenter

gMap实例设置中心点坐标

gMap.setCenter(cx, cy);

在这里插入图片描述

centerAndZoom

gMap实例设置中心点坐标并且缩放至指定值。

gMap.centerAndZoom(center, zoom);

在这里插入图片描述

getCenter

获取中心点。

gMap.getCenter();

getScreenCenter

获取屏幕中心点坐标。

gMap.getScreenCenter();

tipLayer.showTips

编辑tip提示开关

gMap.tipLayer.showTips(); // 打开tip提示

tipLayer.hideTips

编辑tip提示开关

gMap.tipLayer.hideTips(); // 关闭tip提示

resize

gMap实例resize【此方法不建议使用】。

gMap.resize(w, h);

在这里插入图片描述

destroy

gMap实例销毁。

gMap.destroy();

二 AILabel.Layer.Image实例化

图像层实例化。

const imageLayer = new AILabel.Layer.Image(layerId, src, size, config);

在这里插入图片描述

update

图像层相关更新【暂时只支持辅助网格更新】。

const imageLayer = new AILabel.Layer.Image(layerId, src, size, config);
imageLayer.update({grid: Grid});
imageLayer.update({grid: false}); // 删除网格

renew

刷新。

const imageLayer = new AILabel.Layer.Image(layerId, src, size, config);
imageLayer.renew();

三 AILabel.Layer.Feature

实例化
矢量数据层【矢量数据点/线/面展示层】。

const featureLayer = new AILabel.Layer.Feature(layerId, config);

在这里插入图片描述

addFeature

添加矢量要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);

getFeatureById

通过要素id获取指定要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);
// 根据id获取feature
const fea = gFeatureLayer.getFeatureById(featureId);

在这里插入图片描述

removeAllFeatures

删除当前要素层上所有要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);
// 获取当前矢量层上所有矢量对象
gFeatureLayer.removeAllFeatures();

removeFeature

删除要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);
// 删除指定feature
gFeatureLayer.removeFeature(feature);

removeFeatureById

通过要素id删除指定要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);
// 通过要素id删除指定要素
gFeatureLayer.removeFeatureById(featureId);

removeFeaturesByIds

通过要素id集合删除指定要素集合。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);
// 删除feature集合
const featureIds = [featureId];
gFeatureLayer.removeFeaturesByIds(featureIds);

在这里插入图片描述

removeFeaturesByProperty

通过要素属性数据删除要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, {name: '中国'}, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);

const properties = [{key: 'name', value: '中国'}];
gFeatureLayer.removeFeaturesByProperty(properties);

在这里插入图片描述

getAllFeatures

返回当前要素层上所有要素。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle); // 参考AILabel.Feature.Polygon【此处不再赘述】
gFeatureLayer.addFeature(feature);

const allFeatures = gFeatureLayer.getAllFeatures(); // 返回所有要素数据

四 AILabel.Layer.Mask

实例化
涂抹层【用于涂抹数据展示、绘制及擦除】。

const gMaskLayer = new AILabel.Layer.Mask(layerId, config);

在这里插入图片描述

addMaskAction

添加涂抹Action【Action定义请往下看】。此处建议参考demo: http://www.gdbox.vip/gdbox/demo/drawFeature

// MaskAction分3类【imgMask、drawAction、clearAction】
gMaskLayer.addMaskAction(MaskAction);

在这里插入图片描述

setRoi

设置感兴趣区域，业务方需求可能会要求对图片以外区域不展示涂抹数据，此方法就是为了解决这种问题而设置的。

// 设置图片区域为感兴趣区
gMaskLayer.setRoi([
   {
       x: - imgWidth / 2,
       y: imgHeight / 2
   }, {
       x:  imgWidth / 2,
       y: imgHeight / 2
   }, {
       x:  imgWidth / 2,
       y: -imgHeight / 2
   }, {
       x: - imgWidth / 2,
       y: -imgHeight / 2
   }
]);

getMaskActionsWithPixels

获取rle格式数据，AILabel会对所有的actions按照name属性进行分类，然后进行合并处理，最终按照name属性区别产生对应的rle压缩数据；

// 按标签获取rle数据
gMaskLayer.getMaskActionsWithPixels(width, height);

在这里插入图片描述

五 AILabel.Layer.Marker

实例化
marker标注层为系统内置图层，可通过gMap.mLayer进行获取。

addMarker

添加标注对象。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
// 添加
gMap.mLayer.addMarker(marker);

removeMarker

删除标注。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarker(marker);
// 删除
gMap.mLayer.removeMarker(marker);

removeMarkerById

通过标注id删除指定标注。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarker(marker);
// 删除指定marker
gMap.mLayer.removeMarkerById(markerId);

removeMarkersByIds

通过标注id集合删除指定标注集合。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarker(marker);
gMap.mLayer.removeMarkerById(markerId);
const markerIds = [markerId];
// 删除marker集合
gMap.mLayer.removeMarkersByIds(markerIds);

在这里插入图片描述

getAllMarkers

返回当前标注层上所有标注对象。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarker(marker);
gMap.mLayer.removeMarkerById(markerId);
// 获取所有markers
const allMarkers = gMap.mLayer.getAllMarkers(); // 返回所有标注数据

getMarkerById

通过标注id获取指定标注对象。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarker(marker);
gMap.mLayer.removeMarkerById(markerId);
// 获取指定marker
const mar = gMap.mLayer.getMarkerById(markerId);

addMarkers

添加标注对象集合。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
const marker2 = new AILabel.Marker(markerId2, config2); // 参考AILabel.Marker【此处不再赘述】
// 添加marker集合
gMap.mLayer.addMarkers([marker, marker2])

removeMarkers

移除标注对象集合。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
const marker2 = new AILabel.Marker(markerId2, config2); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarkers([marker, marker2]);
// 移除marker集合
gMap.mLayer.removeMarkers([marker, marker2]);

removeAllMarkers

删除当前标注层上所有标注对象。

const marker = new AILabel.Marker(markerId, config); // 参考AILabel.Marker【此处不再赘述】
const marker2 = new AILabel.Marker(markerId2, config2); // 参考AILabel.Marker【此处不再赘述】
gMap.mLayer.addMarkers([marker, marker2]);
// 删除所有markers
gMap.mLayer.removeAllMarkers();

六 AILabel.Layer.Text

实例化
文本图层

const textLayer = new AILabel.Layer.Text(layerId, config);

在这里插入图片描述

addText

添加文本对象。

const textLayer = new AILabel.Layer.Text(layerId, config);
const text = new AILabel.Text(textId, config, gStyle); // 参考AILabel.Text【此处不做赘述】
// 添加text对象
textLayer.addText(text);

removeText

删除文本。

const textLayer = new AILabel.Layer.Text(layerId, config);
const text = new AILabel.Text(textId, config, gStyle); // 参考AILabel.Text【此处不做赘述】
textLayer.addText(text);
// 删除text
textLayer.removeText(text);

一 AILabel.Feature.Point

要素数据：点。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
// 实例化点
const feature = new AILabel.Feature.Point(featureId, point, data, gStyle, options);
gFeatureLayer.addFeature(feature);

在这里插入图片描述

show

点要素显示。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Point(featureId, point, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();
// 展示
feature.show();

hide

点要素隐藏。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Point(featureId, point, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();

update

点要素更新。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Point(featureId, point, data, gStyle);
gFeatureLayer.addFeature(feature);
// 更新
feature.update(options);

在这里插入图片描述

isCaught

判断点是否在捕捉容限内。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Point(featureId, point, data, gStyle);
gFeatureLayer.addFeature(feature);

feature.isCaught(wxy); // return false;

在这里插入图片描述

二 AILabel.Feature.Polyline

要素数据：多段线。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
// 实例化多段线
const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle, options);
gFeatureLayer.addFeature(feature);

在这里插入图片描述

show

多段线要素显示。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();
// 展示
feature.show();

hide

多边形要素隐藏。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();

update

多段线要素更新。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 更新
feature.update(options);

在这里插入图片描述

active

设置feature选中【建议用户尽量避免使用】。

const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
// 设置feature选中
feature.active();

deActive

取消feature选中【建议用户尽量避免使用】。

const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
// 取消feature选中
feature.deActive();

getBounds

获取feature最小外接矩形。

const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
// 获取feature最小外接矩形
feature.getBounds();

isCaught

判断点是否捕捉到当前多段线。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polyline(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);

feature.isCaught(wxy); // return false;

在这里插入图片描述

三 AILabel.Feature.Rect

要素数据：矩形。

实例化

const featureLayer = new AILabel.Layer.Feature(layerId, config);
// 实例化矩形形
const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);

在这里插入图片描述

show

矩形要素显示。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();
// 展示
feature.show();

hide

矩形要素隐藏。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();

update

矩形要素更新。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 更新
feature.update(options);

在这里插入图片描述

active

设置feature选中【建议用户尽量避免使用】。

const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
// 设置feature选中
feature.active();

deActive

取消feature选中【建议用户尽量避免使用】。

const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
// 取消feature选中
feature.deActive();

isCaught

判断点是否在当前要素内。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Rect(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);

feature.isCaught(wxy); // return false;

在这里插入图片描述

四 AILabel.Feature.Polygon

要素数据：多边形。

实例化

const featureLayer = new AILabel.Layer.Feature(layerId, config);
// 实例化多边形
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);

在这里插入图片描述

show

多边形要素显示。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();
// 展示
feature.show();

hide

多边形要素隐藏。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 隐藏
feature.hide();

update

多边形要素更新。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);
// 更新
feature.update(options);

在这里插入图片描述

active

设置feature选中【建议用户尽量避免使用】。

const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
// 设置feature选中
feature.active();

deActive

取消feature选中【建议用户尽量避免使用】。

const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
// 取消feature选中
feature.deActive();

getBounds

获取feature最小外接矩形。

const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
// 获取feature最小外接矩形
feature.getBounds();

isCaught

判断点是否在当前要素内。

const featureLayer = new AILabel.Layer.Feature(layerId, config);
const feature = new AILabel.Feature.Polygon(featureId, points, data, gStyle);
gFeatureLayer.addFeature(feature);

feature.isCaught(wxy); // return false;

一 AILabel.Marker

实例标注对象。

const marker = new AILabel.Marker(markerId, config);

在这里插入图片描述

update

标注对象更新。

const marker = new AILabel.Marker(markerId, config);
// 更新标注信息
marker.update(options);

在这里插入图片描述

regEvent

标注对象事件注册，目前仅支持click事件。

const marker = new AILabel.Marker(markerId, config);
// 注册click事件监听
marker.regEvent('click', function () {
    gMap.mLayer.removeMarker(this); // this指向当前标注对象
});

showInfo

展示marker信息。

// 待实现

AILabel.Text

实例化
实例文本对象。

const text = new AILabel.Text(textId, config, gStyle);

在这里插入图片描述

update

更新文本对象。

const text = new AILabel.Text(textId, config, gStyle);
// 更新
text.update(options);

在这里插入图片描述

setText

设置文本内容。

const text = new AILabel.Text(textId, config, gStyle);
// 更新设置文本
text.setText('new-text');

setPosition

设置文本位置。

const text = new AILabel.Text(textId, config, gStyle);
// 更新文本对象位置
text.setPosition(x, y);

AILabel.Control.EagleMap

控件：缩略图，支持两种缩略图形式，一种是纯网格形式，另一种是图像形式；

实例化

const eagleControl = new AILabel.Control.EagleMap(eagleMapId, options);

在这里插入图片描述

AILabel.Control.Scale

控件：比例尺，展示当前缩放比例尺【目前展示形式待丰富】

const scaleControl = new AILabel.Control.Scale(scaleId, options);

在这里插入图片描述

AILabel.Style

设置样式对象。

实例化

const gTextStyle = new AILabel.Style(config);

在这里插入图片描述

AILabel.Util

worldToScreen

实际坐标转屏幕坐标。

const sxy = AILabel.Util.worldToScreen(gMap, x, y);

screenToWorld

屏幕坐标转实际坐标。

const wxy = AILabel.Util.screenToWorld(gMap, x, y);

getBounds

屏幕坐标转实际坐标。

const bounds = AILabel.Util.getBounds(points); // [left_top_point, right_top_point, left_bottom_point, right_bottom_point]

*Major*

关注

14
点赞
踩
32

收藏

觉得还不错? 一键收藏
10
评论
AILabel.js基本使用

元素必须赋值id属性。
复制链接

扫一扫