Use OpenLayers to present geographic information in a web page

1. Introduction

There are several basic concepts involved: View, Layer, Control, Interaction, Overlay, Source, and Projection together make up the Map

1.1 the View

View manages Map View parameters, such as zoom, rotation, resolution, View center, etc. You can also set the range of these parameters to control the View display

1.2 Layer

Layer is the basic unit of Map display. The Layer obtains data from its own Source and displays it on the Map. A Map can contain multiple layers, and the data of these layers can be displayed on the Map at the same time, so as to achieve a display of various geographical information

The upper Layer will mask the lower Layer

  • Source

    Specify the data source for layer

1.3 the Control

Openlayers itself contains some built-in Map controls, such as full-screen, positioning and rotating buttons. Through the controls, Map interaction can be realized, and controls with required functions can also be customized to achieve the interaction effect required by business

1.4 Interaction

Openlayers contains common interaction behaviors such as drag and drop and click by default. If you want to customize complex interactions, you can customize them and register them in the Map

1.5 Overlay

The high component can bind the DOM node to the map coordinate system position and display the DOM at the bound geographic coordinates. The DOM will be displayed under the control of OpenLayer

Practice 2.

Implement a simple Map

Var imageLayer = new ol.layer.Image({source: new ol.source.ImageWMS({params: {LAYERS: '_all_', // layer name FORMAT: 'image/ PNG ', // image FORMAT: '1.1.1' // service VERSION}, projection: 'EPSG3857', // projection frame URL: URL // WMS address}); }); Var vectorLayer = new ol.source.vector ({format: new ol.format.geojson (), style: StyleInstance // Set the display style of vector data}); Var View = new ol.View({center: [75, 30], // Center: [75, 30], // zoom level}); Var map = new ol. map ({target: 'map_container', // Attach the map to the dom with the id of map_container. View: view, layers: ImageLayer, vectorLayer]});Copy the code