OpenLayers API 使用实例

设置地图层级

    this.map.getView().setZoom(8);

定位到某一点

    const bbox = [
      [bounds.minX, bounds.minY],
      [bounds.maxX, bounds.maxY]
    ];
    // 建立一个包含所有给定坐标的范围。
    const boundingExtent = ol.extent.boundingExtent(bbox);
    // 获取中心点
    const center4326 = ol.extent.getCenter(boundingExtent);
    const center3857 = ol.proj.transform(center4326, 'EPSG:4326', 'EPSG:3857');
    this.map.getView().setCenter(center3857);

增加WMTS服务

  /**
   * @description 以ol.source.XYZ的形式创建layer
   * @param {string} url 链接
   * @param {string} projection 坐标系 "EPSG:4326"
   * @param {number} opacity 透明度
   */
  creatWmtsLayerFromXYZ: function (url, projection, opacity) {
    if (!url || !projection || !opacity) return;
    projection = ol.proj.get(projection);
    const layer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url,
        projection
      }),
      opacity,
      maxZoom: 18
    });
    return layer;
  },
  // 创建layer
  const layer = creatWmtsLayerFromXYZ(url, "EPSG:4326", 1);
  // 添加到地图中
  this.map.addLayer(layer);