angular-openlayers - 我无法使用 Angular OpenLayers 和 WMTS 服务加载地图

问题描述

我正在尝试在我用 Angular 开发的项目中加载地图。为此，我正在使用 OpenLayers。
我想下载瓷砖的存储库是
http://www.ign.es/wmts/mapa-raster
如果我去这个站点测试请求 WMTS
有了这个请求，我可以测试服务器响应和请求的模板：

层 = MTN
样式 = 默认
TileMatrixSet = EPSG:4326
服务 = WMTS
格式 = 图片/png
TileMatrix = EPSG:4326:4

服务器响应成功，但如果我使用 OpenLayer 库将此选项放在我的 Angular 组件中，页面中不会出现任何内容，但如果我使用 XYZ 等其他服务，则可以完美运行。但是，不幸的是，我需要为这个项目提供 WMTS 服务。

这是我的代码：
ol-map.component.ts

import { Component, OnInit,AfterViewInit,Input,ElementRef } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import XYZ from 'ol/source/XYZ';
import WMTS from 'ol/source/WMTS'
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {getTopLeft} from 'ol/extent'
import { OSM} from 'ol/source';
import { Tile} from 'ol/layer';
import * as Proj from 'ol/proj';
import {
  defaults as defaultControls,
  Control,
  ScaleLine,
  ZoomSlider
} from 'ol/control';

import {fromLonLat, get as getProjection} from 'ol/proj';
import {getWidth} from 'ol/extent';


export const DEFAULT_HEIGHT = '100%';
export const DEFAULT_WIDTH = '100%';

export const DEFAULT_LAT = 39;
export const DEFAULT_LON = -7;

@Component({
  selector: 'ol-map',
  templateUrl: './ol-map.component.html',
  styleUrls: ['./ol-map.component.css']
})
export class OlMapComponent implements OnInit,AfterViewInit {
  @Input() lat: number = DEFAULT_LAT;
  @Input() lon: number = DEFAULT_LON;
  @Input() zoom: number = 10;
  @Input() width: string | number = DEFAULT_WIDTH;
  @Input() height: string | number = DEFAULT_HEIGHT;

  map: Map;
  private mapEl: HTMLElement;

  resolutions = [];
  matrixIds = [];
  proj4326 = getProjection('EPSG:4326');
  maxResolution = getWidth(this.proj4326.getExtent()) / 256;
  
  constructor(private elementRef: ElementRef) {
  }

  tileGrid:WMTSTileGrid;
  
  ngAfterViewInit(): void {
    for (var z = 0; z < 18; ++z) {
      // generate resolutions and matrixIds arrays for this WMTS
      this.resolutions[z] = this.maxResolution / Math.pow(2, z);
      this.matrixIds[z] = "EPSG:4326:" + z;
    }

    this.tileGrid = new WMTSTileGrid({
      origin: getTopLeft(this.proj4326.getExtent()),
      resolutions: this.resolutions,
      matrixIds: this.matrixIds,
    });

    this.mapEl = this.elementRef.nativeElement.querySelector('#map');
    this.setSize();
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          opacity: 0.7,
          extent: this.proj4326.getExtent(),
          source: new WMTS({
            url: 'http://www.ign.es/wmts/mapa-raster/',
            layer: 'MTN',
            matrixSet: 'EPSG:4326',
            format: 'image/png',
            projection: this.proj4326,
            tileGrid: this.tileGrid,
            style: 'default',
            // wrapX: true,
            attributions:
            'Teselas de PNOA cedido por © Instituto Geográfico Nacional de España',
          })
        })
      ],
      
      view: new View({
        // projection: 'EPSG:4326',
        center: Proj.fromLonLat([this.lon, this.lat]),
        zoom: this.zoom
      }),
      controls: defaultControls().extend([
        new ScaleLine({}),
        new ZoomSlider
      ])
    });
  }

  private setSize() {
    if (this.mapEl) {
      const styles = this.mapEl.style;
      styles.height = coerceCssPixelValue(this.height) || DEFAULT_HEIGHT;
      styles.width = coerceCssPixelValue(this.width) || DEFAULT_WIDTH;
    }
  }

  ngOnInit(): void {
  }

}

  const cssUnitsPattern = /([A-Za-z%]+)$/;
  
function coerceCssPixelValue(value: any): string {
  if (value == null) {
    return '';
  }

  return cssUnitsPattern.test(value) ? value : `${value}px`;
}

ol-map.component.html

<div id="map" class="map"></div>

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>OpordEasyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

标签： angular-openlayers

angular-openlayers - 我无法使用 Angular OpenLayers 和 WMTS 服务加载地图

问题描述

解决方案

推荐阅读