react 之 openlayer地图基本操作

一、引入必要的文件

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> <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.goback}> 复位 </Button> </div> <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); }

三、地图渲染

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

四、地图操作

（1）缩小事件

zoomin = () => { let { view } = this.state; var zoom = view.getZoom(); view.setZoom(zoom - 1); };

（2）放大事件

// 地图放大 zoomout = () => { var view = this.state.map.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 2); };

（3）地图平移事件

panTo = () => { let { map } = this.state; //获取地图视图 var view = map.getView(); var wh = fromLonLat([105, 35]); //平移地图 view.setCenter(wh); view.setZoom(10); };

（4）地图复位事件

goback = () => { let { view } = this.state; var wh = fromLonLat([113.8, 34.6]); //平移地图 view.setCenter(wh); view.setZoom(5); };

四、全部代码

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 MapOperation 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 zoom = view.getZoom(); view.setZoom(zoom - 1); }; // 地图放大 zoomout = () => { var view = this.state.map.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 2); }; // 地图信息 panTo = () => { let { map } = this.state; //获取地图视图 var view = map.getView(); var wh = fromLonLat([105, 35]); //平移地图 view.setCenter(wh); view.setZoom(10); }; // 复位 goback = () => { let { view } = this.state; var wh = fromLonLat([113.8, 34.6]); //平移地图 view.setCenter(wh); view.setZoom(5); }; 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> <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.goback}> 复位 </Button> </div> <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); } } export default MapOperation;

五、效果图