react 之 openlayer圖形的激活與編輯

一、引入依賴的文件

import React, { Component } from 'react';
import Map from '../../component/map/map';
// import style from './map.css'
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Feature from 'ol/Feature';
import { Point, LineString, Circle as circle, Polygon } from 'ol/geom';
import { fromExtent, fromCircle } from 'ol/geom/Polygon';
import { Vector as vec } from 'ol/source';
import { Vector } from 'ol/layer';
import { Style, Fill, Stroke, Circle } from 'ol/style';
import { Draw, Modify as modify, Snap, Select } from 'ol/interaction';

二、加載地圖組件與按鈕組件

 render() {
    return (
      <div>
        <button onClick={this.addGraph.bind(this, 1)}>添加點</button>
        <button onClick={this.addGraph.bind(this, 2)}>添加線</button>
        <button onClick={this.addGraph.bind(this, 3)}>添加圓形</button>
        <button onClick={this.addGraph.bind(this, 4)}>添加正方形</button>
        <button onClick={this.addGraph.bind(this, 5)}>添加矩形</button>
        <button onClick={this.addGraph.bind(this, 6)}>添加多邊形</button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
      </div>
    );
  }

三、底圖的渲染

  let { map } = this.refs.map;
    let { mapkey } = window.config;
    var TiandiMap_vec = new TileLayer({
      name: '天地圖矢量圖層',
      source: new XYZ({
        url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + mapkey, //mapkey爲天地圖密鑰
        wrapX: false,
      }),
    });
    var TiandiMap_cva = new TileLayer({
      name: '天地圖矢量註記圖層',
      source: new XYZ({
        url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + mapkey, //mapkey爲天地圖密鑰
        wrapX: false,
      }),
    });

    // 加載數據
    map.addLayer(TiandiMap_vec);
    map.addLayer(TiandiMap_cva);

四、圖形的激活與編輯

//定義修改幾何圖形功能控件
    var Modify = {
      init: function () {
        //初始化一個交互選擇控件,並添加到地圖容器中
        this.select = new Select();
        map.addInteraction(this.select);
        //初始化一個交互編輯控件，並添加到地圖容器中
        this.modify = new modify({
          //選中的要素
          features: this.select.getFeatures(),
          // style:  new Style({
          //   stroke: new Stroke({
          //     color: "green",
          //     width: 5
          //   })
          // }),
        });
        map.addInteraction(this.modify);
        //設置幾何圖形變更的處理
        this.setEvents();
      },
      setEvents: function () {
        //選中的要素
        var selectedFeatures = this.select.getFeatures();
        console.log(selectedFeatures)
        // selectedFeatures.setStyle({
        //   stroke: new Stroke({
        //     color: [255, 255, 255, 0.75],
        //     width: 1.5
        //   })
        // })
        //添加選中要素變更事件
        this.select.on('change:active', function () {
          // selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
          selectedFeatures.forEach(function (each) {
            console.log(each)
            // selectedFeatures.remove(each);
          });
        });
      },
      setActive: function (active) {
        //激活選擇要素控件
        this.select.setActive(active);
        //激活修改要素控件
        this.modify.setActive(active);
      }
    };

    //初始化幾何圖形修改控件
    Modify.init();
    //激活幾何圖形修改控件;
    Modify.setActive(true);

五、全部代碼

// 設置地圖背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
// import style from './map.css'
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Feature from 'ol/Feature';
import { Point, LineString, Circle as circle, Polygon } from 'ol/geom';
import { fromExtent, fromCircle } from 'ol/geom/Polygon';
import { Vector as vec } from 'ol/source';
import { Vector } from 'ol/layer';
import { Style, Fill, Stroke, Circle } from 'ol/style';
import { Draw, Modify as modify, Snap, Select } from 'ol/interaction';

class EditGraph extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    // console.log(bg)
    let { map } = this.refs.map;
    let { mapkey } = window.config;
    var TiandiMap_vec = new TileLayer({
      name: '天地圖矢量圖層',
      source: new XYZ({
        url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + mapkey, //mapkey爲天地圖密鑰
        wrapX: false,
      }),
    });
    var TiandiMap_cva = new TileLayer({
      name: '天地圖矢量註記圖層',
      source: new XYZ({
        url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + mapkey, //mapkey爲天地圖密鑰
        wrapX: false,
      }),
    });

    // 加載數據
    map.addLayer(TiandiMap_vec);
    map.addLayer(TiandiMap_cva);

    //定義修改幾何圖形功能控件
    var Modify = {
      init: function () {
        //初始化一個交互選擇控件,並添加到地圖容器中
        this.select = new Select();
        map.addInteraction(this.select);
        //初始化一個交互編輯控件，並添加到地圖容器中
        this.modify = new modify({
          //選中的要素
          features: this.select.getFeatures(),
          // style:  new Style({
          //   stroke: new Stroke({
          //     color: "green",
          //     width: 5
          //   })
          // }),
        });
        map.addInteraction(this.modify);
        //設置幾何圖形變更的處理
        this.setEvents();
      },
      setEvents: function () {
        //選中的要素
        var selectedFeatures = this.select.getFeatures();
        console.log(selectedFeatures)
        // selectedFeatures.setStyle({
        //   stroke: new Stroke({
        //     color: [255, 255, 255, 0.75],
        //     width: 1.5
        //   })
        // })
        //添加選中要素變更事件
        this.select.on('change:active', function () {
          // selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
          selectedFeatures.forEach(function (each) {
            console.log(each)
            // selectedFeatures.remove(each);
          });
        });
      },
      setActive: function (active) {
        //激活選擇要素控件
        this.select.setActive(active);
        //激活修改要素控件
        this.modify.setActive(active);
      }
    };

    //初始化幾何圖形修改控件
    Modify.init();
    //激活幾何圖形修改控件;
    Modify.setActive(true);


    this.setState({
      TiandiMap_vec,
      TiandiMap_cva,
    });
  }

  addGraph = type => {
    console.log('圖層', type);
    let graph = '';
    let { map } = this.refs.map;
    switch (type) {
      case 1:
        graph = this.addPoint();
        break;
      case 2:
        graph = this.addLine();
        break;
      case 3:
        graph = this.addCricle();
        break;
      case 4:
        graph = this.addSquare();
        break;
      case 5:
        graph = this.addRectangle();
        break;
      case 6:
        graph = this.addPolygon();
        break;
      default:
        break;
    }
    //實例化一個矢量圖層Vector作爲繪製層
    var source = new vec({
      features: [graph],
    });
    //創建一個圖層
    var vector = new Vector({
      source: source,
    });
    map.addLayer(vector);

  };
  //添加點
  addPoint = () => {
    let point = new Feature({
      geometry: new Point([11505912.0, 4011415.0]),
    });
    //設置點1的樣式信息
    point.setStyle(
      new Style({
        //填充色
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        //邊線顏色
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        //形狀
        image: new Circle({
          radius: 17,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    );
    return point;
  };
  //   添加線
  addLine = () => {
    var Line = new Feature({
      geometry: new LineString([[8208725.0, 3835304.0], [16055444.0, 4578883.0]]),
    });

    //設置線的樣式
    Line.setStyle(
      new Style({
        //填充色
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        //邊線顏色
        stroke: new Stroke({
          color: '#ffcc33',
          width: 5,
        }),
        //形狀
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    );
    return Line;
  };

  //   添加圓形
  addCricle = () => {
    var Cir = new Feature({
      geometry: new circle([9871995.0, 4344069.0], 1000000),
    });

    Cir.setStyle(
      new Style({
        //填充色
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.5)',
        }),
        //邊線顏色
        stroke: new Stroke({
          color: '#ffcc33',
          width: 6,
        }),
        //形狀
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    );
    return Cir;
  };

  //   添加正方形
  addSquare = () => {
    //創建一個圓
    var Cir = new circle([9871995.0, 4344069.0], 1000000);

    //根據圓獲取多邊形
    var Square = new Feature({
      geometry: new fromCircle(Cir, 4, 150),
    });

    Square.setStyle(
      new Style({
        //填充色
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.8)',
        }),
        //邊線顏色
        stroke: new Stroke({
          color: 'red',
          width: 2,
        }),
        //形狀
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    );
    return Square;
  };
  //   添加矩形
  addRectangle = () => {
    var Rectangle = new Feature({
      geometry: new fromExtent([8208725.0, 2035304.0, 12841418.0, 4068487.0]),
    });

    Rectangle.setStyle(
      new Style({
        fill: new Fill({
          color: 'rgba(33,33,33,0.5)',
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 4,
        }),
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    );
    return Rectangle;
  };

  // 添加多邊形
  addPolygon = () => {
    var polygon = new Feature({
      geometry: new Polygon([
        [[9871995.0, 4344069.0], [12689769.0, 5107216.0], [13002855.0, 3522218.0]],
      ]),
    });
    //設置區樣式信息
    polygon.setStyle(
      new Style({
        //填充色
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.5)',
        }),
        //邊線顏色
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        //形狀
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    );
    return polygon;
  };

  render() {
    return (
      <div>
        <button onClick={this.addGraph.bind(this, 1)}>添加點</button>
        <button onClick={this.addGraph.bind(this, 2)}>添加線</button>
        <button onClick={this.addGraph.bind(this, 3)}>添加圓形</button>
        <button onClick={this.addGraph.bind(this, 4)}>添加正方形</button>
        <button onClick={this.addGraph.bind(this, 5)}>添加矩形</button>
        <button onClick={this.addGraph.bind(this, 6)}>添加多邊形</button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
      </div>
    );
  }
}

export default EditGraph;

六、效果圖