อารากอนคำตอบของคุณชี้ให้ฉันในทิศทางที่ถูกต้อง ด้านล่างเป็นรหัสที่ไม่สะอาดครั้งสุดท้ายของฉันสำหรับการเพิ่มเลเยอร์ในอาเรย์แล้วควบคุมมัน
ในไฟล์จาวาสคริปต์ฉันเริ่มต้นแผนที่และใช้ฟังก์ชั่นเพื่อสลับการมองเห็นดังนี้:
//Layer array
var layersArray = [];
//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});
/* Map Initialization */
function initializeMap(){
var esribase = new ol.layer.Tile({
preload: Infinity,
source: new ol.source.XYZ({
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
});
var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
})
});
poly1.setVisible(false);
var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
})
});
poly2.setVisible(false);
var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
})
});
poly3.setVisible(false);
layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,
view:view
});
}
// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}
ใน HTML ฉันใช้ช่องทำเครื่องหมายอย่างง่าย (ตัวอย่างของการสลับ poly1):
<input style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>
