react 之 openlayer地圖域信息獲取

一、主要方法

（1）getResolution（）獲取分辨率

（2）calculateExtent（）獲取當前顯示範圍

（3）getSize 獲取地圖窗口的大小

二、引入依賴的庫文件

import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Button } from 'antd';
import { fromLonLat } from 'ol/proj.js';

三、加載地圖，並渲染頁面

render() {
    return (
      <div>
        <div onClick={this.zoomin}>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.zoomin}>
            當前分辨率
          </Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.zoomout}>
            當前顯示範圍
          </Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.panTo}>
            當前視口範圍
          </Button>
        </div>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
      </div>
    );
  }

四、相關的方法

（1）獲取當前分辨率

 zoomin = () => {
    let { view } = this.state;
    var curResolution = view.getResolution();
    //彈框顯示
    alert("當前分辨率:" + curResolution);
  };

 （2）獲取當前顯示範圍

zoomout = () => {
      let view = this.state.map.getView();
      //獲取地圖範圍
      var ex = view.calculateExtent(this.state.map.getSize());
      var str = ex[0] + "," + ex[1] + "," + ex[2] + "," + ex[3];
      //彈框顯示
      alert("當前範圍爲：" + str);
  };

（3） 獲取當前視口的大小

 panTo = () => {
    let viewSize = this.state.map.getSize();
     //彈框顯示
     alert("當前div高：" + viewSize[1] + " 寬：" + viewSize[0]);
  };

五、全部代碼

import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Button } from 'antd';
import { fromLonLat } from 'ol/proj.js';

// import {defaults as defaultControls, ZoomToExtent} from './node_modules/ol/control.js.js';

class MapCurrentInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: null,
      view: null,
    };
  }

  componentDidMount() {
    let { map } = this.refs.map;
    //   map.addNavControl()
    let layrs = map.getOverlays();
    console.log('圖層信息', layrs);
    // 縮小
    var view = map.getView();
    console.log('地圖', view);
    // var zoom = view.getZoom();
    this.setState({
      map,
      view,
    });
  }
  //  當前分辨率
  zoomin = () => {
    let { view } = this.state;
    var curResolution = view.getResolution();
    //彈框顯示
    alert("當前分辨率:" + curResolution);
  };
  // 當前顯示範圍
  zoomout = () => {
      let view = this.state.map.getView();
      //獲取地圖範圍
      var ex = view.calculateExtent(this.state.map.getSize());
      var str = ex[0] + "," + ex[1] + "," + ex[2] + "," + ex[3];
      //彈框顯示
      alert("當前範圍爲：" + str);
  };
  //  當前視口範圍
  panTo = () => {
    let viewSize = this.state.map.getSize();
     //彈框顯示
     alert("當前div高：" + viewSize[1] + " 寬：" + viewSize[0]);
  };
  render() {
    return (
      <div>
        <div onClick={this.zoomin}>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.zoomin}>
            當前分辨率
          </Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.zoomout}>
            當前顯示範圍
          </Button>
          <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.panTo}>
            當前視口範圍
          </Button>
        </div>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
      </div>
    );
  }
}

export default MapCurrentInfo;

七、效果圖