react 之 openlayer地图鹰眼

一、引入依赖文件

import React, { Component } from 'react'; import Map from '../../component/map/map'; import {OverviewMap} from 'ol/control.js'; import OSM from 'ol/source/OSM'; import TileLayer from 'ol/layer/Tile';

二、加载地图组件

render() { return ( <div> <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); }

三、创建鹰眼对象并和地图对象关联

let {map} = this.refs.map var scaleLineControl = new OverviewMap({ //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used） className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼中加载同坐标系下不同数据源的图层 layers: [ new TileLayer({ source: new OSM(), })], //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码） collapseLabel: '\u00BB', //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码） label: '\u00AB', //初始为展开显示方式 collapsed: false }); map.addControl(scaleLineControl)

四、全部代码

import React, { Component } from 'react'; import Map from '../../component/map/map'; import {OverviewMap} from 'ol/control.js'; import OSM from 'ol/source/OSM'; import TileLayer from 'ol/layer/Tile'; class MapOverviewMap extends Component { constructor(props){ super(props) this.state = { x:0, y:0 } } componentDidMount() { let {map} = this.refs.map var scaleLineControl = new OverviewMap({ //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used） className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼中加载同坐标系下不同数据源的图层 layers: [ new TileLayer({ source: new OSM(), })], //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码） collapseLabel: '\u00BB', //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码） label: '\u00AB', //初始为展开显示方式 collapsed: false }); map.addControl(scaleLineControl) } render() { return ( <div> <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />; </div> ); } } export default MapOverviewMap;

 

 五、效果图