问题描述
我正在尝试在我用 Angular 开发的项目中加载地图。为此,我正在使用 OpenLayers。
我要下载磁贴的存储库是
http://www.ign.es/wmts/mapa-raster
如果我去这个网站
test request WMTS
通过这个请求,我可以测试服务器的响应和请求的模板:
服务器响应成功,但如果我使用 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>
index.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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)