转换百度地图坐标核心代码

import TileGrid from "ol/tilegrid/TileGrid";
import {transformExtent} from 'ol/proj.js';

export const baiduLayer = () => {
  /*定义百度地图分辨率与瓦片网格*/
  var resolutions = [];
  for (var i = 0; i <= 18; i++) {
    resolutions[i] = Math.pow(2, 18 - i);
  }

  var tilegrid = new TileGrid({
    minZoom:3,
    extent: transformExtent([-180, -74, 180, 74], 'EPSG:4326', 'BD-09'),
    origin: [0, 0],
    resolutions: resolutions,
  });
 
  var source = new XYZ({
    projection: "BD-09",
    tileGrid: tilegrid,
    tileUrlFunction: function(tileCoord) {
      var URLS_LENGTH = 5
      var z = tileCoord[0]
      var x = tileCoord[1]
      var y = -tileCoord[2]-1
      var hash = (x << z) + y
      var index = hash % URLS_LENGTH
      index = index < 0 ? index + URLS_LENGTH : index
      if (x < 0) {
        x = 'M' + (-x)
      }
      if (y < 0) {
        y = 'M' + (-y)
      }
      return (
          "http://online" +
          index +
          ".map.bdimg.com//onlinelabel/?qt=vtile&x=" +
          x +
          "&y=" +
          y +
          "&z=" +
          z +
          "&styles=pl&udt=20200211&scaler=1&p=0"
        );
      // return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl'
      //   .replace('{}', index).replace('{x}', x).replace('{y}', y).replace('{z}', z)
    }
    
  });
  return source;
}

引入百度地图

最重要的坐标转换

proj4.defs('BD-09','+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs')
register(proj4);

import proj4 from 'proj4';
import {transform} from 'ol/proj.js';
import {register} from 'ol/proj/proj4.js';
import TileLayer from 'ol/layer/Tile.js';

 proj4.defs('BD-09','+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs')
  register(proj4);
const view = new View({
    projection: 'BD-09',
    center: transform(options.center,'EPSG:4326','BD-09'),
    zoom: 8,
    maxZoom: 20,
    minZoom: 3
  })
  const map = new Map({
    target: id,
    // layers: options.mapLayers,
    view: view,
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false
    })
    // interactions: defaultInteractions({ doubleClickZoom: !options.toolbarConfig.show })
  })
let source =  baiduLayer()
  let BaseTileLayer = new TileLayer({
      title: '百度地图',
      properties:‘属性’,
      source: source
    })
    map.addLayer(BaseTileLayer)

创建点位

 addPickerMark(point){
 
    this.coordinatePointFeature = new ol.Feature({
      geometry:new Point(transform(point, 'EPSG:4326', "BD-09"))
    })
    this.coordinatePointFeature.setStyle(
      this.setSelectStyle()
    )
    const vectorSource = new ol.VectorSource({
      features: [this.coordinatePointFeature]
    })

    this.pickerPointMark = new ol.VectorLayer({
      source: vectorSource,
      properties: this.options.layerProperties
    })
    this.map.addLayer(this.pickerPointMark)
  }

加载效果

百度地图经纬度113.542335,34.823305

1724315277535.png