地图场景中，地形和栅格来组成了二维的基础，但更多的业务还是需要 点线面等矢量数据来充实, 这就是我们的矢量数据图层。

1. 图层类型清单

当前主要使用的矢量图层，是指[baseGraphicLayer] 类及其子类对象。矢量图层中可以通过 addFeature 方法来加入[各类型]的[矢量数据]来组成。 目前常用的矢量图层有以下类型：

type 类型名	图层说明	对应的图层类	备注
GraphicLayer	矢量数据图层	mirage2d.Layer.GraphicLayer
GraphicImageLayer	矢量数据图层	mirage2d.Layer.GraphicImageLayer
DivLayer	Div 图层	mirage2d.Layer.DivLayer
HeatmapLayer	热力图图层	mirage2d.Layer.HeatmapLayer
ImageCanvasLayer	ImageCanvas 图层	mirage2d.Layer.ImageCanvasLayer
kmlLayer	kml 图层	mirage2d.Layer.kmlLayer
PathLayer	路径图层	mirage2d.Layer.PathLayer
ClusterLayer	聚合图层	mirage2d.Layer.ClusterLayer
ClusterImageLayer	图片聚合图层	mirage2d.Layer.DivLayer
WfsLayer	OGC WFS 图层	mirage2d.layer.WfsLayer
ArcGisFeatureServiceLayer	ArcGIS WFS 图层	mirage2d.layer.ArcGisFeatureServiceLayer

GraphicImageLayer 与 GraphicLayer 的区别：

1、GraphicImageLayer 更适用于大量数据的加载，但是对动画支持较差，系统默认的 map.GraphicLayer 其实就是 GraphicImageLayer

2、GraphicLayer 加载少量数据时速度更快，且支持动画图层

2. 矢量图层的创建及使用

2.1 快速开始

let clusterLayer;
clusterLayer = new mirage2d.Layer.ClusterLayer("ClusterLayer", {
  haslink: false,
  distance: 60,
});
//创建随机点
const randomPoint = mirage2d.SpatialAnalysis.randomPoints(map.getExtent());
clusterLayer.addFeatures("classname", randomPoint, {
  movestate: false, //不移动
  editallows: false, //不编辑
});

map.addLayer(clusterLayer);

2.2 代码中创建图层

可以有下面 2 种方式来创建图层对象：

//直接创建具体类型的图层对象
var geoJsonLayer = new mirage2d.layer.GeoJsonLayer({
  url: "http://data.mirage2d.cn/file/geojson/areas/100000_full.json",
  symbol: {
    type: "polyline",
    styleOptions: {
      color: "#ff0000",
      width: 3,
    },
  },
});
map.addLayer(geoJsonLayer);

在 Map 创建后可以通过map.addLayer和map.removeLayer方法来控制图层的加载和删除。

3 常用矢量图层类

3.1 GraphicLayer

矢量数据图层

//创建矢量数据图层
let graphicLayer = new mirage2d.Layer.GraphicLayer();

//先加图层再加数据也可以
map.addLayer(graphicLayer);

//加载图片点到矢量图层
const graphic = new mirage2d.Graphic.ImagePointGraphic({
  lnglat: [117.233425, 31.854628],
  dataWkID: mirage2d.DataType.crsType.EPSG4326,
  style: {
    imageOption: {
      src: "img/marker/mark1.png",
    },
  },
  attribute: { DataType: "tempgraphic", name: "示例1" },
});
graphicLayer.addFeature("temp", graphic);

运行效果

新窗口查看

查看全部示例

可以通过配置 symbol 参数来指定渲染的矢量数据类型和样式。

渲染示例