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 { Vector as VectorSource } from 'ol/source';
import { Vector } from 'ol/layer';
import { Style, Fill, Stroke, Circle } from 'ol/style';
import { Draw, Modify, Snap } 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>
    );
  }

三、加載地圖底圖和創建繪製圖層

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,
      }),
    });
    // 添加繪製圖層
    var source = new VectorSource({ wrapX: false });
    var vector = new Vector({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    });
    //將繪製層添加到地圖容器中

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

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

四、繪製任意圖形

 addGraph = type => {
    let { map } = this.refs.map;
    let that = this;
    let drawType = 'None';
    switch (type) {
      case 1:
        drawType = 'Point';
        break;
      case 2:
        drawType = 'LineString';
        break;
      case 3:
        drawType = 'Polygon';
        break;
      case 4:
        drawType = 'Circle';
        break;
      case 5:
        break;
      case 6:
        break;
      default:
        break;
    }
    var draw = new Draw({
      //繪製層數據源
      source: that.state.source,
      /** @type {ol.geom.GeometryType}幾何圖形類型 */
      type: drawType,
      // //幾何信息變更時調用函數
      // geometryFunction: geometryFunction,
      //最大點數
      // maxPoints: 2
      //  設置後移動鼠標繪製圖形
      freehand: true,
    });
    draw.on("drawend",function(e){
      console.log("繪製結束後獲取信息",e.feature.getGeometry())
    })
    map.addInteraction(draw);
    //  map.removeInteraction(draw);    移除
  };

五、全部代碼

// 設置地圖背景色
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 { Vector as VectorSource } from 'ol/source';
import { Vector } from 'ol/layer';
import { Style, Fill, Stroke, Circle } from 'ol/style';
import { Draw, Modify, Snap } from 'ol/interaction';

class DrawGeometry 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,
      }),
    });
    // 添加繪製圖層
    var source = new VectorSource({ wrapX: false });
    var vector = new Vector({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    });
    //將繪製層添加到地圖容器中

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

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

  addGraph = type => {
    let { map } = this.refs.map;
    let that = this;
    let drawType = 'None';
    switch (type) {
      case 1:
        drawType = 'Point';
        break;
      case 2:
        drawType = 'LineString';
        break;
      case 3:
        drawType = 'Polygon';
        break;
      case 4:
        drawType = 'Circle';
        break;
      case 5:
        break;
      case 6:
        break;
      default:
        break;
    }
    var draw = new Draw({
      //繪製層數據源
      source: that.state.source,
      /** @type {ol.geom.GeometryType}幾何圖形類型 */
      type: drawType,
      // //幾何信息變更時調用函數
      // geometryFunction: geometryFunction,
      //最大點數
      // maxPoints: 2
      //  設置後移動鼠標繪製圖形
      freehand: true,
    });
    draw.on("drawend",function(e){
      console.log("繪製結束後獲取信息",e.feature.getGeometry())
    })
    map.addInteraction(draw);
    //  map.removeInteraction(draw);    移除
  };
  //添加點

  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 DrawGeometry;

六、效果圖