图标功能的大小计算错误
Size of Icon feature is calculated wrong
我目前正在编写一个实现,用户可以在其中上传蓝图并将其放置在地图上。
问题是图标功能被注册为实际图像范围的子范围。
显示全图时一切正常:
https://s24.postimg.org/lj3xmgsj9/image.png
当我将地图向左移动时,一旦领主开始离开视野,图像就会消失:
https://s23.postimg.org/4p2tu0c5n/image.png
这是个问题,因为我的用户必须能够放大他们上传的蓝图的角落。
以下URL 显示了 OL2 的工作实现:
http://gis.ibbeck.de/ginfo/apps/OLExamples/OL27/examples/ExternalGraphicOverlay/ExternalGraphicOverlay.asp
这里一切都很好。
这是 OL3 中的错误还是我做错了什么?
切换到 OL2 不是一个选项,因为我们已经有很多 OL3 代码。
使用了以下代码:
(拖动、旋转、缩放已被删除以制作一个最小的工作示例)
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature(new ol.geom.Point([1389519.3624186157, 7496787.364362017]))
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
src: 'https://lumiere-a.akamaihd.net/v1/images/millennium-falcon-4_9c006047.jpeg',
scale: 0.75
})
})
})
],
target: 'map',
view: new ol.View({
center: [1389519.3624186157, 7496787.364362017],
zoom: 18
})
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
如果您有更大的图标,则必须设置 renderBuffer
属性 或 ol.layer.Vector(默认值:100px),以便 OpenLayers 包含该功能,即使实际几何形状在视图范围之外。
new ol.layer.Vector({
renderBuffer: 600,
...
})
我目前正在编写一个实现,用户可以在其中上传蓝图并将其放置在地图上。
问题是图标功能被注册为实际图像范围的子范围。
显示全图时一切正常:
https://s24.postimg.org/lj3xmgsj9/image.png
当我将地图向左移动时,一旦领主开始离开视野,图像就会消失:
https://s23.postimg.org/4p2tu0c5n/image.png
这是个问题,因为我的用户必须能够放大他们上传的蓝图的角落。
以下URL 显示了 OL2 的工作实现:
http://gis.ibbeck.de/ginfo/apps/OLExamples/OL27/examples/ExternalGraphicOverlay/ExternalGraphicOverlay.asp
这里一切都很好。
这是 OL3 中的错误还是我做错了什么?
切换到 OL2 不是一个选项,因为我们已经有很多 OL3 代码。
使用了以下代码:
(拖动、旋转、缩放已被删除以制作一个最小的工作示例)
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature(new ol.geom.Point([1389519.3624186157, 7496787.364362017]))
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
src: 'https://lumiere-a.akamaihd.net/v1/images/millennium-falcon-4_9c006047.jpeg',
scale: 0.75
})
})
})
],
target: 'map',
view: new ol.View({
center: [1389519.3624186157, 7496787.364362017],
zoom: 18
})
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
如果您有更大的图标,则必须设置 renderBuffer
属性 或 ol.layer.Vector(默认值:100px),以便 OpenLayers 包含该功能,即使实际几何形状在视图范围之外。
new ol.layer.Vector({
renderBuffer: 600,
...
})