This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

What is the Openlayers

OpenLayers is a JavaScript package for developing WebGIS clients. The Map sources supported by OpenLayers include Google Maps, Yahoo, Map, Microsoft Virtual Earth, etc. Users can also use a simple picture Map as the background and overlay it with other layers in OpenLayers. OpenLayers offers a lot of choices in this regard. In addition, the OpenLayers implementation’s approach to accessing geospatial data complies with industry standards. OpenLayers supports network Service specifications such as Web Mapping Service (WMS) and Web Feature Service (WFS) developed by Open GIS Association. Load the map data published as OGC service into the OpenLayers client based on browser for display. OpenLayers was developed in an object-oriented manner and uses components from Prototype.js and Rico.

A simple demo

Draw the map onto the page

You’ll find a complete working example below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<div id="map" class="map"></div>
Copy the code
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
Copy the code
  var map = new ol.Map({
    target: 'map'.layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41.8.82]),
      zoom: 4})});Copy the code

With this code, you can load a simple example map.As shown above, to load out the map, you need three things

  1. ol.js
  2. Div container
  3. Js initialization code

1. Introduce JS files. This chapter adopts online JS

  <script src="https://cdn.polyfill.io/v2/polyfill.min.js? features=requestAnimationFrame,Element.prototype.classList"></script>
Copy the code

2. The div container of map controls the location and size of the map through the CSS

<div id="map" class="map"></div>
Copy the code
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
Copy the code

3. Initialize code

  var map = new ol.Map({
    target: 'map'.layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41.8.82]),
      zoom: 4})});Copy the code

Using this JavaScript code, a map object is created where the OSM layer is scaled. Let’s break it down:

The following line creates an OpenLayersMap object. In and of itself, this does nothing, because it has no additional layers or interactions.

  var map = new ol.Map({ ... });
Copy the code

To attach the map object to

, the map object takes atarget as an argument. The value is id

:

    target: 'map'
Copy the code

The layers: […] Array is used to define the list of layers available in the map. Now the first and only layer is tiled:

layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  })
]
Copy the code

Layers in OpenLayers are defined as the type of source that contains them (image, tile, or vector). Source is the protocol used to get map blocks.

The next part of the Map object is the View. This View allows you to specify the center, resolution, and rotation of the Map. The easiest way to define a view is to define the center point and the zoom level. Notice that the zoom level 0 has been reduced.

view: new ol.View({
      center: ol.proj.fromLonLat([37.41.8.82]),
      zoom: 4
    })
Copy the code

You’ll notice that Center specifies latitude and longitude coordinates (EPSG:4326). Since the only layer we used was the Spherical Mercator projection (EPSG:3857), we could reproject them in real time so that we could scale the map at the correct coordinates.