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

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>

地图显示结果如下：在此输入图片描述

Answer 1

XYZ 源是平铺源，不适用于单个图像。 它使用url 模式来加载图块。

查看文档中的 url/urls 参数：

必须包含 {x}、{y} 或 {-y} 和 {z} 占位符。 可以使用 {?-?} 模板模式，例如 subdomain{af}.domain.com，而不是在 urls 选项中单独定义每个模式。

XYZ 的TileGrid定义了网格的外观。 由于您没有指定它，它使用默认配置并将您定义的（静态）url 应用于每个地图图块。

如果您只想在地图上放置静态图像，请使用 ImageStatic ( docs , example )

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

问题描述

1 个解决方案

解决方案1
2 2018-05-22 10:21:40

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

问题描述

1 个解决方案

解决方案1 2 2018-05-22 10:21:40

解决方案1
2 2018-05-22 10:21:40