Openlayer加载WMS服务并定位

有些效果需要到我的博客中才能看到

需求

通过 geoserver 服务发布的 WMS 服务,然后用户只传 url,只通过 wms 的服务 url 加载数据到地图上,并进行定位操作
最近项目有需要实现这个,花了一点时间研究了一下.

其实除了 ImageWMS 的加载,还有 TileWMS 的方法加载,TileWMS 的性能更好一些,但是此处只需要实现用户点击服务然后加载即可,不过多深究(完成需求即可).

代码

fetch(route.query.url)
  .then((response) => response.text())
  .then((text) => {
    const result = parse.read(text);
    const extentRange = result.Capability.Layer.EX_GeographicBoundingBox;
    const extent = transformExtent(extentRange, "EPSG:4326", "EPSG:4326");
    const wmsSource: any = new ImageWMS({
      ratio: 1,
      url: route.query.url,
      serverType: "geoserver",
      crossOrigin: "anonymous",
      // 服务器类型
    });
    const imageLayer = new ImageLayer({
      className: route.query.name,
      source: wmsSource,
      extent: extent,
    });
    //fit是定位作用
    map.getView().fit(extent, { maxZoom: 20 });
    map.addLayer(imageLayer);
  });