关于Openlayers与React的结合--第一个组件

最新推荐文章于 2024-06-21 10:36:22 发布

yatsov

最新推荐文章于 2024-06-21 10:36:22 发布

阅读量3.6k

点赞数 1

分类专栏： Javascript GIS 文章标签： React Openlayers

本文链接：https://blog.youkuaiyun.com/yatsov/article/details/80045090

版权

本文探讨了如何在React应用中整合OpenLayers，详细介绍了遇到的两个问题：Webpack组件打包速度慢和'React is not defined'错误。通过拆分OpenLayers避免webpack打包及正确引入React，成功实现组件化。

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

关于Openlayers与React的结合–第一个组件

简介

下面是我对如何将Openlayers与React结合上面的记录

组件

React采用一个组件化的思想帮助前端进行工程化。所有的对象要内置在每个组件中，可以使用状态或者属性存储。简要代码如下：

import React from 'react';

class Olbasemap extends React.Component{
   
    componentDidMount(){
        let map = new ol.Map({
              target: 'map',
              layers: [
                new ol.layer.Tile({
                   source: new ol.source.OSM()
                })
              ],
              view: new ol.View({
                center: ol.proj.fromLonLat([37.41, 8.82]),
                zoom: 4,
              })
          });
    }
    render(){
        return(
            <div id="map"