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 markImage 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 markImage from '../../assets/Marker.png';
class AddMarker 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({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchor: [0.5, 40],
        anchorOrigin: 'top-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-right',
        // offset:[0,10],
        //图标缩放比例
        scale: 0.6,
        //透明度
        opacity: 0.75,
        //图标的url
        src: markImage,
      }),
      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 AddMarker;

五、效果图