reat 之openlayers地图组件封装

最新推荐文章于 2025-05-16 11:48:43 发布

gis_SSS

最新推荐文章于 2025-05-16 11:48:43 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/gis_zzu/article/details/90547990

react 专栏收录该内容

25 篇文章

订阅专栏

博客介绍了在信息技术领域中，使用React创建组件及在地图页面加载组件的方法。首先在指定文件创建有状态组件，接着在地图页面引入该组件并初始化，最后展示了效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.建立组件文件

在component/map/map.js 文件，创建一个react有状态组件

// import ol from "./ol.css"
// react 组件
import React, { Component } from 'react';
// openlayers 函数
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj.js';
import {defaults as defaultControls, ZoomToExtent} from 'ol/control.js'


class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map:{}
    }
  }
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    let { center } = this.props;
    if (!center) {
      center = { 
        lon: 113.8,
        lat: 34.6,
      };
    }
    this.map = new Map({
      view: new View({
        center: fromLonLat([center.lon, center.lat]),   //将WGS8坐标转化为web墨卡托坐标
        zoom: 5,
      }),
      layers: [
        new TileLayer({
          source: new OSM(), //加载OSM数据
        }),
      ],
      target: 'map',   //绑定地图容器

    });
    //  传值给父组件
    // if(this.props.getMap){
    //    this.props.getMap("map对象")
    // }
   
  }

  render() {
    // 1.创建地图容器
    return (
      <div style={{ height: '100%' }}>
        <div id="map" className="map" style={{ height: '100%' }} />
      </div>
    );
  }
}

export default MapComponent;

2在需要显示地图页面中加载子组件

（1）引入地图组件

import Map from '../../component/map/map';

（2）初始化子组件

import React, { Component } from 'react';
// 引入子组件
import Map from '../../component/map/map';


class Main extends Component {
  // 2.dom渲染成功后进行map对象的创建
  componentDidMount() {
    
  }

  render() {
    // 1.创建地图容器
    return <Map center={{lon:113.8,lat:34.6}}></Map>;
  }
}

export default Main;

（3）效果如下