Question

我正在尝试在我的有角7.1.3站点上设置openlayers。我已经尝试了一些示例，但都没有用。我在控制台上没有出现错误，但是地图没有显示，您能帮我吗？

我的代码：

map.component.html：

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

map.component.css

.map { height: 600px; width: 100%; }

map.component.ts

import { Component, OnInit, Inject, ElementRef, ViewChild } from '@angular/core';
import { CacheService } from '../../services/cache.service';
import { MaputilsService } from '../../services/maputils.service';
import { TranslateService } from '@ngx-translate/core';
import { GlobalSettingsService } from '../../../services/globalsettings.service';
import 'ol/ol.css';
import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';

@component({
selector: 'app-mapdata',
templateUrl: './mapdata.component.html',
styleUrls: ['./mapdata.component.css'],
})
export class MapdataComponent implements OnInit {
public map: OlMap; 
public source: OlXYZ;
public layer: OlTileLayer;
public view: OlView;

constructor(@Inject(CacheService) private cacheService: CacheService, private mapUtils: MaputilsService, public globalsSettings: 
GlobalSettingsService, private translate: TranslateService
) {translate.setDefaultLang(globalsSettings.getDefaultLanguage()); }

ngOnInit(): void {
this.source = new OlXYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
});

this.layer = new OlTileLayer({
  source: this.source
});

this.view = new OlView({
  center: [6.661594, 50.433237],
  zoom: 3
});

this.map = new OlMap({
  target: 'map',
  layers: [this.layer],
  view: this.view
}); 
}

Answer 1

您的XYZ来源似乎是问题所在。在网络控制台中查看以查看问题。

请参见here OSM的工作示例

Angular 7.1.3和Openlayers 5.3.0不起作用

1 个答案: