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股份有限公司'
          })
        })
      ],
      view: new View({
     
        center: fromLonLat([108.316492, 22.818136]),
        zoom: 12,
        maxZoom: 20,
        minZoom: 6,
        projection: 'EPSG:3857'
      })
    });
    this.map.on('singleclick', (event) => {
     
      console.log(event.coordinate);
      that.coordinate = transform(event.coordinate, 'EPSG:3857', 'EPSG:4326');
      that.getCoordinate.emit(that.coordinate);
    });
  }

openlayers中加载百度地图作为底图

要知道OSM地图源可不是国内的东西，在一些情况下是没法用的，而且由于不是国内的，加载慢，同时瓦片图经常有一两块加载不出来，所以使用国内地图商的底图是有必要的，其中的百度地图是比较特殊的。这里直接贴代码了，有些注释是从其他博文看到拿过来的，当时没有收藏，没法注明了，注释里解释了openlayers3和openlayers6加载百度地图的不同，也处理了偏移的问题，处理的方法是安装projzh这个包，是用来处理百度地图坐标偏移的问题。

<div id="baiduMap2" class="map-container">div>

ngAfterViewInit(): void {
     
        /**
         *  定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。
         *  网上很多相关资料在用OpenLayers加载百度地图离线瓦片时都认为投影就是EPSG:3857(也就是Web墨卡托投影)。
         *  事实上这是错误的，因此无法做到无偏移加载。
         *  百度地图有自己独特的投影体系，必须在OpenLayers中自定义百度投影，才能实现无偏移加载。
         *  百度投影实现的核心文件为bd09.js，在迈高图官网可以找到查看这个文件。
         */
        const projBD09 = new Projection({
     
            // baidu或者BD:09
            code: 'BD:09',
            extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
            units: 'm',
            axisOrientation: 'neu',
            global: false
        });
        addProjection(projBD09);
        addCoordinateTransforms('EPSG:4326', projBD09, projzh.ll2bmerc, projzh.bmerc2ll);
        addCoordinateTransforms('EPSG:3857', projBD09, projzh.smerc2bmerc, projzh.bmerc2smerc);

        // 自定义分辨率和瓦片坐标系
        const rlProject = [];

        // 计算百度使用的分辨率
        for (let i = 0; i <= 18; i++) {
     
            rlProject[i] = Math.pow(2, 18 - i);
        }
        const tilegrid = new TileGrid({
     
            origin: [0, 0],    // 设置原点坐标
            resolutions: rlProject // 设置分辨率
        });

        /**
         * 加载百度地图离线瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图（注意：是谷歌地图）而设计，
         * 而百度地图与谷歌地图使用了不同的投影、分辨率和瓦片网格。
         * 因此这里使用ol.source.TileImage来自行指定投影、分辨率、瓦片网格。
         */
        const baiduSource = new TileImage({
     
            projection: 'BD:09',
            tileGrid: tilegrid,
            tilePixelRatio: 2,
            tileUrlFunction: (tileCoord, pixelRatio, proj) => {
     
                if (!tileCoord) {
     
                    return;
                }
                const z = tileCoord[0];
                let x: number | string = tileCoord[1];
                // 注意，在openlayer3中由于载地图的方式是右上递增
                // let y: number | string = tileCoord[2];
                // 而openlayer6中是右下递增，所以y的值需要注意
                // 6版本需要取负值,同时注意要减一，否则缩放有问题
                let y: number | string = -tileCoord[2] - 1;

                // 百度瓦片服务url将负数使用M前缀来标识
                if (x < 0) {
     
                    x = 'M' + (-x);
                }
                if (y < 0) {
     
                    y = 'M' + (-y);
                }
                // online3的3是用来分流的，还可以是其他路径
                // udt应该表示的是地图发布日期。p表示地图上的信息，scaler表示缩放
                // 0表示不显示地名等标注信息，只单纯的地图地图，1表示显示地名信息
                return `http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=${
       x}&y=${
       y}&z=${
       z}&styles=pl&udt=20190426&scaler=2&p=1`;
            }
        });

        // 创建地图
        this.map = new Map({
     
            layers: [
                // 百度地图层
                new TileLayer({
     
                    source: baiduSource,
                })
            ],
            view: new View({
     
                center: transform([108.316492, 22.818136], 'EPSG:4326', 'BD:09'),
                projection: 'BD:09',
                zoom: 12,
                maxZoom: 20,
                minZoom: 3,
                constrainResolution: true
            }),
            target: 'baiduMap2'
        });
    }

这里只是介绍了怎么加载百度地图作为底图，但是是没法使用百度地图api的，要使用百度地图api需要注册获取编码，商用是要收费的，另外加载了百度地图之后怎么使用openlayers的api也是的问题，等后面慢慢研究了。