Question

最近，我正在做一个关于将瓷砖加载到openlayers地图中的工作。但地图中显示的瓷砖让我感到困惑。当我只加载一个图块时，地图会显示此图块的无限数量。但结果与我不相容。我可以做些什么来实现openlayers地图中只显示一个图块？我很高兴任何要求。代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tiles-test</title>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM(),
            }),
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    urls: ['../1.png', '../2.png'],
                    projection: 'EPSG:3857'

                }),
            }),
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }),
        view: new ol.View({
            center: ol.proj.transform(
                [30, 30], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        })

    });
</script>
</body>
</html>

地图中显示的结果如下： enter image description here

Answer 1

XYZ源是 tile 源，不适用于单个图像。它使用 url patterns 来加载切片。

查看url / urls参数in the docs：

必须包含{x}，{y}或{-y}和{z}占位符。一个 {？ - ？}模板模式，例如子域{a-f} .domain.com，可能是而不是在urls选项中单独定义每个。

XYZ＆＃39; TileGrid定义了网格的外观。由于您未指定它，因此它使用默认配置并将您定义的（静态）URL应用于每个地图图块。

如果您只想在地图上放置静态图片，请使用ImageStatic（docs，example）

当我使用javascript加载图块时，如何在openlayers地图中显示一个图块

1 个答案: