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:09code: 'BD:09',extent: [-7726.37, -11708041.66, 7726.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./onlinelabel/?qt=tile&x=${x}&y=${y}&z=${z}&styles=pl&udt=0426&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也是的问题，等后面慢慢研究了。
