react之openlayer根據座標繪製圖形

一、原理

（1）首先創建一個要素，如點、線、面

（2）根據要素創建一個數據源

（3）根據數據數據源創建一個矢量圖層

（4）將創建的矢量的圖層添加到地圖上

二、引入依賴的庫文件

// 設置地圖背景色
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';

三、加載地圖組件和相關的按鈕組件

 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>
    );
  }

四、圖形繪製

（1）繪製點

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

（2）繪製線

//   添加線
  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;
  };

（3）繪製圓

//   添加圓形
  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;
  };

（4）繪製正方形

 //   添加正方形
  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;
  };

（5）繪製矩形

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

（6）繪製多邊形

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

四、全部代碼

// 設置地圖背景色
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';

class AddGraph 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);
    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 AddGraph;

六、效果圖

react之openlayer根據座標繪製圖形

react 之 openlayer繪製任意圖形

postGIS將shp數據導入postgres 數據庫中，並在arcMap中顯示數據

react 之 openlayer圖形的激活與編輯

react之openlayer根據座標繪製圖形

react 之 openlayer圖形交互編輯

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結