React+Openlayers结合总结（一）

最新推荐文章于 2025-02-27 20:29:26 发布

Jiesengbb

最新推荐文章于 2025-02-27 20:29:26 发布

阅读量2.3k

点赞数 3

分类专栏： React+Openlayers 文章标签： react javascript 前端

本文链接：https://blog.youkuaiyun.com/LYX_Jiesengbb/article/details/106074887

版权

本文分享了作者在项目中结合React与OpenLayers的经验，强调理解OpenLayers API的重要性。文章通过示例代码讲解了Target属性、layers属性和View属性的用途，强调Target需指定容器并设置宽高，layers为地图上的图层集合，而View控制地图的中心位置、放大倍数等。文章适合初学者参考。

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

阅读前说明：
本篇文章主要是根据个人项目经验及相关学习总结，本人也并非权威专业地图开发人员，因此，你懂，初学者可以参考，当然，我承诺比官网只给的简单的例子要有用。

笔者建议：
开始正式总结之前还有一句重要的话要提醒大家，Openlayers 是一个非常完整的库，在编程的时候，大家尽量有意识的把Openlayers和React分开，不要习惯性用React.js思路去解决Openlayers的问题，需要对地图进行的操作和要获取的属性，都要从Openalyers入手，学会去查它的API。这样结合React去学习和使用Openalyers就比较容易许多。

示例代码讲解

实例代码

可惜呀，我是一个心善但又超级懒得人，来，我们看从别人那儿复制来的代码：

import React from 'react';
import Map from 'ol/Map';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import View from 'ol/View';
import {
    fromLonLat } from 'ol/proj';

class MapHot extends React.Component {
   
    componentDidMount(