3. Introdução às camadas comuns do OpenLayer

1. Camada de ladrilho TileLayer. Geralmente carrega camadas de ladrilho (wmts, wms)

Mapa do Céu (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,
});

serviço geoservidor 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: {}, //自定义一些图层的属性
      });

serviço 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: {},
      });

Alguns parâmetros do wmts são relativamente complexos e você mesmo precisa observar os parâmetros dos metadados do serviço, como a matriz, que é o nome do nível de fatia, o nível de bloco, etc.

2. Camada vetorial VectorLayer.Esta camada é usada principalmente para adicionar alguns elementos do seu próprio desenho.

     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 é mais flexível de usar e pode personalizar estilos, elementos de camada, etc.

3. ImageLayer é um tipo de camada baseado em imagem, adequado para carregar uma imagem completa de uma vez para exibir dados do mapa. Basicamente semelhante ao TileLayer, mas o ImageLayer não pode carregar fatias

      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: {},
      });

Em OpenLayers, VectorLayere ImageLayersão TileLayertrês tipos de camadas comuns e apresentam algumas diferenças na maneira como carregam e exibem os dados do mapa.

VectorLayer(camada vetorial):
- VectorLayer É um tipo de camada baseado em dados vetoriais, adequado para carregar e exibir dados de feições vetoriais, como pontos, linhas, polígonos, etc.
- VectorLayer Os dados geralmente são fornecidos através de formatos como GeoJSON, KML, GPX, etc., ou adicionados à camada criando recursos manualmente (Feature).
- VectorLayer Ele pode realizar renderização de estilo, operação interativa, consulta e outras operações em elementos vetoriais e é altamente flexível e personalizável.
ImageLayer(Camada de imagem):
- ImageLayer É um tipo de camada baseada em imagem, adequada para carregar uma imagem completa de uma só vez para exibir dados do mapa.
- Pode ser usado para pequenas áreas ou imagens estáticas ImageLayer. Ao definir source as propriedades da camada ol.source.ImageStatic, você pode especificar o URL, projeção, intervalo e outras informações da imagem.
- ImageLayer Adequado para dados de imagem que não requerem fatiamento dinâmico, como fotos aéreas.
TileLayer(camada de ladrilho):
- TileLayer É um tipo de camada baseada em blocos, adequado para dividir dados de mapas em vários pedaços pequenos (blocos) para carregamento e exibição.
- Os serviços de mapas geralmente fornecem dados na forma de blocos, portanto, TileLayer são um tipo de camada comumente usado.
- TileLayer A fonte da camada ( ) usada sourcegeralmente é do tipo ol.source.TileWMS, , ol.source.TileArcGISRest, ol.source.OSM etc. Essas fontes lidam automaticamente com solicitações de blocos, carregando os blocos apropriados e atualizando conforme a visualização do mapa muda.

Resumir:

VectorLayer Adequado para carregar e exibir dados de recursos vetoriais, com renderização de estilo flexível e recursos de operação interativa.
ImageLayer Adequado para dados de imagem estáticos ou em pequena escala, carregando a imagem inteira para exibição de uma só vez.
TileLayer É adequado para dividir dados de mapa em blocos para carregamento e exibição e oferece suporte a solicitações e atualizações de fatiamento dinâmico quando a visualização muda.

3. Introdução às camadas comuns do OpenLayer

Acho que você gosta