Question

我正在编写一个js脚本，使用OpenLayers3将多个WMS图层添加到地图中代码是这样的：

<script type="text/javascript">
var l1 = new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
});
var l2 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette1'},
    })
})
var l3 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette2'},
    })
})
var map = new ol.Map({
  target: 'map-dashboard',
  view: new ol.View({
    center: [-10997148, 4569099],
    zoom: 4
  })
});
map.addLayer(l1);
map.addLayer(l2);
map.addLayer(l3);
</script>

这样，WMS图层并非全部可见。第一个被最后一个隐藏阅读API文档后，我找到了 ol.layer.TileWMS 对象，因此可能的解决方案是替换ImageWMS对象：

var l2 = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette1'},
    })
})
var l3 = new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
      params: {'LAYERS': 'aree_protette2'},
    })
})

我需要看到所有图层都可见并重叠。我不确定这是一个有效的解决方案。欢迎任何进一步的建议！

Answer 1

你想要两个单独的ol3层中的两个层吗？如果没有那么你可以尝试（取决于数据）

var layers = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms?',
  params: {'LAYERS': 'aree_protette1, aree_protette2 '},
})

作为两个单独的图层，尝试设置透明和图像（gif或png）参数

'LAYERS': 'aree_protette1',
'FORMAT': 'image/png', //depending what the GetCapabilities says
'TRANSPARENT': 'true'

编辑：当然，如果透明度参数有用，它取决于提供的数据。如果是这样，您可以在ol3中设置图层的不透明度。

OpenLayers3：在trasparency中显示多个WMS图层的最佳方式

1 个答案: