最近,我正在做有关将图块加载到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

最佳答案

XYZ源是一个图块源,并非用于单个图像。它使用url模式加载图块。

查看url / urls参数in the docs


  必须包含{x},{y}或{-y}和{z}占位符。一个
  {?-?}模板模式,例如subdomain {a-f} .domain.com,可能是
  而不是在urls选项中分别定义每一个。


XYZ的TileGrid定义网格的外观。由于未指定,因此它使用默认配置并将定义的(静态)URL应用于每个地图图块。

如果只想在地图上放置静态图像,请使用ImageStatic(docsexample

关于javascript - 当我使用javascript加载图块时,openlayers map 中仅显示一个图块,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50458718/

10-12 23:25