三、OpenLayer常用图层介绍

1、TileLayer 瓦片图层。一般加载切片图层（wmts,wms）

天地图（wmts）

const tempLayer = new TileLayer({
  visible: true,
  projection: "EPSG:4326",
  source: new XYZ({
    visible: true,
    url: "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
  }),
  opacity: 1,
});

geoserver的wms服务

      
      // 加载 wms 服务
      let wmsLayer = new TileLayer({
        preload: Infinity,
        source: new TileWMS({
          url: "http://localhost:8090/geoserver/keshan/wms",
          //定义服务的请求参数
          params: {
            LAYERS: "",  //图层名称
            FORMAT: "image/png",
            VERSION: "1.1.1",
            tiled: true,
            STYLES: "",
            exceptions: "application/vnd.ogc.se_inimage",
            cql_filter: "",  //过滤条件
          },
          //可选，定义请求瓦片的大小 级别等，不需要的话可注释
          tileGrid: new ol.tilegrid.TileGrid({
            resolutions: this.getTileResolutions(),
            origin: [-180, 90],
            tileSize: 512,
          }),
          serverType: "geoserver",
          crossOrigin: "anonymous",  //跨域请求，主要涉及到地图图片的导出
        }),
        maxZoom: 21,
        minZoom: 0,
        zIndex:  100,
        properties: {}, //自定义一些图层的属性
      });

wmts服务

      // 加载 wmts 服务
      const matrixIds = new Array(20);
      for (let z = 0; z < 21; ++z) {
        matrixIds[z] = "EPSG:4490_dzdtz:" + z;
      }
      //自己瓦片的比例尺
      var resolutions = [
        1.4078260157100582, 0.7031250000000002, 0.3515625000000001,
        0.17578125000000006, 0.08789062500000003, 0.043945312500000014,
        0.021972656250000007, 0.010986328125000003, 0.005493164062500002,
        0.002746582031250001, 0.0013732910156250004, 6.866455078125002e-4,
        3.433227539062501e-4, 1.7166137695312505e-4, 8.583068847656253e-5,
        4.2915344238281264e-5, 2.1457672119140632e-5, 1.0728836059570316e-5,
        5.364418029785158e-6, 2.682209014892579e-6,
      ];
      let wmtsLayer = new TileLayer({
        preload: Infinity,
        source: new WMTS({
          url: url,
          layer: "",
          matrixSet: "EPSG:4490_dzdtz", //瓦片矩阵集的名称
          format: "image/jpeg",
          tileGrid: new WMTSTileGrid({
            tileSize: [256, 256],
            extent: [-180.0, -270.4034600217749, 180.4034600217749, 90.0],
            origin: [-180.0, 90.0],
            resolutions: resolutions,
            matrixIds: matrixIds,  //矩阵级别
          }),
          style: "",
          wrapX: true,
        }),
        maxZoom: 21,
        minZoom: 0,
        visible: false,
        zIndex: 100,
        properties: {},
      });

 wmts有些参数比较复杂，需要自己去看服务元数据的参数，比如矩阵也就是切片层级的名称，瓦片层级等。

2、VectorLayer 矢量图层，这个图层主要是添加自己的绘制的一些要素

     const maskLayer = new VectorLayer({
        preload: Infinity,
        source: new VectorSource({
          features: [],  //图层要素
          //geojson的读取方式
          //features: [new GeoJSON().readFeature(masked)]
          //url的读取方式
          //url: "/static/wgs84jz.json",
        }),
        //图层样式
        style: new Style({
          stroke: new Stroke({
            color: "#01FDFF", 
            width: 3,
            opacity: 1,
          }),
          fill: new Fill({
            color: "#061F57",
          }),
        }),
        visible: true,
        zIndex: 200,
        opacity: 0.3,  //图层透明度
        projection: "EPSG:4326",
      });

VectorLayer使用比较灵活，可以自定义样式，图层要素等

3、ImageLayer 影像图层 它是基于图片的图层类型，适用于一次性加载一张完整的图片来显示地图数据。基本类似于TileLayer，但是ImageLayer不能加载切片

      let wmsLayer = new ImageLayer({
        source: new ImageWMS({
          crossOrigin: "anonymous",
          url: url,
          params: {
            LAYERS: param.layers,
            FORMAT: "image/png",
            VERSION: "1.1.1",
            tiled: true,
            STYLES: "",
            exceptions: "application/vnd.ogc.se_inimage",
            cql_filter: "",
          },
          serverType: "geoserver",
        }),

        maxZoom: 21,
        minZoom: 0,
        visible: false,
        zIndex:  100,
        properties: {},
      });

在 OpenLayers 中，VectorLayer、ImageLayer 和 TileLayer 是三种常见的图层类型，它们在加载和显示地图数据的方式上有一些区别。

1. VectorLayer（矢量图层）：

   • VectorLayer 是基于矢量数据的图层类型，适用于加载和显示矢量要素数据，如点、线、多边形等。
   • VectorLayer 的数据通常是通过 GeoJSON、KML、GPX 等格式提供的，或者通过手动创建要素（Feature）添加到图层中。
   • VectorLayer 可以对矢量要素进行样式渲染、交互操作、查询等操作，具有高度的灵活性和可定制性。

2. ImageLayer（影像图层）：

   • ImageLayer 是基于图片的图层类型，适用于一次性加载一张完整的图片来显示地图数据。
   • 对于小范围区域或静态图片，可以使用 ImageLayer。通过设置图层的 source 属性为 ol.source.ImageStatic，可以指定图片的 URL、投影、范围等信息。
   • ImageLayer 适用于不需要动态切片的影像数据，例如航拍照片。

3. TileLayer（瓦片图层）：

   • TileLayer 是基于切片的图层类型，适用于将地图数据分为多个小块（瓦片）进行加载和显示。
   • 地图服务通常以瓦片的形式提供数据，因此 TileLayer 是常用的图层类型。
   • TileLayer 使用的图层源（source）通常是 ol.source.TileWMS、ol.source.TileArcGISRest、ol.source.OSM 等类型。这些源会自动处理切片请求，加载合适的瓦片并随着地图视图的变化进行更新。

总结：

• VectorLayer 适用于加载和显示矢量要素数据，具有灵活的样式渲染和交互操作能力。
• ImageLayer 适用于静态或小范围的影像数据，一次性加载整张图片进行显示。
• TileLayer 适用于将地图数据分为瓦片进行加载和显示，支持动态切片请求和视图变化时的更新。