openlayers5.x加载腾讯地图

概念解释EPSG:4326与EPSG:3857

EPSG:4326: 在国际上，每个坐标系统都会被分配一个 EPSG 代码，EPSG:4326 就是 WGS84 的代码
EPSG:3857: 伪墨卡托投影，也被称为球体墨卡托，Web Mercator。它是基于墨卡托投影的，把 WGS84坐标系投影到正方形。
两者联系：通常，数据存储在EPSG：4326中并显示在 EPSG：3857中。此外，映射API可以将lat，long（即EPSG：4326）作为输入，但是当这些坐标显示在地图上时，它们将显示为地图基于Web墨卡托（即EPSG：3857）投影
我的理解：web地图瓦片加载都是以自己特定投影为基础；点位展示，地图有自己的地理坐标，内部转化为投影坐标，如百度的输入BD-09坐标，内部转化为投影坐标并显示在地图上
lyzidiamond.com/posts/4326-…

腾讯地图

投影坐标系：墨卡托坐标系
地理坐标系：火星坐标系，CJ-02

openlayers配置

1.projection作用是什么

定义投影坐标系

零散记录

初始化地图使用的坐标系和定义图层的坐标系并不是一回事，初始化地图只是声明地图的加载方式采用什么方式，以及加载上地图上的要素采用什么坐标系显示

上代码

千辛万苦研究出加载腾讯地图，以下代码主要记录关键部分，坐标转换的方法 juejin.cn/post/684490… 这篇文章中有

import { Map, View, Feature} from 'ol'
import { Tile, Vector as VectorLayer } from 'ol/layer'
import { fromLonLat, transform, get as Get } from 'ol/proj'
import { XYZ, Vector as VectorSource } from 'ol/source'
import {Point} from 'ol/geom'
import {Stroke, Style, RegularShape} from 'ol/style';
const centerLatLng = [116.391266, 39.907359] //北京天安门wgs84经纬度
const projectionString = 'EPSG:3857'
 // 自定义分辨率
 const resolutions = []

 // 计算使用的分辨率
 for (let i = 0; i < 19; i++) {
     resolutions[i] = 2 ** (18 - i)
 } 
addMap1 = () => {
        const mapLayer = new Tile({
            source: new XYZ({
                tileSize: 256,
                tileUrlFunction(xyz){
                    const z = xyz[0]
                    const x = xyz[1]
                    const y = xyz[2]
                    const newY = parseInt(String(2 ** z), 10) + y  // 此处极其重要
                    return `https://rt1.map.gtimg.com/realtimerender?z=${z}&x=${x}&y=${newY}&key=去腾讯自己申请个key`
                },
                wrapX: false,
            })
            
        })
        this.map = new Map({
            target: 'customTileMap',
            layers: [
                mapLayer
            ],
            view: new View({
                resolutions,  // 分辨率
                projection: this.projectionString,
                center: fromLonLat(centerLatLng),  
                zoom: 10,
                minZoom: 4,
            }),
        })
        this.addPoint()
    }
    addPoint = () => {
        const rome = new Feature({
            geometry: new Point(fromLonLat(coordTransform.wgs84ToGcj02(this.centerLatLng[0], this.centerLatLng[1])))
            <!--使用wgs84ToGcj02转换坐标，位置正确-->
        })
        rome.setStyle(new Style({
            image: new RegularShape({
                points: 5,    // 顶点数
                radius: 3,    // 图形大小，单位为像素
                stroke: new Stroke({ // 设置边的样式
                    color: 'lime',
                    size: 5,
                    width: 5
                })
              })
        }))
        var vectorSource = new VectorSource({
            features: [rome],
            wrapX: false
          });
          
          var vectorLayer = new VectorLayer({
            source: vectorSource
          });
          this.map.addLayer(vectorLayer)
    }
    render() {
        return <div id="customTileMap" style={{ width: '100%', height: '100%' }} />
    }