react 之 openlayer文字标注

一、引入依赖的库文件

// 设置地图背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
// 数据源
import { Vector as VectorSource } from 'ol/source';
// 图层
import { Vector} from 'ol/layer';
// 要素
import Feature from 'ol/Feature';
// 
import {Point} from 'ol/geom';
// 坐标系转化
import {fromLonLat} from 'ol/proj';
// 样式
import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
// mark标注图片
import AddMarkerpng from '../../assets/Marker.png'

二、加载地图组件

  render() {
    return (
      <div  >
        {/* <img src={bg}></img> */}
        <button onClick={this.addMarker}>点击开始添加标注</button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }

三、地图的渲染和文字标注的添加

componentDidMount() {
    let {map} = this.refs.map
    //创建标注要素
    let markFeature = new Feature({
        // 几何信息
        geometry: new Point(fromLonLat([116.28, 39.54])),
        // 名称属性
        name: '标注点'
    })
    //设置图标的样式
    markFeature.setStyle(this.setMakerStyle(markFeature))
    // 创建标注的数据源
    var vectorSource = new VectorSource({
        features: [markFeature]
    });
    // 创建标注图层
    var vectorLayer = new Vector({
        source: vectorSource
    });
    // 将标注图层添加到地图上
    map.addLayer(vectorLayer);

    this.setState({
        vectorSource
    })

  }

四、全部代码

// 设置地图背景色
import React, { Component } from 'react';
import Map from '../../component/map/map';
// 数据源
import { Vector as VectorSource } from 'ol/source';
// 图层
import { Vector} from 'ol/layer';
// 要素
import Feature from 'ol/Feature';
// 
import {Point} from 'ol/geom';
// 坐标系转化
import {fromLonLat} from 'ol/proj';
// 样式
import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
// mark标注图片
import AddMarkerpng from '../../assets/Marker.png'
class AddMarkerLable extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
  componentDidMount() {
    let {map} = this.refs.map
    //创建标注要素
    let markFeature = new Feature({
        // 几何信息
        geometry: new Point(fromLonLat([116.28, 39.54])),
        // 名称属性
        name: '标注点'
    })
    //设置图标的样式
    markFeature.setStyle(this.setMakerStyle(markFeature))
    // 创建标注的数据源
    var vectorSource = new VectorSource({
        features: [markFeature]
    });
    // 创建标注图层
    var vectorLayer = new Vector({
        source: vectorSource
    });
    // 将标注图层添加到地图上
    map.addLayer(vectorLayer);

    this.setState({
        vectorSource
    })

  }

  addMarker = ()=>{
    let {map} = this.refs.map
    let that = this
   //鼠标单击事件
   map.on('singleclick', function (e) {
        console.log(e)
        // alert("鼠标被单击了"+e.coordinate);
        that.addMakerOn(e.coordinate)
    });
  }

  addMakerOn = (coordinate)=>{
    //创建标注要素
    let markFeature = new Feature({
        // 几何信息
        geometry: new Point(coordinate),
        // 名称属性
        name: '标注点'
    })
    //设置图标的样式
    markFeature.setStyle(this.setMakerStyle(markFeature))
    // 图标要素添加到数据源上
    this.state.vectorSource.addFeature(markFeature)
  }

  setMakerStyle=(feature)=>{
   return new Style({
        text: new Text({
            //位置
            textAlign: 'center',
            //基准线
            textBaseline: 'middle',
            //文字样式
            font: 'normal 14px 微软雅黑',
            //文本内容
            text: feature.get('name'),
            //文本填充样式（即文字颜色）
            fill: new Fill({ color: '#aa3300' }),
            stroke: new Stroke({ color: '#ffcc33', width: 2 })
        })
    })
  }
  
  render() {
    return (
      <div  >
        {/* <img src={bg}></img> */}
        <button onClick={this.addMarker}>点击开始添加标注</button>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }
}

export default AddMarkerLable;

五、效果题