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


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
    });
    map.addInteraction(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;

二、效果圖