1, What are openlayers and what are the similar libraries

Official website OpenLayers - Welcome

openlayers is a library that displays and interacts with maps and geospatial data. In short, it is to draw a map, draw graphics, copy, or calculate relevant data on the map.

Similar libraries: Baidu map, Gaode map, cesium; openlayers, Baidu and Gaode are 2D maps; Cesium is 3D

2, Understanding of several basic variables

First, let's introduce it with an example, if I want to realize punctuation on the map now. The code is roughly as follows:

// <div id="map" style="width: 100%, height: 400px"></div>
import 'ol/ol.css';
import { Map, View, Feature, Overlay } from 'ol';
import { Circle as CircleStyle, Fill, Stroke, Style, Icon, Text } from 'ol/style';
import { LineString, Polygon, Point } from 'ol/geom';
import * as sources from 'ol/source.js';
import { OSM, XYZ, TileArcGISRest, Vector as VectorSource, WMTS } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';

let pointPos = [121, 29] //Longitude and latitude coordinates
let map = new Map({
    target: 'map',
    layers: new TileLayer({
		source: new sources.BingMaps({
			key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
			culture: 'zh-cn'
		})
	})
}); //Create a new map and put everything on the map in the map

let point = new Feature({
	geometry: new Point(pointPos)
});//Construction point
let pointLayer = new VectorLayer({
	source: new VectorSource({//Set layer
		features: [point]
	}),
	style: new Style({//Style features
		image: new CircleStyle({//Style of specific set point
			radius: 4,
			fill: new Fill({
				color: 'black'
			})
		})
	})
});
map.addLayer(pointLayer);

It can be seen that there are many steps to mark a point simply. First, take a dom object to create a new map and set the tile layer (used to display the basic map); second, set a vector layer (used to draw graphics); then, create a new Feature (graphics to be drawn) on the vector layer and set the style; finally, add the vector layer to the map.

Next, I will use my own understanding to explain the meaning and function of these keywords one by one (refer to the official documents for specific variables, key values and fields) OpenLayers v6.9.0 API - Index)

1,map

Take id as the key field, take a dom element as the container of map, and pay attention to the width and height.

2. TileLayer (tile layer)

A map can have many layers. However, there is usually at least one basic tile layer to display the basic map. You can choose different types of tile layers to meet different needs.

3. VectorLayer

This layer can be added freely. It is generally used to display the drawn graphics. After setting various graphics, it can be added through addLayer and deleted by removeLayer. In addition, you can modify the style as long as you operate the layer later, and it will not affect other layers.

4,Feature

It is an attribute in a vector layer, which is used to display a figure in a layer. The attribute can be setStyle separately. Moreover, you can operate the feature of a layer separately [add through drawLayer.getSource().addFeature(feature), where drawLayer is the layer name and feature is the attribute name].

A function of feature: there is a scene with multiple vector layers. Layer 1 draws points, lines and surfaces, layer 2 draws irregular graphics, and layer 3 displays orthophoto. Therefore, different layers are operated through the feature attribute instead of adding layer every time, resulting in layer confusion.

3, Draw points, lines and surfaces according to longitude and latitude

How to draw points, lines and surfaces through coordinates in OpenLayers - SuperMap technology Q & a community

Add the obtained longitude and latitude to the map step by step through the basic steps. For details, refer to the above website

// Construction point
var pointsList = [
	[2823.940, -4690.000],
	[3448.940, -4690.301],
	[3816.561, -3810.125],
	[3917.383, -3609.158],
	[3976.983, -3490.291],
	[4020.004, -4377.027],
	[4076.265, -4382.939],
	[4215.049, -4382.333],
	[4428.156, -4382.285]
];
// Add all discrete gps signal points to the map
for (i = 0; i < pointsList.length; i++) {
	var point = new ol.Feature({
		geometry: new ol.geom.Point(pointsList[i])
	});//Construction point
	var pointLayer = new ol.layer.Vector({
		source: new ol.source.Vector({
			features: [point]
		}),
		style: new ol.style.Style({
			image: new ol.style.Circle({
				radius: 4,
				fill: new ol.style.Fill({
					color: 'black'
				})
			})
		})
	});
	map.addLayer(pointLayer);
}

// Construction line
// Add lines generated from discrete gps signal points to the map
var roadLine = new ol.geom.LineString(pointsList);
var roadLineSource = new ol.source.Vector({
	features: [new ol.Feature(roadLine)]
});
var roadLineLayer = new ol.layer.Vector({
	source: roadLineSource,
	style: new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: 'red',
			width: 3
		})
	})
});
map.addLayer(roadLineLayer);

// Tectonic plane
var polygon = new ol.geom.Polygon([[[0, 0], [-10, 30], [-30, 0], [0, 0]]]);
var polygonSource = new ol.source.Vector({
	features: [new ol.Feature(polygon)],
	wrapX: false
});
vectorLayer = new ol.layer.Vector({
	source: polygonSource,
	style: new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: 'red',
			width: 3
		}),
		fill: new ol.style.Fill({
			color: 'rgba(0, 0, 255, 0.1)'
		})
	})
});
map.addLayer(vectorLayer);

4, Manually draw points, lines, and faces on the map

Simple version Draw and Modify Features

Add details Measure

What's wrong? Please give me your advice

To be continued (continue to update when available)