如何解决在openlayers 6中切换图块层
我有很多使用Openlayers渲染的图块层，这些层是由用户使用下拉菜单选择的，但是我的代码不是在上一层替换新层，而是在下一层下面显示了不同的层
这是我的Javascript文件：
function loadMap(){
serviceURL= document.getElementById("tile").value;
serviceURL1= document.getElementById("tile1").value;
this.osm = new ol.layer.Tile({
source: new ol.source.OSM({center: center,zoom: 15,projection: 'EPSG:...',maxZoom: 19}),}); this.aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://...{z}/{x}/{y}.png",center: center,maxZoom: 19
}),});
this.aerial1 = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: attributions,url: "http://...{z}/{x}/{y}.png",maxZoom: 19
}),});
var map = new ol.Map({
layers: [osm,aerial,aerial1],target: 'map',view: new ol.View({
center: center,});
map.addControl (new ol.control.LayerSwitcherImage());
map.on("load",function(){ console.log("loaded"); layer.changed(); });
}
这是我的HTML代码：
<body><div style="content: "";display: table;clear: both;">
<br>
<table>
<tr>
<td>TileLayer 1 URL</td>
<td><select id="tile">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
</td>
</table>
<br>
<table>
<tr>
<td>TileLayer 2 URL</td>
<td><select id="tile1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
</td>
</table>
<br>
<button onclick="loadMap()">Add Tile Layer</button>
</br>
</div>
<br>
<div id="map" class="map">
</div>
我想每次单击下拉列表时都更改我的图块层，但是目前，它工作良好，但是无法替换上一层，并且新渲染的结果将显示以前的渲染结果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。