Angular9 我的地图赢了';使用openlayers 6.2和angular 9,即使使用Dragrotate和Zoom交互,也不能移动
我正在尝试创建一个地图,正如我在其他网站和示例中看到的,每个人都可以通过鼠标点击和拖动来移动他们的地图。但我的地图一点也不动,有人知道我做错了什么吗 这些是我正在使用的components.ts和component.html文件。我按照上的说明操作,没有安装包裹,因为我使用的是angular map.component.tsAngular9 我的地图赢了';使用openlayers 6.2和angular 9,即使使用Dragrotate和Zoom交互,也不能移动,angular9,openlayers-6,Angular9,Openlayers 6,我正在尝试创建一个地图,正如我在其他网站和示例中看到的,每个人都可以通过鼠标点击和拖动来移动他们的地图。但我的地图一点也不动,有人知道我做错了什么吗 这些是我正在使用的components.ts和component.html文件。我按照上的说明操作,没有安装包裹,因为我使用的是angular map.component.ts ngOnInit(): void { this.mapInit(); } mapInit() { var mousePositionControl =
ngOnInit(): void {
this.mapInit();
}
mapInit() {
var mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
projection: 'EPSG:4326',
// comment the following two lines to have the mouse position
// be placed within the map.
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
var source = new OSM();
var overviewMapControl = new OverviewMap({
layers: [
new TileLayer({
source: source
})
]
});
this.map = new Map({
target: 'map',
interactions: defaultInteractions().extend([
new DragRotateAndZoom
]),
layers: [
new TileLayer({
source: source
}),
],
view: new View({
center: fromLonLat([19.833549, 45.267136]),
zoom: 7
}),
controls: defaultControls().extend([
overviewMapControl,
new FullScreen(),
mousePositionControl,
new ZoomToExtent({
extent: [
813079.7791264898, 5929220.284081122,
848966.9639063801, 5936863.986909639,
]
})
])
});
map.component.html
<html lang="en">
<head>
<title>Drag, Rotate, and Zoom</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="mouse-position"></div>
</body>
</html>
拖动、旋转和缩放
这与本期相同:
HTML中不包含最新版本的ol.css
加:
谢谢您的评论。它适用于版本6.2.*和6.3.*,但对我来说,它在版本6.4.0之后就不起作用了。因为这次承诺:这可能是一个不同的问题,如果没有承诺很难说(这将是另一个问题)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">