openlayers图层切换，点线面矩形等的绘制

openlayers效果原理随记一

第一章 openlayers 基础学习

---

---

基础学习

随着公司业务向智慧城市的方向发展，有关地图，模型的技术就显着尤为的重要的。所以，一遍学习一遍记录openlayers的相关配置

---

`

一、openlayers是什么？

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。

二、使用步骤=

1.引入库

代码如下（示例）：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>

初始化地图的方法，该教程很多 OSM 这个图加载速度慢

---

2.效果一 切换地图

1.原理 初始化地图 ------- 初始化图层 ----------- 将图层添加到地图上

图案绘制的效果地址

1. 初始地图 用到的api，ol/map
2. 初始化图层用到的api, ol/layer
3. 添加图层的方法是 addLayer(),移除图层的方法是 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. 效果二 图案绘制

图案绘制的效果地址
主要是针对点线面的图形绘制