在react中使用OpenLayers (三)

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

一、前言

最近由于项目需要，需要在react项目中使用地图功能，所以决定使用openlayers进行开发，由于网上对于在react function components中使用OpenLayers 的文章并不多，网上大部分的文章都是用class组件写的，在函数组件中使用openlayers的一些写法有很多不同，这里介绍点击事件的写法并且给地图添加标记点。

二、实现步骤

1、加入点击事件

• 编写点击事件函数

const singleclick = () => {
    // 点击
    map.on('singleclick', (e) => {
        console.log(e)
    });
};

• 在useEffect中加入点击事件

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()
            source: new XYZ({
                tileUrlFunction: function (coordinate) {
                    console.log(coordinate)
                    const x = 'C' + zeroFill(coordinate[1], 8, 16);
                    const y = 'R' + zeroFill(coordinate[2], 8, 16);
                    const z = 'L' + zeroFill(coordinate[0], 2, 10);
                    return `http://localhost:8080/hefei/${z}/${y}/${x}.png`;//这里可以修改地图路径
                },
            })
        });
        map.addLayer(tileLayer)

        singleclick();//这里是点击事件
    },[])

• 获取相应的坐标 ，这里可以得到相应坐标点的坐标

2、在点击的坐标点添加相应的图标

• 给相应的点击点添加addLayer,将坐标传入相应的setMarker函数即可在地图上添加相应点位

  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'
  import { Style, Fill, Stroke, Circle as sCircle } from 'ol/style';
  import { Feature } from 'ol';
  import { Point } from 'ol/geom';
  import * as olProj from 'ol/proj';
  function MapWrapper(props) {
      let centerPos = transform([117.29, 31.85], 'EPSG:4326', 'EPSG:3857');
      // openlayers将会渲染进这个div
      const mapElement = useRef()
      let map = null; //地图全局变量
      function zeroFill(num, len, radix) {
          var str = num.toString(radix || 10);
          while (str.length < len) {
              str = "0" + str;
          }
          return str;
      }
      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()
              source: new XYZ({
                  tileUrlFunction: function (coordinate) {
                      console.log(coordinate)
                      const x = 'C' + zeroFill(coordinate[1], 8, 16);
                      const y = 'R' + zeroFill(coordinate[2], 8, 16);
                      const z = 'L' + zeroFill(coordinate[0], 2, 10);
                      return `http://localhost:8080/hefei/${z}/${y}/${x}.png`;//这里可以修改地图路径
                  },
              })
          });
          map.addLayer(tileLayer)
          // setMarker()
          singleclick();
      },[])
  
      const singleclick = () => {
          // 点击
          map.on('singleclick', (e) => {
              console.log(e)
              setMarker(e.coordinate[0],e.coordinate[1])
          });
      };
      // let tempMarker = null;
      const setMarker = (longitude,latitude) => {
          console.log(longitude,latitude)
          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([longitude,latitude]),
          });
          _feature.setStyle(_style);
          const _marker = new VectorLayer({
              source: new VectorSource({
                  features: [_feature],
              }),
          });
          map.addLayer(_marker);
      };
  
      return (
          <div ref={mapElement} className="map-container"/>
      )
  }
  
  export default MapWrapper
  

  • 这样即可在点击的相应点位添加相应的图标