Openlayers layer switching, drawing of point, line and surface rectangles, etc.

openlayers effect principle notes one

Chapter 1 openlayers basic learning

---

---

basic learning

As the company's business develops in the direction of smart cities, the technology related to maps and models is particularly important. So, learn and record the relevant configuration of openlayers over and over

---

`

1. What is openlayers?

OpenLayers is a JavaScript class library package specially provided for Web GIS client development, which is used to realize the access to map data published in standard format.

2. Use steps =

1. Import library

The code is as follows (example): npm install ol

import Map from "ol/Map"
import {
    
    Tile as TileLayer} from "ol/layer";
import View from "ol/View"```
......

## 2.初始化地图

代码如下（示例）：
var map = new Map({
    
    
  view: new View({
    
    
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new TileLayer({
    
    
      source: new OSM()
    })
  ],
  target: 'map'
});
```html
  <div id="map" style="width:100%; height: 100%;"></div>

The method of initializing the map, there are many OSMs in this tutorial, the loading speed of this map is slow

---

2. Effect one switch map

1. Principle Initialize the map -------- initialize the layer ----------- add the layer to the map

Effect address of pattern drawing

1. The api used by the initial map, ol/map
2. The api used to initialize the layer, ol/layer
3. The method of adding a layer is addLayer(), and the method of removing a layer is removeLayer()

 //初始化地图
 let map = new Map({
    layers: layer,
    target:  'map',
    view: new View({
      center:  [116.36729872, 39.87373573],  //北京
      zoom:  7
    })
  // 初始化图层
   var layer = new TileLayer({
    opacity: 0.7,
    source: new WMTS({
      url: option.url,
      layer: option.layer,  //注意每个图层这里不同
      matrixSet: 'w',
      format: 'tiles',
      style: 'default',
      projection: projection,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: matrixIds
      }),	  
      wrapX: true,
      zIndex: option.zIndex,
    }),
    name: option.name,
    title: option.title
  })
  //添加地图 
  map.addlayer(layer )

3. Effect 2 pattern drawing

The effect address of pattern drawing
is mainly for the drawing of points, lines and surfaces