react工程加载openlayers

Z时代
2024-01-10
分类：综合

react

一:openlayers简介

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发.是开源二维地图web地图库。

二：openlayers和react的结合

（1）安装ol库

yarn add ol

(2) 在page下创建创建一个·main文件用于显示地图demo

(3) 在index.js中输入

import React,{Component} from "react"
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
class Main extends Component{
    // 2.dom渲染成功后进行map对象的创建
    componentDidMount(){
        var map = new Map({
            view: new View({
              center: [0, 0],
              zoom: 1
            }),
            layers: [
              new TileLayer({
                source: new OSM()
              })
            ],
            target: 'map'
        });
    }
render(){
        // 1.创建地图容器
        return <div id="map" className="map"></div>
    }
}export default Main;