React+Openlayers加载无偏差百度地图

tomcrools

获得百度地图图层

baidu.tsx
import { applyTransform } from "ol/extent";import TileLayer from "ol/layer/Tile";import { addCoordinateTransforms, addProjection, Projection } from "ol/proj";import { Tile, TileImage, XYZ } from "ol/source";import TileGrid from "ol/tilegrid/TileGrid";import proj4 from 'proj4/dist/proj4'import { register } from 'ol/proj/proj4';const baiduLayer = () => {  proj4.defs("EPSG:4008", "+proj=longlat +ellps=clrk66 +no_defs");  proj4.defs("BD-MC", "+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs");  register(proj4);  /*定义百度地图分辨率与瓦片网格*/  var resolutions = [];  for (var i = 0; i <= 18; i++) {    resolutions = Math.pow(2, 18 - i);  }  var tilegrid = new TileGrid({    origin: [0, 0],    resolutions: resolutions  });  var source = new TileImage({    projection: "BD-MC",    tileGrid: tilegrid,    tileUrlFunction: function (tileCoord: any, pixelRatio: any, proj: any) {      //  openlayers6的版本      let z = tileCoord[0];      let x = tileCoord[1];      let y = -tileCoord[2] - 1;      if (x < 0) x = "M" + (-x);      if (y < 0) y = "M" + (-y);      let num = Math.ceil(Math.random() * 3);      return (        "http://maponline" +        num +        ".bdimg.com//onlinelabel/?qt=vtile&x=" +        x +        "&y=" +        y +        "&z=" +        z +        "&styles=pl&udt=20200211&scaler=1&p=0"      );    }  });  var mapLayer = new TileLayer({    source: source  });  return mapLayer;}export default baiduLayer

在index页面放入图层

index.tsx
import React, { createRef, useEffect, useRef } from 'react';import { Map, View, Feature } from 'ol';import { Point } from 'ol/geom'; //点import { Icon, Style } from 'ol/style';import VectorLayer from 'ol/layer/Vector';import VectorSource from 'ol/source/Vector';import 'ol/ol.css';import styles from './index.less';import poiImg from '@/assets/images/house.png';import { transform } from 'ol/proj';import baiduLayer from './baidu'const Index: React.FC = () => {  // 地图  const map = useRef<any>();  // 地图容器  const mapDom = createRef<HTMLDivElement>();  useEffect(() => {    // 初始化地图    initMap()    // 加载标注测试偏移(北京国旗百度地图坐标)    createFeature([116.403931,39.91328], poiImg, 'iconFeature');  });  /** * 初始化地图 */  const initMap = () => {    //获得图层    let baiduLayers = baiduLayer();    map.current = new Map({      target: 'map',      layers: [        baiduLayers      ],      view: new View({        center: transform([116.403931,39.91328], 'EPSG:4326', "BD-MC"),        projection: "BD-MC",        zoom: 18,        maxZoom: 18,      }),    });  }  //创建标注  const createFeature = (featureData: any, featureImg: string, color: string) => {    // 创建标注    if (featureData.length > 0) {      let iconFeatures: any;      iconFeatures = new Array();      iconFeatures.push(new Feature({        geometry: new Point(transform(featureData, 'EPSG:4326', "BD-MC"))      }))      // 将标注属性添加到矢量数据源中      let iconSource = new VectorSource({        features: iconFeatures      })      //将标注矢量数据源添加到矢量层      let iconLayer = new VectorLayer({        source: iconSource,        zIndex: 3,        style: () => {          return new Style({            image: new Icon({              anchor: [0.5, 1],              scale: 0.12,              src: featureImg            })          })        }      })      // 将矢量层添加到地图      map.current.addLayer(iconLayer);    }  }  return (    <span>      <div id="map" className={styles.map} ref={mapDom} />    </span>  )}export default Index测试 (116.403931,39.91328)北京国旗 百度坐标

我的百度地图

百度坐标拾取系统