在react中使用OpenLayers (一)

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

一、前言

最近由于项目需要，需要在react项目中使用地图功能，所以决定使用openlayers进行开发，由于网上对于在react function components中使用OpenLayers 的文章并不多，所以来分享一下使用的方法。

二、实现步骤

项目是基于react开发，首先使用react脚手架搭建一个

npx create-react-app my-app

1、引入openlayers

在项目中安装openlayers

npm install ol
yarn add ol

创建函数组件容器

import React, { useState, useRef } from 'react';
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'

function MapWrapper(props) {
    // openlayers将会渲染进这个div
    const mapElement = useRef()
    return (
        <div ref={mapElement} className="map-container"/>
    )
}

export default MapWrapper

2、初始化地图

import React, { useState, useRef,useEffect } from 'react';
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import OSM from 'ol/source/OSM';
import { transform } from "ol/proj";
import './map.css'
function MapWrapper(props) {
    let centerPos = transform([117.29, 31.85], 'EPSG:4326', 'EPSG:3857');
    // openlayers将会渲染进这个div
    const mapElement = useRef()
    let map = null; //地图全局变量
    useEffect(()=>{
        map = new Map({
            view: new View({
                center: centerPos,//地图中心位置
                zoom: 10,//地图初始层级
                maxZoom: 15,
                minZoom: 9
            }),
            layers: [],
            target: mapElement.current
        });
        let tileLayer = new TileLayer({
            source: new OSM()
        });
        map.addLayer(tileLayer)
    },[])
    return (
        <div ref={mapElement} className="map-container"/>
    )
}

export default MapWrapper

.map-container {
    width: 100vw;
    height: 100vh;
}

3、添加标记点

地图中最常见的功能是绘制标记点，使用addLayer即可

import { Style, Fill, Stroke, Circle as sCircle } from 'ol/style';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'

const setMarker = () => {
        const _style = new Style({
            image: new sCircle({
                radius: 10,
                stroke: new Stroke({
                    color: '#fff',
                }),
                fill: new Fill({
                    color: '#3399CC',
                }),
            }),
        });
        const _feature = new Feature({
            geometry: new Point(olProj.fromLonLat([117.28, 31.86])),
        });
        _feature.setStyle(_style);
        const _marker = new VectorLayer({
            source: new VectorSource({
                features: [_feature],
            }),
        });
        map.addLayer(_marker);
    };

成功的在地图上添加了一个点位