当前位置: 首页 > news >正文

arcgis jsapi 4.31 调用geoserver 发布的wms服务

服务的调用我也测试了网络搜索的很多方法,均未奏效,后来还是通过对官网例子的研究,找到了解决方案,调试的过程是非常痛苦的,最大的问题就是调用后没有任何反应,也不会给你任何的错误信息,这是最郁闷的

最终的解决方式是使用通用的动态图层来实现对geoserver发布的wms服务的调用,首先使用通用动态图层基类创建自定义子类,创建的代码来源于官网示例,直接上代码:

      const CustomWMSLayer = BaseDynamicLayer.createSubclass({
          properties: {
            mapUrl: null,
            mapParameters: null
          },

          // Override the getImageUrl() method to generate URL
          // to an image for a given extent, width, and height.
          getImageUrl: function (extent, width, height){
            const urlVariables = this._prepareQuery(this.mapParameters, extent, width, height);
            const queryString = this._joinUrlVariables(urlVariables);
            return this.mapUrl + "?" + queryString;
          },

          // Prepare query parameters for the URL to an image to be generated
          _prepareQuery: function (queryParameters, extent, width, height) {
            const wkid = extent.spatialReference.isWebMercator ? 3857 : extent.spatialReference.wkid;
            const replacers = {
              width: width,
              height: height,
              wkid: wkid,
              xmin: extent.xmin,
              xmax: extent.xmax,
              ymin: extent.ymin,
              ymax: extent.ymax
            };

            const urlVariables = this._replace({}, queryParameters, replacers);
            return urlVariables;
          },

          // replace the url variables with the application provided values
          _replace: (urlVariables, queryParameters, replacers) => {
            Object.keys(queryParameters).forEach((key) => {
              urlVariables[key] = Object.keys(replacers).reduce((previous, replacerKey) => {
                return previous.replace("{" + replacerKey + "}", replacers[replacerKey]);
              }, queryParameters[key]);
            });

            return urlVariables;
          },

          // join the url parameters
          _joinUrlVariables: (urlVariables) => {
            return Object.keys(urlVariables).reduce((previous, key) => {
              return previous + (previous ? "&" : "") + key + "=" + urlVariables[key];
            }, "");
          }
        });
		
		const riverWmsLayer = new CustomWMSLayer({
          mapUrl: "http://IP:port/路径/wms",
          mapParameters: {
            SERVICE: "WMS",
            REQUEST: "GetMap",
            FORMAT: "image/png",
            TRANSPARENT: "TRUE",
            STYLES: "",
            VERSION: "1.3.0",
            LAYERS: "服务里图层名称",
            WIDTH: "{width}",
            HEIGHT: "{height}",
            CRS: "EPSG:{wkid}",
            BBOX: "{xmin},{ymin},{xmax},{ymax}",
			token: "token" //如果有就填入,没有就直接把token参数给删掉
          },

          //minScale: 20000,
          title: "地图上图层名字"
        });

完美调用。

参考:

ArcGIS Maps SDK for JavaScript | Overview | ArcGIS Maps SDK for JavaScript 4.32 | Esri Developer

相关文章:

  • Anaconda和Pycharm的区别,以及如何选择两者
  • JVM 学习计划表(2025 版)
  • 01_使用Docker将Coding上项目部署到k8s平台
  • STM32 FATFS - 在SDIO的SD卡中运行fatfs
  • Redis 缓存基础数据类型详解
  • Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
  • 一欧元滤波器算法
  • 10、Linux C 网络编程(完整版)
  • Odoo透视图中添加自定义按钮执行后台方法
  • Python学习(二)操作列表
  • 字体格式如何解析(open-type)
  • Mysql 字段值批量自增或自减(坐标系数据,(x,y))
  • 43页可编辑PPT | 大数据管理中心设计规划方案大数据中心组织架构大数据组织管理
  • ⑧RBM(主备/主主)-二层部署案例
  • Web3.0隐私计算与云手机的结合
  • AI Agent 中的 MCP 模型上下文协议详解
  • 基于Matlab实现DCT数字水印添加提取和干扰测试
  • scGPT环境安装
  • 2025年企业级开源治理实践与思考
  • 边缘计算网关是什么?
  • 警惕“全网最低价”等宣传,市监总局和中消协发布直播消费提示
  • 大四本科生已发14篇SCI论文?重庆大学:成立工作组核实
  • 一季度全国消协组织为消费者挽回经济损失23723万元
  • 体坛联播|双杀阿森纳,巴黎晋级欧冠决赛对阵国际米兰
  • 超燃!走过莫斯科街头的“中国排面”
  • 上海:5月8日起5年以上首套个人住房公积金贷款利率下调至2.6%