[openlayers基础]从入门到实习（1）

准备写这一系列以总结每天的openlayers学习。

1.地图：

初始化地图：

         this.vecLayer=new TileLayer({
          opacity: 1,
          source: new WMTS({
            url: this.wmtsUrl_1 + this.webKey,
            layer: "vec", //注意每个图层这里不同
            matrixSet: "w",
            format: "tiles",
            style: "default",
            projection: this.projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(this.projectionExtent),
              resolutions: this.resolutions,
              matrixIds: this.matrixIds,
            }),
            wrapX: true,
          }),
        })
//在使用WMTS服务时，地图数据通常被分割成一系列瓦片，
每个瓦片都有一个独立的URL地址。要加载指定的瓦片，
需要知道瓦片的行列号和图层级别等信息，这些信息可以通过瓦片网格对象进行计算得出。

this.projection = getProjection("EPSG:3857");
    this.projectionExtent = this.projection.getExtent();
    this.size = getWidth(this.projectionExtent) / 256;
    this.resolutions = new Array(18);
    this.matrixIds = new Array(18);
    for (this.z = 1; this.z < 19; ++this.z) {
      // generate resolutions and matrixIds arrays for this WMTS
      this.resolutions[this.z] = this.size / Math.pow(2, this.z);
      this.matrixIds[this.z] = this.z;
    }
//创建了一个包含18个地图级别的瓦片网格对象，用于计算每个瓦片的URL和瓦片坐标。
该网格对象使用Web墨卡托投影，每个瓦片大小为256x256像素。
在每个地图级别中，分辨率值越小，表示地图显示的区域越大。
矩阵标识符是一个数字，用于唯一标识每个地图级别。

 添加地图： 

this.map.addLayer(this.imgLayer)

 移除地图：

this.map.removeLayer(imgLayer)

 设置高低：

 this.imgLayer.setZIndex(6)

是否可见：

this.imgLayer.setVisible(false)

2.量测：

使用的官网的例子，官网是使用一个图层反复修改

使用modify用于修改

const source = new VectorSource();
const modify = new Modify({source: source, style: modifyStyle});
const vector = new VectorLayer({
  source: source,
  style: function (feature) {
    return styleFunction(feature, true);
  },
});

_this.map.addLayer(vector)//只能添加一次
_this.map.addInteraction(modify);

清除只需：

  source.clear();
  _this.map.removeInteraction(modify);

核心：

  _this.draw = new Draw({
    source: source,
    type: drawType,
    style: function (feature) {
      return styleFunction(feature,drawType, tip);
    },
  });
_this.draw.on('drawstart', function () {
  });
  _this.draw.on('drawend', function () {
  });
  _this.map.addInteraction(_this.draw);

移除：

  _this.map.removeInteraction(_this.draw);

方法：getArea（xxx）, getLength（xxx）

geom.getLastCoordinate()获取最后的坐标

 .setPosition（）  .setOffset（）

写于e1b  510