Openlayers5. x loaded Tencent map

EPSG:4326 and EPSG:3857

• EPSG:4326: Internationally, each coordinate system is assigned an EPSG code. EPSG:4326 is the code of WGS84
• EPSG:3857: Pseudo Mercator projection, also known as sphere Mercator, Web Mercator. It is based on the Mercator projection, projecting the WGS84 coordinate system onto the square.
• Generally, data is stored in EPSG: 4326 and displayed in EPSG: 3857. In addition, the mapping API can take LAT, LONG (i.e. EPSG: 4326) as input, but when these coordinates are displayed on a map, they will be displayed as a Map based Web Mercator (i.e. EPSG: 3857) projection
• Web map tiles are loaded on the basis of their own specific projection; In point display, the map has its own geographical coordinates, which are internally converted into projection coordinates, such as bD-09 coordinates input by Baidu, which are internally converted into projection coordinates and displayed on the map
• Lyzidiamond.com/posts/4326-…

Tencent map

• Projection coordinate system: Mercator coordinate system
• Geographic coordinate system: Mars coordinate system, CJ-02

Openlayers configuration

1. What is projection

• Define projection coordinate system

Scattered records

The coordinate system used to initialize the map is not the same as the coordinate system used to define the layer. Initializing the map is just a declaration of how the map should be loaded, and what coordinate system should be used to display the elements on the loaded map

In the code

Through painstaking research to load Tencent map, the following code mainly record the key part of the coordinate conversion method juejin.cn/post/684490… It’s in this article

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] // Const projectionString ='EPSG:3857'// Const resolutions = [] // The resolution to usefor (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), // This is extremely importantreturn `https://rt1.map.gtimg.com/realtimerender?z=${z}&x=${x}&y=${newY}&key= go to Tencent to apply for a key '}, wrapX:false,
            })
            
        })
        this.map = new Map({
            target: 'customTileMap', layers: [mapLayer], view: new View({resolutions, // resolution projection: this. Projection String, 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]))) <! Rome.setstyle (new Style({image: new RegularShape({points: 5, // number of vertices radius: 3, // Graphics size, in pixels Stroke: new stroke ({// set edge style 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%'/ >}}}Copy the code