首页 > 其他分享 >openLayer加载WMS服务并定位

openLayer加载WMS服务并定位

时间:2022-11-18 20:22:28浏览次数:45  
标签:const openLayer WMS text url extent query 加载

需求

通过 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);
  });

标签:const,openLayer,WMS,text,url,extent,query,加载
From: https://www.cnblogs.com/webglblog/p/16904799.html

相关文章

  • MyBatis 延迟加载代码详解
    在我们的实际开发中,会面临各种各样的查询操作。如果单表查询能满足业务需求。尽量用单表查询,因为单表查询的效率比多表关联查询快。那么当业务需求需要用到的数据来源于多......
  • 加密狗逻辑:判断权限,延时加载遮罩层
    之前新人做的加密狗显示水印遮罩的功能,一直有问题,逻辑还找不出来哪有问题,自己简单写了个demo,照着套:<!doctypehtml><htmllang="en"translate="no"><head><met......
  • 前端懒加载和预加载
    懒加载和预加载的目的都是为了提高用户的体验,二者行为是相反的,一个是延迟加载,另一个是提前加载。懒加载对缓解服务器压力有一定作用,预加载则会增长服务器前端压力缓存。懒......
  • 【快应用】折叠屏手机打开快应用页面重新加载问题
    ​问题背景:折叠屏手机展开或者折叠时,快应用会重新加载页面,效果和初次进入当前页面相同,会回调生命周期函数onInit、onReady、onShow,通过页面调整传递的参数依然可以获取。......
  • hypermesh 加载时如何关闭loadtypes的显示
    hypermesh在加载的时候默认状态会在载荷单元后面显示loadtype的类型,比如force,有时候加载节点太多的时候白色的标签影响观感,或者截图的时候需要关闭。1.工具栏选择prefe......
  • IOC容器的加载过程-Bean的生命周期
    核心模块部分截图:   IOC源码加载过程:1.newAnnotationConfigApplicationContext():         再看:AnnotationConfigApplicationContext()的无......
  • el-tree 初始加载中状态
    问题二次封装了一个el-tree组件MenuTree,想要在树形数据nodeData传递之前,树显示为loading加载中的状态。原代码是在MenuTree中监听nodeData,data中声明treeLo......
  • Nginx开启Gzip压缩大幅提高页面加载速度
    刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非常臃肿,所以还是把Gzip打开了。环境:Debian61、Vim打开Nginx配置文件vim /usr/local......
  • 页面性能优化:preload预加载静态资源
    本文主要介绍preload的使用,以及与prefetch的区别。然后会聊聊浏览器的加载优先级。preload提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的......
  • 关于 SAP UI5 控件内容的 Excel 导出功能,如何加载所需的导出工具库
    SAPUI5ExpreadSheet导出功能允许开发人员将数据导出到OfficeOpenXML电子表格。开发人员可以导出具有表格格式的任何类型的内容,例如表格或列表。如果使用SmartTab......