openlayer 接口渲染截取

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

文章讲述了如何利用OpenLayers库从地图URL中提取图层信息，并创建一个新的ImageWMS图层进行显示。代码示例中，提取了地图URL的`layers`和`bbox`参数，然后创建了一个指向Geoserver的WMS源，设置了图层参数，最后将新图层添加到地图实例。

openlayer 截取

        const url = item.mapUrl;
        const _url = url.substring(url.indexOf('layers='),url.indexOf('&bbox='));
        const layer = _url.split('=')[1];
        console.log(layer)
        const ip = url.substring(url.indexOf('http:'),url.indexOf('/geoserver'));
        const Layer = new ol.layer.Image({
          source: new ol.source.ImageWMS({
          ratio: 1,
          url: ip+ '/geoserver/tcyhy/wms',
          params: {'FORMAT': 'image/png',
          'VERSION': '1.1.1', 
          "STYLES": '',
          "LAYERS": layer,
          "exceptions": 'application/vnd.ogc.se_inimage',
          }
          })
        });
        this.map.addLayer(Layer)