Brief introduction

In the development of map projects, it is sometimes necessary to develop projects independent of any company. The front-end map display and layer control need an open source framework to develop.

What is OpenLayers?

OpenLayers v6.6.1 is used here.

• OpenLayers is an open source JavaScript class library, mainly used to develop Web GIS clients. To fully develop a map project, you also need to provide back end services for map tiles, such as using geoserver.
• It can easily place dynamic maps on any web page, and support mobile devices.
• It can display map blocks, vector data, and tags loaded from any source.
• It is easy to customize and extend, and can set the style of map control through simple CSS. Use third-party libraries to customize and extend functionality.

Basic concept

A new framework, a detailed understanding of the basic concepts, will help us to develop quickly.

Map

The core component of OpenLayers is map (ol/Map), and Map is the map. It is rendered into the target container (for example, a div element). You can configure all mapping attributes during construction, or use setTarget () to set them. Layer and View are defined under ol/Map.

View

Because the map is not responsible for the center, zoom level and projection of the map. So these functions are implemented by View. It is defined in ol/View.

View has a projection. The projection determines the coordinate system of the center and the unit of map resolution calculation. Mercator projection EPSG: 3857 is used by default.

Source

Source is the source of layer data. The data format can be OGC sources such as XYZ, WMS or WMTS, and vector data in GeoJSON or KML formats. It is defined under ol/source.

Layer

Layer represents a layer. In the development of the project, our operation is to draw on each layer. Then OpenLayers plots the layers layer by layer according to the level.

It is defined under ol/layer and has four basic types of layers.

• Ol/layer/Tile-Rendering provides a source of tiled images in meshes organized at a scale level of a specific resolution. Grid layer.
• Ol/layer/Image-Rendering provides the source of the map image at any range and resolution. Grid layer.
• Ol/layer/Vector-Renders vector data on the client side. Vector layer.
• Ol/layer/VectorTile-Renders the data provided as a vector slice. Vector layer.

Control

Control represents a control and uses buttons to control the map.

Under ol/control, some built-in controls are defined. Such as full screen, rotation, zoom, mini-map and so on. We also need to customize the control when the built-in control does not meet the requirements.

Interaction

interaction interactive events, add map and user interactive events.

Getting Started

Introduction of OpenLayers

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>

Setting element

<style>
.map {
Height: 500px
Width: 100%
}
</style>

<div id="map" class="map"></div>

Create a map

Var map = new ol.Map ({
Target: 'map'
Layers: [
New ol.layer.Tile ({
// use height tile diagram
Source: new ol.source.XYZ ({
Url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
})
]
View: new ol.View ({

Zoom: 4
})
})

• Through new ol Map({ ... }); load the map object and bind the element node through the target parameter.
• The layers parameter defines the list of layers available in the map. The following layer overrides the previous layer.
• Specify the center, resolution, and rotation of the map through the View parameter.

OpenLayers development can be simply understood as treating the entire map as a container Map. Add the layer generated according to Layer rules to the map. On this basis, use View, Control and Interaction to control the map.