矢量数据 是用“经度、纬度”坐标来表示地图图形或地理实体位置的数据，一般是通过记录坐标的方式来尽可能将地理实体的空间位置表现的准确无误，常见的矢量数据有：点、线、面等格式。

1. 矢量数据对象

mirage2d 对矢量对象都做了梳理及统一对外接口的封装，这样使用更加简单易用、对开发人员更友好、开发效率高。 平台的所有矢量数据类均在mirage2d.Graphic.*命名空间下面。矢量数据清单请访问Graphic 类

下面我们演示创建一个矢量数据对象 ，并调用 layer.addGraphic 添加到图层上。

// 全样式属性示例
const point1 = new mirage2d.Graphic.PointGraphic({
  lnglat: [108.51294954850147, 34.37328771494465],
  dataWkID: mirage2d.DataType.crsType.EPSG4326,
  style: {
    text: {
      font: "25px Microsoft YaHei",
      text: "没有鼠标状态",
      fill: {
        color: "#8B4513", // 文字颜色 也可以 color: "rgba(255, 255, 255, 1)",
      },
      stroke: {
        color: "rgba(255, 255, 255,1)", // 文字边框色"#fff",
        width: 2, // 宽度,
      },
      backgroundFill: {
        color: "rgba(0, 0, 0, 0.8)", // color: "rgba(255, 255, 255, 1)",
      },
      backgroundStroke: {
        color: "rgba(255, 255, 255, 0.0)", // 背景边框"#fff",
        width: 1, // 边框宽度,
      },
      padding: [3, 3, 3, 3],
      offsetX: 0,
      offsetY: -18,
      textBaseline: "bottom",
    },
    image: {
      radius: 8,
      scale: 1,
      fill: {
        color: "rgba(0, 0, 0, 0.8)", // color: "rgba(255, 255, 255, 1)",
      },
      stroke: {
        color: "rgba(255, 255, 255,1)", // 圆点边框颜色
        width: 1, // 圆点边框
      },
    },
  },
  attribute: {
    name: "示例7",
    dataType: "tempgraphic",
    movestate: false,
    editallows: false,
  }, // 不允许鼠标移动状态 不允许编辑
});
point1.setSquarePointStyle({}); //设置成正方形
map.GraphicLayer.addFeature("示例", point1);

矢量数据 由 坐标、样式、属性 3 部分组成构成

构成	mirage2d 属性名	说明
坐标	lnglat	地理位置，如经度、纬度 构成
WkID	dataWkID	wkid值,区分坐标系
样式	style	表现形式，如图标图片、线条样式、填充色、文字样式等
属性	attribute	除经纬度信息之外的关联信息，如名称、地址、电话、面积、长度、备注等

可以通过图层的graphicLayer.addFeature("分类名",feature)和 graphicLayer.removeFeature(feature)方法来控制矢量数据的加载和删除。

【分类名】：每个feature都要归属一个分类，便于后期查找和修改

可以通过删除分类实现整组数据的删除

graphicLayer.removeFeatures("分类名")

2. 矢量数据的类别

请参考矢量数据类型

3. 矢量数据的控制

前面我们讲到了平台对所有矢量数据类型做了统一风格的对外接口的封装 ，这样使用更加简单易用、对开发人员更友好、开发效率高。并且参数属性和方法均一致。

2.1 矢量数据的事件

矢量数据均支持事件的绑定、解绑、触发等统一的事件机制,例如：

graphic.on(mirage2d.EventType.click, function (event) {
  console.log("您单击了矢量对象", event);
});

2.2 矢量数据的 Popup、Tooltip 等控件

矢量数据对象上可以操作的常用方法控件相关操作方法有：

//Popup相关
 
graphic.isPopupBind(); //是否绑了Popup
graphic.bindPopup(content, options); //绑定鼠标单击对象后的弹窗。
graphic.unbindPopup(); //解除绑定的鼠标单击对象后的弹窗。
graphic.openPopup(latlng); //打开Popup弹窗
graphic.closePopup(); //关闭弹窗

//Tooltip相关
 
graphic.isTooltipBind(); //是否打开了Tooltip
graphic.bindTooltip(content, options); //绑定鼠标移入对象后的弹窗。
graphic.unbindTooltip(); //解除绑定的鼠标移入对象后的弹窗。
graphic.openTooltip(latlng); //打开Tooltip弹窗

运行效果

新窗口查看