angular使用openlayers6以及加载百度地图

angular中使用openlayers本来是没什么难度的，但是如果要加载百度地图还是有些问题的，在openlayers3中坐标是从原点右上递增，而openlayers6中是右下递增，这就导致使用百度地图作为底图时出现图层错乱的问题，同时还有偏移问题，相关的问题和解答网上的资料真的少，对于不是gis专业出身的人来说真的能搞死人，此外还有openlayers那文档，不是英文的原因，是真的难以看懂。
首先是安装，要注意的还是版本问题，openlayers6和之前版本的安装命令不一样。
两种不同的安装命令意味着有不同，事实确实是这样，有些包的路径已经改变或者某些方法或属性被删除了，使用的时候都是需要注意的。另外说的是ts的支持，GitHub的readme中有介绍对ts的支持，但是真的不怎么样，也提到第三方的类型支持@types/ol，看名字就知道了，是5之后的支持，也不是很完美，有些api还是没有智能提示。

// 这是4.6.5及前的安装命令
npm install openlayers

// 这是5.3.0及之后的安装命令
npm install ol

安装完之后引入css，在angular.json或其他地方引入。

接下来就是使用问题了，直接贴出基本使用代码，注意最好是在ngAfterViewInit中写，就不解释了

简单使用openlayer

<div id="map" class="map-container"></div>
<div class="map-container">经度：{
  {coordinate[0]}}纬度：{
  {coordinate[1]}}</div>

ngAfterViewInit(): void {
   
    const that = this;
    this.map = new Map({
   
      target: 'map',
      controls: defaults().extend([
        // 鼠标移入显示坐标
        new MousePosition({
    projection: 'EPSG:4326' })
      ]),
      layers: [
        new TileLayer({
   
          source: new OSM({
   
            attributions: 'xxxx股份