Ionic framework Openlayers绘制未正确缩放到贴图大小
我现在有一张openlayers地图,我正在上面画一个覆盖图。问题是,当我缩放包含贴图的div容器时,它实际上没有正确缩放绘图层,因此指针没有与鼠标位置对齐。如果我不做任何缩放,它会正确对齐。除了div标记外,我还尝试将html和body设置为100%宽度,但这也不起作用 这是我的地图类型脚本代码:Ionic framework Openlayers绘制未正确缩放到贴图大小,ionic-framework,openlayers,openlayers-3,Ionic Framework,Openlayers,Openlayers 3,我现在有一张openlayers地图,我正在上面画一个覆盖图。问题是,当我缩放包含贴图的div容器时,它实际上没有正确缩放绘图层,因此指针没有与鼠标位置对齐。如果我不做任何缩放,它会正确对齐。除了div标记外,我还尝试将html和body设置为100%宽度,但这也不起作用 这是我的地图类型脚本代码: // create the bing maps layer var raster = new ol.layer.Tile({ source: new ol.source.BingMaps({
// create the bing maps layer
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AioGchlm6KiMF-8ws9hq9PEJKSZzGXj8aZ1OrDt-MlN_NY907-YdiaraNT9sCodZ',
imagerySet: 'AerialWithLabels',
maxZoom: 19
})
});
// generate the actual map
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 10
})
});
// holds each of the drawings
var features = new ol.Collection();
// allows the user to draw a polygon on the map
var draw = new ol.interaction.Draw({
features: features,
type: 'Polygon'
});
map.addInteraction(draw);
// adds the polygon to the features collection when the drawing is complete
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({features: features}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
featureOverlay.setMap(map);
// allows the user to modify the drawings
var modify = new ol.interaction.Modify({
features: features,
/*
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
}
*/
});
map.addInteraction(modify);
以及html代码:
<div #map id="map"></div>
可能还值得注意的是,我是在一个ionic 3项目中执行此操作的。每次调整div大小时,都需要调用
map.updateSize()
,我应该在哪里调用它?我把函数放在一个按钮中,当我点击它时,它可以正常工作,但是如果我把它放在创建地图的函数中,它就不工作了????????
#map {
height: 100%;
}