1. Introduction

The Vue page introduces fromLonLat and transform and toLonLat classes.

import { fromLonLat,transform,toLonLat} from "ol/proj";
Copy the code

When you create a map in OpenLayers, there will be a View property with a Center property underneath it. This property is the coordinate that sets the center position. If you don’t have a center, it’s meaningless. The projection attribute specifies the type of the coordinate system. Generally 4326 and 3857, we will explain the difference between these two in detail below. Let you thoroughly understand and use.

new View({
    projection:'EPSG:3857'.// Coordinate system type
    center: fromLonLat([104.912777.34.730746]), // Map center coordinates
});
Copy the code

More access: openlayers.org/en/latest/a…

2. What is EPSG:3857 coordinate system (projected coordinates)

The default coordinate in OpenLayers is The Mocato coordinate of Google, which is EPSG:3857 coordinate system that we often see. The EPSG:3857 data generally looks like this. [12914838.35,4814529.9] appears to be relatively large. Bad for storage, more memory.

3. What is EPSG:4326 coordinate system (geographic coordinates)

4326 WGS-84: is an international standard, GPS coordinates (used by Google Earth, or GPS module) EPSG:4326 data is generally this way. [114.05, 22.37]. Easy to store, high readability

So the coordinate system data that we often see and use are not Mercator coordinates, but EPSG:4326 coordinate system data. Because easy to read and small storage. For example, the following third-party Alidatav border data source. Is to use EPSG:4326 geographic coordinates to return. As follows:

4. Differences between EPSG:4326 and EPSG:3857 (key points)

We can start by looking at the same size circle on the sphere of the Earth on the left, and the Mercator projection on the upper right, which is still a circle, but greatly magnified at high latitudes. On the lower right is an isometric projection, where the size of the object does not change significantly, but the image is stretched out. Platte Carre projection is not suitable for navigation and other activities because of its distortion in projection. However, because the correspondence between coordinates and pixels is very simple, it is very suitable for the display of raster graphs. Platte Carre projection is the default projection of many GIS software.

It should be noted that for Mercator projections, the greater the size distortion, the greater the latitude, the greater the size distortion will be at the poles, so the Mercator projection will not show the polar regions. The image below, from Wikipedia, shows the difference in size between the Mercator projection and the actual size of each country. However, the two characteristics of conformality and straight Rhumb lines make it very suitable for sea navigation.

Combined with the above figures, we summarize the biggest differences: EPSG:3857 (projection) : poor readability of data and memory footprint compared to large numeric storage. EPSG:4326 (Geography) : The use of this coordinate system results in page distortion.

Combined with the content mentioned above, we continue to analyze through practice and look down. \

4.1 First take a look at the data rendered with EPSG:4326 coordinate type

Because the projection type is “EPSG:4326”, you can see that the data in the Center is also in numerical format. Therefore, the image information obtained by the fromLonLat() method is not used.

let view = new View({
    projection: "EPSG:4326".// Use this coordinate system
    center: [104.912777.34.730746].// Map center coordinates
    zoom: 4.5 // Zoom level
});
Copy the code

And we found that it was. It seemed to be compressed. So that proves what we said above.

4.2 We continue to look at the data rendered with EPSG:3857 coordinate type

The default is Goole’s Mocato EPSG:3857 coordinate system, so we don’t have to write it. However, the center data values we are using are EPSG:4326 (common data source), so we need to use the fromLonLat() method to convert EPSG:4326 data to EPSG:3857 data

let view = new View({
    // projection: "EPSG:3857", // use this coordinate system. The default is 3857
    center: fromLonLat([104.912777.34.730746]), // Change the data format from 4326 to 3857
    zoom: 4.5 // Zoom level
});
Copy the code

Comparing the map rendered in the two coordinate systems above, it is obvious that EPSG:4326 feels like the map has been compressed up and down. The EPSG:3857 coordinate system is normal. This is due to their different projections.

So to summarize: in the actual development, since most of the map source data is EPSG:4326 data source format, but using EPSG:4326 coordinate system map will appear to be compressed. Therefore, we all use the coordinate system type EPSG:3857, and just convert the data source to EPSG:3857. But this EPSG:3857 data source is not easy to read and values occupy memory reasons, all combined with the shortcomings of both, we use coordinate conversion, namely EPSG:4326 to EPSG:3857. Usually: Data is stored in EPSG:4326, as shown in EPSG:3857:

let view = new View({
    projection: "EPSG:4326".// Use this coordinate system
    center: transform([104.912777.34.730746].'EPSG:4326'.'EPSG:3857'), // Map center coordinates
    zoom: 4.5 // Zoom level
});

Copy the code