我尝试在mat-grid-tile的{{1}}中显示openlayers地图。
模板片段：
mat-grid-listopenlayers映射在打字稿文件中初始化。片段：
<mat-grid-list cols="3" rowHeight="100px">[...]
<mat-grid-tile
colspan="1"
rowspan="5">
<div
id="map"
class="map">
</div>
</div>
</mat-grid-tile>[...]
</mat-grid-list>
问题是，无法找到target属性，因为找不到ID为“ map”的div。
我也尝试过使用import OlTileLayer from 'ol/layer/Tile';
import OlMap from 'ol/Map';
import OlOverlay from 'ol/Overlay';
import * as proj from 'ol/proj';
import OlXYZ from 'ol/source/XYZ';
import OlView from 'ol/View';
import OlFeature from 'ol/Feature';
import OlVectorSource from 'ol/source/Vector';
import OlStyleStyle from 'ol/style/Style';
import OlIconStyle from 'ol/style/Icon';
import OlOsmSource from 'ol/source/OSM';
import OlVectorLayer from 'ol/layer/Vector';
import OlPoint from 'ol/geom/Point';
[...]
map: OlMap;
popup: OlOverlay;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
olOverlay: OlOverlay;
olFeature: OlFeature;
markerSource: OlVectorSource;
markerStyle: OlStyleStyle;
ngAfterViewInit(): void {
this.setMarkerSource();
this.setMarkerStyle();
this.setMap();
}
private setMap() {
this.map = new OlMap({
target: 'map',
layers: [
new OlTileLayer({
source: new OlOsmSource()
}),
new OlVectorLayer({
source: this.markerSource,
style: this.markerStyle
})
],
view: new OlView({
center: proj.fromLonLat([7.35077565, 49.92363955]),
zoom: 7
})
});
}
private setMarkerSource() {
this.markerSource = new OlVectorSource();
}
private setMarkerStyle() {
this.markerStyle = new OlStyleStyle({
image: new OlIconStyle(
/** @type {olx.style.IconOptions} */ ({
opacity: 0.75,
src: 'path-to-icon.png'
})
)
});
}
，但它为null。
首先，我在document.getElementById('map')中进行了地图初始化，然后将其移至ngOnInit()中。另一种方法是这样编写div：
ngAfterViewInit()，并使用以下命令在ts文件中调用它：
<div #mapDiv class="map></div>
但是它说this.mapDiv是未定义的。
如果我将地图div设置在@ViewChild('mapDiv')
mapDiv: ElementRef;
[...]
this.map = new OlMap({
target: this.mapDiv.nativeElement,
[...]
/ mat-grid-tile之外，则可以正常工作。
如何将地图放置在mat-grid-list内？
非常感谢。
答案 0 :(得分：0)
非常感谢您的评论。 实际上，在停止并重新启动应用程序之后，以上代码可以正常工作。 不知道是什么问题。