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

Install the OL dependency package

This tutorial will install VERSION 6.9.0 of OL.

npm install ol
Copy the code

Configuration in components

A div is created in the layout to act as a container for storing the map, and the binding is initialized by id.

Start by introducing the classes needed to initialize the map.

  import 'ol/ol.css';
  import Map from 'ol/Map'; // Map initialization
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/layer/Tile';
  import View from 'ol/View';
Copy the code

Ol.css files are usually style configurations for things like zoom buttons and hawk-eye scales, which I won’t cover here.

Map is the core component of OpenLayers. In fact, it is a portal to initialize the map, after the initialization of the object to mount many instances and methods.

TileLayer is one of the layers of OpenLayers, the TileLayer, which is usually suitable for loading map base map service, corresponding to the corresponding service type. Different map service loading classes will be introduced separately in the next chapter.

OSM has a source class underneath each layer. OSM is a wrapper class loaded to the third-party mapping service OSM.

View represents a simple 2D View of the map. Objects used to change the center, resolution, and rotation of the map.

OpenStreetMap (OSM) open-source Wiki maps, many of which people take for granted, have legal and technical restrictions that prevent geographic information like maps from being used creatively and efficiently. Open Street Maps is motivated by the desire to create and make geographical data (like street maps) freely available to anyone who wants to use them, just as free software gives users the freedom to use them.

Dom node

A div is created in the layout to act as a container for storing the map, and the binding is initialized by id.

<div id="openlayers" class="map"></div>
Copy the code

Div style Settings

 .map{
    width: 100%;
    height: 100%;
    position: absolute;
  }
Copy the code

Initialize the map

Define the map initialization function

    methods: {
      init(){
       const map = new Map({
         layers: [
           new TileLayer({
             source: new OSM(),
           }),
         ],
         target: 'openlayers'.view: new View({
           center: [0.0].zoom: 2,})}); }},Copy the code

When a component mounts, the initialization function is called

    mounted() {
      this.init()
    },
Copy the code

The final result