MineMap Edit API Reference

菜单	说明
版本	v2.1.0
上次修改时间	2020.12.23

初始化地图编辑器

/**
 * 初始化地图编辑器
 * @param {Object} map 必输项
 * @param {Object} options 编辑参数对象
 * @param {string} controlPosition 控件位置 非必输项 值域为 `'top-left'`, `'top-right'`, `'bottom-left'`,  `'bottom-right'`. 默认值为 `'top-right'`.
 */
var edit = new minemap.edit.init(map, options, controlPosition);

// example
var edit = new minemap.edit.init(map, {
  boxSelect: true,
  touchEnabled: false,
  displayControlsDefault: true,
  showButtons: false,
});

/**
 * 更换编辑参数对象
 * @param {Object} options 编辑参数对象
 */
edit = edit.setOptions(options);

/**
 * 销毁地图编辑器
 */
edit.dispose();

Options 地图编辑器参数对象说明

• keybindings, boolean (default true): 地图编辑器是否支持键盘交互;
• touchEnabled, boolean (default true): 地图编辑器是否支持触摸交互;
• boxSelect, boolean (default true): 地图编辑器是否支持数据框选，使用 shift+click+drag 进行操作;
• displayControlsDefault, boolean (default: true): 是否启用或关闭全部控件;
• drawEnabled, boolean (default: true): 是否启用或关闭图形编辑功能;
• adsorbEnabled, boolean (default: false): 是否启用或关闭线面吸附功能;
• adsorbBuffer, number (default: 5像素): 吸附半径;
• userStyles, 全局默认样式，非必输项，输入参数为以下全部或部分内容。参数说明：inactive-非选中状态图形样式，active-选中状态图形样式，static-不可编辑状态图形样式；内部详细样式参数内容如下：fillColor-面颜色，fillOpacity-面不透明度，fillOutlineColor-面轮廓颜色，fillOutlineWidth-面轮廓宽度，lineColor-线颜色，lineWidth-线宽度，circleBorderColor-点边框颜色，circleBorderRadius-点边框宽度，circleColor-点颜色，circleRadius-点半径

/* userStyles全部参数默认值 */
{
  "inactive": {
    "fillColor": "#55B1F3",
    "fillOpacity": 0.1,
    "fillOutlineColor": "#55B1F3",
    "fillOutlineWidth": 2,
    "lineColor": "#55B1F3",
    "lineWidth": 2,
    "circleColor": "#55B1F3",
    "circleRadius": 4,
    "circleBorderColor": "#ffffff",
    "circleBorderRadius": 2
  },
  "active": {
    "fillColor": "#F05668",
    "fillOpacity": 0.1,
    "fillOutlineColor": "#F05668",
    "fillOutlineWidth": 2,
    "lineColor": "#F05668",
    "lineWidth": 2,
    "circleColor": "#F05668",
    "circleRadius": 6,
    "circleBorderColor": "#ffffff",
    "circleBorderRadius": 2
  },
  "static": {
    "fillColor": "#404040",
    "fillOpacity": 0.1,
    "fillOutlineColor": "#404040",
    "fillOutlineWidth": 2,
    "lineColor": "#404040",
    "lineWidth": 2,
    "circleColor": "#404040",
    "circleRadius": 4
  }
}

地图编辑器初始化数据

地图编辑器需要 minemap loaded 后才生效

map.on("load", function () {
  edit.draw.add(geojson); //向编辑池增加数据
  edit.setFeatures(featureCollection); //设置编辑池中的数据
});

编辑模式

编辑模式可切换不同的编辑行为

/**
 * 编辑模式切换触发事件
 * @param {string} mode 值域范围如下：
 * 参数说明：'point':'画点',
            'icon': '画标注',
            'line': '画线',
            'arc': '画圆弧,
            'text': '文字',
            'polygon': '画多边形',
            'rectangle': '画矩形',
            'triangle': '画三角形',
            'circle': '画圆',
            'ellipse': '画圆',
            'sector': '画扇形',
            'trash': '删除所选',
            'combine': '合并同类图形',
            'uncombine': '拆分同类图形',
            'union_polygon': '合并面',
            'split_polygon': '拆分面',
            'union_line': '合并线',
            'split_line': '拆分线',
            'curve_line': '弯曲线',
            'free_drawing': '画草图',
            'line_arrow': '画直线箭头',
            'thin_straight_arrow': '画细直箭头',
            'thin_tail_arrow': '画细直(尾)箭头',
            'attack_arrow': '画突击箭头',
            'offensive_arrow': '画进攻箭头',
            'offensive_tail_arrow': '画进攻(尾)箭头',
            'pincer_attack_arrow': '画钳击箭头',
            'curve_polygon': '曲线面',
            'undo': '撤销上一步操作',
            'redo': '重复上一步操作',
            'static':'切换为不可编辑模式'
 * @param {object} modeOptions 非必输项，其中包括样式参数style、形状参数shape：
 */
edit.onBtnCtrlActive(mode);
// modeOptions参数，其中包括样式参数style、形状参数shape；
// style内部参数内容如下：
// 画面图形参数：
//  fillColor-面颜色，默认值"#55B1F3"；
//  fillOpacity-面不透明度，默认值0.1；
//  fillOutlineColor-面轮廓颜色，默认值"#55B1F3"；
//  fillOutlineWidth-面轮廓宽度，默认值2；
//  fillOutlineDasharray-面轮廓是否为虚线，默认值"false"；
// 示例如下：
edit.onBtnCtrlActive("polygon", {
  style: {
    fillColor: "red",
    fillOpacity: 0.1,
    fillOutlineColor: "red",
    fillOutlineWidth: 2,
  },
});
// 画线图形参数：
//  lineColor-线颜色，默认值"#55B1F3"；
//  lineWidth-线宽度，默认值2；
//  lineDasharray-线是否为虚线，默认值"false"；
// 示例如下：
edit.onBtnCtrlActive("line", { style: { lineColor: "red", lineWidth: 2 } });
// 画圆点图形参数：
//  circleBorderColor-点边框颜色，默认值"#ffffff"；
//  circleBorderRadius-点边框宽度，默认值2；
//  circleColor-点颜色，默认值"#55B1F3"；
//  circleRadius-点半径，默认值4；
// 示例如下：
edit.onBtnCtrlActive("point", {
  style: {
    circleColor: "red",
    circleRadius: 4,
    circleBorderColor: "#ffffff",
    circleBorderRadius: 2,
  },
});
// 画标注图形参数:
//  iconImage：图标名称(加入到minemap地图中的图标名称，其中包括sprite中的名称、以及通过使用map.addImage方法自定义添加的图标名称)；
//  iconColor：图标颜色（如果图标是矢量的可编辑颜色的，需要增加该参数，否则不需要该参数）
//  iconSize：图标大小，默认值为1，非必输项
//  iconRotate：图标旋转角度(顺时针方向)，默认值为0，非必输项
// 示例如下：
edit.onBtnCtrlActive("icon", { style: { iconImage: "icon-flag1" } });

// 箭头图形shape内部参数:
//  startArrowType：开始箭头类型，值域范围：'none'-无箭头,'normal'-普通箭头,'hollow'-空心箭头，默认值'none'；
//  endArrowType：结尾箭头类型，值域范围：'none'-无箭头,'normal'-普通箭头,'hollow'-空心箭头，默认值'normal'；
//  lineType：线条类型，值域范围：'solid'-直线,'elbow'-肘形线,'curve'-曲线，默认值'solid'；
// 示例如下：
edit.onBtnCtrlActive("line_arrow", {
  shape: { startArrowType: "none", endArrowType: "normal", lineType: "solid" },
});

// 文字类型
edit.onBtnCtrlActive("text", {
  style: {
    textField: "文字名称", // 文字内容
    textColor: "#00FF00", // 文字颜色
    textSize: 26, // 文字大小
    custom_style: "true",
  },
});

API Methods

edit.setFeatures(featureCollection: object)

设置编辑池中的数据，返回 id 数组.

示例说明:

var ids = edit.setFeatures(featureCollection);

edit.removeFeatures(featureIds: array)

删除编辑池中的数据，返回 id 数组.

示例说明:

var ids = edit.removeFeatures(featureIds);

edit.setSelected(featureIds: array)

设置地图编辑选中数据.

示例说明:

var ids = edit.setSelected(featureIds);

edit.setFeatureProperties(featureId: string, properties:object)

更新 feature properties，返回 featureId 对应的最新的 feature.

示例说明:

edit.setFeatureProperties(featureId, { k1: "v1", k2: "v2" });

edit.getAllHistoryRecords()

获取编辑器中的所有操作历史记录.

示例说明:

var records = edit.getAllHistoryRecords();
//records为操作记录数组
//record结果说明如下：
{
  type:0,/*操作类型：0-无、1-删除、2-修改、3-新增、4-替换*/
  action:0,/*更新操作行为：0-无、1-图形移动、2-更改图形形状点、3-更改properties*/
  features:[],/*本次操作后的features*/
  prevFeatures[] /*本次操作前的features*/
}

edit.clearHistoryRecords()

清除编辑器中所有的操作历史记录.

示例说明:

edit.clearHistoryRecords();

edit.draw.add(geojson: Object) => Array<string>

将 GeoJSON(Feature、FeatureCollection、Geometry)到添加到地图编辑器，返回新增数据的 id 数组，如果 feature 没有 id，编辑器自动生成 id

GeoJSON feature types 可以为: Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon.

如果add() a feature(feature 包含 id)，该 id 在地图编辑器已存在, 新增的 feature 会替换已经存在的.

示例说明:

var feature = { type: "Point", coordinates: [0, 0] };
var featureIds = edit.draw.add(feature);
console.log(featureIds);
//=> ['some-random-string']

示例说明-feature 包含 id:

var feature = {
  id: "unique-id",
  type: "Feature",
  properties: { isLock: false }, // 是否单feature锁定使用
  geometry: { type: "Point", coordinates: [0, 0] },
};
var featureIds = edit.draw.add(feature);
console.log(featureIds);
//=> ['unique-id']

edit.draw.get(featureId: string): ?Feature

根据 featureId 获取编辑器中的 GeoJSON feature, 如果不存在则返回undefined.

示例说明:

var featureIds = edit.draw.add({ type: "Point", coordinates: [0, 0] });
var pointId = featureIds[0];
console.log(edit.draw.get(pointId));
//=> { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] } }

edit.draw.getFeatureIdsAt(point: { x: number, y: number }): Array<string>

根据具体的点返回编辑器中的 feature id 数组.

Notice that the point argument requires x, y coordinates from pixel space, rather than longitude, latitude coordinates.

var featureIds = edit.draw.getFeatureIdsAt(20, 20);
console.log(featureIds);
//=> ['top-feature-at-20-20', 'another-feature-at-20-20']

edit.draw.getSelectedIds(): Array<string>

返回编辑池中当前已选择的 feature id 数组.

edit.draw.getSelected(): FeatureCollection

返回编辑池中当前已选择的 features，以 FeatureCollection 的形式返回.

edit.draw.getSelectedPoints(): FeatureCollection

返回编辑池中当前已选择的形状的顶点，以 FeatureCollection 的形式返回.

edit.draw.getAll(): FeatureCollection

返回编辑池中的所有 features，以 FeatureCollection 的形式返回.

示例说明:

edit.draw.add({ type: "Point", coordinates: [0, 0] });
edit.draw.add({ type: "Point", coordinates: [1, 1] });
edit.draw.add({ type: "Point", coordinates: [2, 2] });
console.log(edit.draw.getAll());
// {
//   type: 'FeatureCollection',
//   features: [
//     {
//       id: 'random-0'
//       type: 'Feature',
//       geometry: {
//         type: 'Point',
//         coordinates: [0, 0]
//       }
//     },
//     {
//       id: 'random-1'
//       type: 'Feature',
//       geometry: {
//         type: 'Point',
//         coordinates: [1, 1]
//       }
//     },
//     {
//       id: 'random-2'
//       type: 'Feature',
//       geometry: {
//         type: 'Point',
//         coordinates: [2, 2]
//       }
//     }
//   ]
// }

edit.draw.delete(ids: string | Array<string>)

根据 id 数组删除编辑池中的数据.

示例说明:

var feature = { type: "Point", coordinates: [0, 0] };
var ids = edit.draw.add(feature);
edit.draw.delete(ids).getAll();
// { type: 'FeatureCollection', features: [] }

edit.draw.deleteAll()

删除所有编辑池中的数据.

示例说明:

edit.draw.add({ type: "Point", coordinates: [0, 0] });
edit.draw.deleteAll().getAll();
// { type: 'FeatureCollection', features: [] }

edit.draw.set(featureCollection: FeatureCollection): Array<string>

设置编辑池中的数据.

示例说明:

var ids = edit.draw.set({
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      id: "example-id",
      geometry: { type: "Point", coordinates: [0, 0] },
    },
  ],
});
// ['example-id']

edit.draw.trash()

删除所有已选的 feature 或形状点的顶点.

该操作会产生历史操作记录.

edit.setFeaturePropertiesByIds(ids, styleOptions)

通过指定 id，来对图层进行样式的修改

// styleOptions中的 custom_style 属性需要设置为 "true"，才可以进行修改
// 如果这个为'false'则不会使用用户的样式使用默认样式
edit.setFeaturePropertiesByIds(ids, {
  fillColor: "#ff0000",
  fillOpacity: 0.3,
  fillOutlineColor: "#ff0000",
  fillOutlineWidth: 6,
  lineOpacity: 0.4,
  fillOutLineDasharrays: [6, 4, 6],
  custom_style: "true", // string类型，boolean无效
});

edit.setCustomStyle(styleOptions, featureOptions)

自定义设置选中图形的样式:

//示例说明：
// 自定义设置选中图形的样式,styleOptions参数内容如下：
// 面图形可调整参数：fillColor-面颜色，默认值"#55B1F3"；fillOpacity-面不透明度，默认值0.1；fillOutlineColor-面轮廓颜色，默认值"#55B1F3"；fillOutlineWidth-面轮廓宽度，默认值2；fillOutlineDasharray-面轮廓是否为虚线，默认值"false"；
// 线图形可调整参数：lineColor-线颜色，默认值"#55B1F3"；lineWidth-线宽度，默认值2；lineDasharray-是否为虚线，默认值"false"；
// 点图形可调整参数：circleBorderColor-点边框颜色，默认值"#ffffff"；circleBorderRadius-点边框宽度，默认值2；circleColor-点颜色，默认值"#55B1F3"；circleRadius-点半径，默认值4；
// 图标图形可调整参数：iconImage-图标名称，默认值""；iconSize-图标大小，默认值1；iconRotate-图标旋转角度，默认值0；
// featureOptions，非必输项；内部参数说明：featureIds，非必输项，变更图形featureId数组，如何不设置该参数，则默认设置选中图形样式；cancelSelected，样式更新完成后是否调整为非选中状态，非必输项，默认为true；
edit.setCustomStyle({
  fillColor: "#55B1F3",
  fillOpacity: 0.1,
  fillOutlineColor: "#55B1F3",
  fillOutlineWidth: 2,
  fillOutlineDasharray: "false",
  lineColor: "#55B1F3",
  lineWidth: 2,
  lineDasharray: "false",
  circleBorderColor: "#ffffff",
  circleBorderRadius: 2,
  circleColor: "#55B1F3",
  circleRadius: 4,
});

edit.cancelCustomStyle(featureOptions)

恢复选中图形为默认样式:

// featureOptions，非必输项；内部参数说明：featureIds，非必输项，变更图形featureId数组，如何不设置该参数，则默认设置选中图形样式；cancelSelected，样式更新完成后是否调整为非选中状态，非必输项，默认为true；

edit.isDrawEnabled()

图形编辑功能是否启用.

// 示例说明:
edit.isDrawEnabled();

edit.setLockByIds(ids, isLock)

设置单个 feature 是否可以编辑

/**
 * @parmas {Array} ids features的id数组
 * @parmas {Boolean} isLock 是否开始编辑
 */
// 开启编辑
edit.setLockByIds(ids, true);
// 禁止编辑
edit.setLockByIds(ids, true);

edit.disableDraw()

禁用图形编辑功能.

// 示例说明:
edit.disableDraw();

edit.enableDraw()

启用图形编辑功能.

// 示例说明:
edit.enableDraw();

edit.isAdsorbEnabled()

吸附功能是否启用.

// 示例说明:
edit.isAdsorbEnabled();

edit.disableAdsorb()

禁止吸附功能.

// 示例说明:
edit.disableAdsorb();

edit.enableAdsorb()

开启吸附功能.

// 示例说明:
edit.enableAdsorb();

Events

edit.record.create

地图编辑操作记录新增事件:

• 当图形删除、新增、修改、属性更新、图形合并拆分等会产生新增的操作记录.

//加入监听
map.on("edit.record.create", onEditRecordCreate);
function onEditRecordCreate(e) {
    console.log(e.record)
}
//record结果说明如下：
{
  type:0,/*操作类型：0-无、1-删除、2-修改、3-新增、4-替换*/
  action:0,/*更新操作行为：0-无、1-图形移动、2-更改图形形状点、3-更改properties*/
  features:[],/*本次操作后的features*/
  prevFeatures[] /*本次操作前的features*/
}

edit.undo

地图编辑撤销上一步操作事件:

//加入监听
map.on("edit.undo", onEditUndo);
function onEditUndo(e) {
  console.log(e.record);
}

edit.redo

地图编辑重复上一步操作事件:

//加入监听
map.on("edit.redo", onEditRedo);
function onEditRedo(e) {
  console.log(e.record);
}

edit.selected

地图编辑图形选中事件:

//加入监听
map.on("edit.selected", onEditSelected);
function onEditSelected(e) {
  console.log(e.featureIds); //e.featureIds为当前选中的图形id
}

edit.unselected

地图编辑图形失焦事件：

map.on("edit.unselected", function (e) {
  console.log("edit.unselected", e);
});

draw.update

地图编辑 feature 更新事件:

// 示例说明：
// 触发属性更新事件，然后会产出一条操作记录
map.fire("draw.update", {
  action: "change_properties",
  prevFeatures: [旧属性的Feature],
  features: [新属性的Feature],
});

draw.selectmovechange

编辑操作中鼠标移动的事件

map.on("draw.selectmovechange", function (e) {
  console.log("selectmovechange", e);
});