オンとオフを切り替えることができるいくつかのレイヤーを使用してWebマップを作成しようとしています。最初は問題なくマップが描画されますが、レイヤーをオフに切り替えようとすると、既存のマップの下に新しいマップが追加されます（マップを置き換えるのではありません）。
レイヤーをオフに切り替えると、javascriptのrefresh（）関数が呼び出されます。この関数は、描画するレイヤーのリストを再構築してから、マップを構築する関数を再度呼び出す必要があります。これで既存のマップが置き換えられることを期待していましたが、代わりに新しいマップが下に追加されます。
...
...
<script type="text/javascript" src="ol.js"></script>
<script defer="defer" type="text/javascript">
function onLOAD()
{
var my_layers = 'layer_1, \
layer_2, \
layer_3, \
...'
init(my_layers);
}
function init(my_layers){
//The bounding box of Lund:lund_address_point
var extent = [13.1267,55.6770,13.2601,55.7597];
//Initial view
var view = new ol.View({
center: ol.proj.transform([13.192927, 55.708944], 'EPSG:4326', 'EPSG:3857'),
zoom: 13
});
//The source for the layers
var wmsSource = new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/Test/wms',
params: {
'LAYERS': my_layers
},
serverType: 'geoserver'
});
//OpenStreetMap background and my_layers
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: wmsSource
})
];
//Bind the map object to our "map" div and add some extra functionality
var map = new ol.Map({
layers: layers,
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([
//Extra functionality of the map
//Control for displaying coordinates
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('location'),
undefinedHTML: ' '
}),
//Control for displaying a scale line
new ol.control.ScaleLine({
target: document.getElementById('scale-line')
}),
//Control for zooming to a defined extent
new ol.control.ZoomToExtent({
extent: ol.proj.transform(extent, 'EPSG:4326', 'EPSG:3857')
})
]),
target: 'map',
view: view
});
}
function refresh(){
my_layers='';
if (layer_1.checked) my_layers = my_layers + "layer_1,";
if (layer_2.checked) my_layers = my_layers + "layer_2,";
if (layer_3.checked) my_layers = my_layers + "layer_3,";
...
if (my_layers.length > 1){
my_layers = my_layers.substring(0,my_layers.length-1);
}
init(my_layers);
}
</script>
</head>
<body onload="onLOAD()">
<div>
<br><input type="checkbox" id="layer_1" value="layer_1" checked="checked" onClick="refresh()">Layer_1
<br><input type="checkbox" id="layer_2" value="layer_2" checked="checked" onClick="refresh()">Layer_2
<br><input type="checkbox" id="layer_3" value="layer_3" checked="checked" onClick="refresh()">Layer_3
...
...
</div>
<br>
<div id="map"></div>
<br>
<div id="wrapper">
<div id="location"></div>
<br>
<div id="scale-line" class="scale-line"></div>
</div>
...
...
古いマップをきれいに削除するにはmap.setTarget(null)、前のMapオブジェクトを呼び出す必要があります。
ただし、あなたの場合は、単一のマップのみを作成し、レイヤーの可視性を更新する方がよい場合があります。このようにして、ロードされたタイル、中央、ズームなどのマップ/ビューの状態が記憶されます。
<div>
<br><input type="checkbox" id="input-osm" value="osm" checked="checked">OSM
<br><input type="checkbox" id="input-image" value="image" checked="checked">Image
</div>
更新関数からアクセスできるように、init関数の外部でマップ変数とレイヤー変数を宣言します。
var map, layers;
レイヤーをオブジェクトに格納し、宣言されたレイヤー変数に割り当てて、名前でレイヤーを参照し、正しい可視性で初期化できるようにします。
layers = {
osm: ol.layer.Tile({
source: new ol.source.OSM(),
visible: document.getElementById('input-osm').checked,
}),
image: new ol.layer.Image({
source: wmsSource
visible: document.getElementById('input-image').checked,
})
};
以前に宣言された変数にすべてのレイヤーを含むマップを割り当てます。
map = new ol.Map({
layers: Object.values(layers),
...
ユーザー入力レイヤーでは、チェックボックスに従って可視性を変更する必要があります。
function refresh(checkbox) {
layers[checkbox.value].setVisible(checkbox.checked);
}
document.getElementById('input-osm').addEventListener('change', refresh);
document.getElementById('input-image').addEventListener('change', refresh);
幸運を祈ります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加