react集成openlayer并使用百度地图

安装依赖

yarn add ol

百度组件

import React from "react";
import "ol/ol.css";
import Feature from "ol/Feature";
import Map from "ol/Map";
import View from "ol/View";
import Point from "ol/geom/Point";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Cluster, Vector as VectorSource } from "ol/source";
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style";

import { TileImage } from "ol/source";
import TileGrid from "ol/tilegrid/TileGrid";

export default class MyBdMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = { opacity: 1.0 };
  }

  componentDidMount() {
    this.makeMap();
  }

  makeMap = () => {
    var distance = document.getElementById("distance");

    var count = 20;
    var features = new Array(count);
    var e = 4500000;
    for (var i = 0; i < count; ++i) {
      var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];

      console.log(coordinates);
      features[i] = new Feature({
        geometry: new Point(coordinates),
      });
    }

    var source = new VectorSource({
      features: features,
    });

    var clusterSource = new Cluster({
      distance: parseInt(distance.value, 10),
      source: source,
    });

    var styleCache = {};
    var clusters = new VectorLayer({
      source: clusterSource,
      style: function (feature) {
        debugger;
        var size = feature.get("features").length;
        var style = styleCache[size];
        if (!style) {
          style = new Style({
            image: new CircleStyle({
              radius: 20,
              stroke: new Stroke({
                color: "#fff",
              }),
              fill: new Fill({
                color: "#AA99CC",
              }),
            }),
            text: new Text({
              text: size.toString(),
              fill: new Fill({
                color: "#fff",
              }),
            }),
          });
          styleCache[size] = style;
        }
        return style;
      },
    });

    let resolutions = [];
    let baiduX, baiduY;

    for (let i = 0; i < 19; i++) {
      resolutions[i] = Math.pow(2, 18 - i);
    }
    let tilegrid = new TileGrid({
      origin: [0, 0],
      resolutions: resolutions,
    });

    let baidu_source = new TileImage({
      projection: "EPSG:3857",
      tileGrid: tilegrid,
      tileUrlFunction: function (tileCoord) {
        if (!tileCoord) return "";
        let z = tileCoord[0];
        let x = tileCoord[1];
        let y = tileCoord[2];
        // 对编号xy处理
        baiduX = x < 0 ? x : "M" + -x;
        baiduY = -y;
        return (
          "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
          baiduX +
          "&y=" +
          baiduY +
          "&z=" +
          z +
          "&styles=pl&udt=20151021&scaler=1&p=1"
        );
      },
    });

    var raster = new TileLayer({
      source: baidu_source,
    });

    var map = new Map({
      layers: [raster, clusters],
      target: "map",
      view: new View({
        projection: "EPSG:3857",
        center: [13531290.967373039, 4675318.865056401],
        zoom: 3,
      }),
    });

    distance.addEventListener("input", function () {
      clusterSource.setDistance(parseInt(distance.value, 10));
    });

    map.on("select", function (e) {
      var features = e.target.getFeatures().getArray();
      if (features.length > 0) {
        var data = features[0].values_.data;
        if (data.callback) {
          data.callback(e, data.callbackParams);
        }
      }
    });

    map.on("click", function (evt) {
      var pixel = map.getEventPixel(evt.originalEvent);
      console.log("点击的图像位置为：" + pixel);
      var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
        return feature;
      });
      if (feature) {
        debugger;
        var coordinates = feature.getGeometry().getCoordinates();
        console.log("点击的坐标位置为：" + coordinates);
      }
    });
  };

  render() {
    return (
      

        

          cluster distance
          
        
        

        
      
    );
  }
}

实现效果