当我使用javascript加载磁贴时,openlayers映射中仅显示一个磁贴

当我使用javascript加载磁贴时,openlayers映射中仅显示一个磁贴,javascript,openlayers,Javascript,Openlayers,最近,我正在做一项工作,关于将瓷砖加载到openlayers地图中。但地图上的瓷砖让我困惑。当我只加载一个磁贴时,贴图显示该磁贴的无限数量。但结果与我不符。我该怎么做才能在openlayers地图中只显示一个磁贴?我很高兴有任何要求。 代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tiles-test</t

最近,我正在做一项工作,关于将瓷砖加载到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>

瓷砖测试
var map=新ol.map({
图层:[
新ol.layer.Tile({
source:new ol.source.OSM(),
}),
新ol.layer.Tile({
来源:new ol.source.XYZ({
网址:['../1.png','../2.png'],
预测:“EPSG:3857”
}),
}),
],
目标:“地图”,
控件:ol.control.defaults({
属性选项:({
可折叠:错误
})
}),
视图:新ol.view({
中心:ol.proj.transform(
[30,30],'EPSG:4326','EPSG:3857',
缩放:10
})
});
图中显示的结果如下: XYZ源是一个平铺源,不用于单个图像。它使用url模式加载分幅

查看url/url参数:

必须包括{x}、{y}或{-y}和{z}占位符。A. {?-?}模板模式,例如子域{a-f}.domain.com,可以是 用于代替在URL选项中单独定义每个URL

XYZ定义网格的外观。因为您没有指定它,所以它使用默认配置并将您定义的(静态)url应用于每个地图分幅

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