Question

我目前正在编写一个实现，用户可以上传蓝图并将其放在地图上。

问题是图标功能被注册为实际图像范围的子范围。

显示完整图像时一切都很好：
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>

Answer 1

如果您有更大的图标，则必须设置ol.layer.Vector的renderBuffer属性（默认值：100px），这样即使实际几何图形在视图范围之外，OpenLayers也会包含该功能。

new ol.layer.Vector({
    renderBuffer: 600,
    ...
})

https://jsfiddle.net/nptq3hjy/

图标功能的大小计算错误

1 个答案: