<< 所有组件

🏷️ @bdh-gis/ol-control-edit

要素编辑

npm i @bdh-gis/ol-control-edit

//要素编辑组件
import Edit from '@bdh-gis/ol-control-edit';
// import '@bdh-gis/ol-control-edit/src/index.css';
import '@bdh-gis/ol-control-edit/src/dark.css';

/*************************** 要素编辑 ****************************/
// New Feature
const feature_point = new Feature(new Point([132.867, 47.2763754924202]));
const feature_linestring = new Feature(
  new LineString([
    [132.8703, 47.2763754924202],
    [132.8737, 47.277407234388],
    [132.8764, 47.2763754924202],
  ]),
);
const feature_polygon = new Feature(
  new Polygon([
    [
      [132.878077263337, 47.2803754924202],
      [132.881049843613, 47.281407234388],
      [132.885687319518, 47.275216480775],
      [132.882844617633, 47.2738705689243],
      [132.878077263337, 47.2803754924202],
    ],
  ]),
);
// New vector layer
const layer_point = new VectorLayer({
  id: 'layer_point',
  name: '点图层',
  source: new VectorSource(),
});
const layer_linestring = new VectorLayer({
  id: 'layer_linestring',
  name: '线图层',
  source: new VectorSource(),
});
const layer_polygon = new VectorLayer({
  id: 'layer_polygon',
  name: '面图层',
  source: new VectorSource(),
});
layer_point.getSource().addFeature(feature_point);
layer_linestring.getSource().addFeature(feature_linestring);
layer_polygon.getSource().addFeatures(feature_polygon);
map.addLayer(layer_point);
map.addLayer(layer_linestring);
map.addLayer(layer_polygon);

const edit = new Edit({
  layers: [layer_point, layer_linestring, layer_polygon],
  measure: true,
});
edit.options.onEvents = (type, data) => {
  console.log(type, data, 'onEvents');
  if ('QUIT' == type) {
    layer_polygon.getSource().clear();
    layer_polygon.getSource().addFeature(
      new Feature(
        new Polygon([
          [
            [132.878077263337, 47.2803754924202],
            [132.881049843613, 47.281407234388],
            [132.885687319518, 47.275216480775],
            [132.882844617633, 47.2738705689243],
            [132.878077263337, 47.2803754924202],
          ],
        ]),
      ),
    );
    //重新设置编辑在图层
    edit.update({
      layers: [layer_polygon],
    });
    //隐藏部分功能按钮
    edit.setButtonsVisible([edit.buttons[4], edit.buttons[5]], false);
  }
};
map.addControl(edit);

Options

export type AnyEvent = "CONTROL_BUTTON_CLICK" | "CREATE_BUTTONS" | "LOCATE" | "SELECT" | "EDIT" | "EDIT_PROPERTIES" | "ADD" | "DELETE" | "TRANSFORM" | "DRAW_HOLE" | "SPLIT" | "PREV" | "NEXT" | "RESTORE" | "CLEAR" | "SAVE" | "QUIT" | "INTERACTION";
export type AnyFeatureType = "点" | "线" | "面";
export type Options = {
    layers: VectorLayer<VectorSource>[];
    measure?: boolean;
    isCreateButtons?: boolean;
    buttons?: Utils.ButtonOptions[];
    onEvents?: (event: AnyEvent, data?: any) => void;
};