当我使用 javascript 加载图块时，如何在 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>

地图中显示的结果如下：在此处输入图像描述

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

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

必须包含 {x}、{y}

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

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

如果您只想在地图上放置静态图像，请使用 ImageStatic(文档，示例(

相关内容

最新更新

热门标签：