ArcGIS API for Javascript加载各种来源的wms和wmts服务

已于 2024-05-10 16:00:29 修改
阅读量1.8k 收藏 3
点赞数 2
分类专栏： ArcGIS API for Javascript 文章标签： arcgis
于 2023-09-19 09:43:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014015203/article/details/133014330
版权

目录

一、加载wmts服务-使用WebTileLayer方式加载

1、加载方法

常见的切片方案如下：

2、各gis平台的服务配置地址

（1）超图发布的wmts服务

（2）geoserver发布的wmts服务

（3）航天宏图空间服务管理发布的wmts服务

二、加载wms图层-使用BaseDynamicLayer方式加载

1、加载方法

2、各gis平台的服务配置地址

（1）超图发布的wms服务

（2）geoserver发布的wms服务

一、加载wmts服务-使用 WebTileLayer 方式加载

使用WebTileLayer加载，加载方法如下，除了实现方法，针对不同平台发布的wmts服务的配置地址也很重要。下面都会详细讲解。

此外还有一张加载方式，使用自定义BaseTileLayer，不在此处做详细讲解

参考文章：https://blog.csdn.net/u014015203/article/details/136389165

1、加载方法
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
/**
 * 加载wmts图层-使用WebTileLayer方式加载
 * @param {Object} view 地图视图
 * @param {Object} map 地图
 * @param {Object} options
 *   -@param {String} id 图层标识
 *   -@param {String} url 图层服务地址
 */
export function addWMTSLayer(view, map, options) {
  var layer = new WebTileLayer({
    urlTemplate: options.url,
    spatialReference: view.spatialReference
  })
  if (!view.isWebMercator) {
    // 切片方案，常见切片方案见下文  
    layer.tileInfo = tileInfo
  }
  if (options.subDomains != undefined && options.subDomains != null) {
    layer.subDomains = options.subDomains
  }
  if (options.title != undefined && options.title != null) {
    layer.title = options.title
  }
  if (options.index != undefined && options.index != null) {
    map.add(layer, options.index)
  } else {
    map.add(layer)
  }
  layer.when(function () {
    if (layer.fullExtent.xmin > -180) {
      view.goTo(layer.fullExtent)
    }
  })
}
常见的切片方案如下：

（1）天地图

import TileInfo from '@arcgis/core/layers/support/TileInfo'
const tileInfoTDT = new TileInfo({
  dpi: 96,
  rows: 256,
  cols: 256,
  compressionQuality: 0,
  origin: {
    x: -180,
    y: 90
  },
  spatialReference: {
    wkid: 4490
  },
  lods: [
    {
      level: 1,
      levelValue: 1,
      resolution: 0.703125,
      scale: 295497593.05875003
    },
    {
      level: 2,
      levelValue: 2,
      resolution: 0.3515625,
      scale: 147748796.52937502
    },
    {
      level: 3,
      levelValue: 3,
      resolution: 0.17578125,
      scale: 73874398.264687508
    },
    {
      level: 4,
      levelValue: 4,
      resolution: 0.087890625,
      scale: 36937199.132343754
    },
    {
      level: 5,
      levelValue: 5,
      resolution: 0.0439453125,
      scale: 18468599.566171877
    },
    {
      level: 6,
      levelValue: 6,
      resolution: 0.02197265625,
      scale: 9234299.7830859385
    },
    {
      level: 7,
      levelValue: 7,
      resolution: 0.010986328125,
      scale: 4617149.8915429693
    },
    {
      level: 8,
      levelValue: 8,
      resolution: 0.0054931640625,
      scale: 2308574.9457714846
    },
    {
      level: 9,
      levelValue: 9,
      resolution: 0.00274658203125,
      scale: 1154287.4728857423
    },
    {
      level: 10,
      levelValue: 10,
      resolution: 0.001373291015625,
      scale: 577143.73644287116
    },
    {
      level: 11,
      levelValue: 11,
      resolution: 0.0006866455078125,
      scale: 288571.86822143558
    },
    {
      level: 12,
      levelValue: 12,
      resolution: 0.00034332275390625,
      scale: 144285.93411071779
    },
    {
      level: 13,
      levelValue: 13,
      resolution: 0.000171661376953125,
      scale: 72142.967055358895
    },
    {
      level: 14,
      levelValue: 14,
      resolution: 8.58306884765625e-5,
      scale: 36071.483527679447
    },
    {
      level: 15,
      levelValue: 15,
      resolution: 4.291534423828125e-5,
      scale: 18035.741763839724
    },
    {
      level: 16,
      levelValue: 16,
      resolution: 2.1457672119140625e-5,
      scale: 9017.8708819198619
    },
    {
      level: 17,
      levelValue: 17,
      resolution: 1.0728836059570313e-5,
      scale: 4508.9354409599309
    },
    {
      level: 18,
      levelValue: 18,
      resolution: 5.3644180297851563e-6,
      scale: 2254.4677204799655
    },
    {
      level: 19,
      levelValue: 19,
      resolution: 2.68220901489257815e-6,
      scale: 1127.23386023998275
    },
    {
      level: 20,
      levelValue: 20,
      resolution: 1.341104507446289075e-6,
      scale: 563.616930119991375
    }
  ]
})

（2）常见的4490坐标系的切片方案

与天地图的区别在于，它的levelValue是从0开始的，为0-19

import TileInfo from '@arcgis/core/layers/support/TileInfo'
const tileInfo = new TileInfo({
  dpi: 96,
  rows: 256,
  cols: 256,
  compressionQuality: 0,
  origin: {
    x: -180,
    y: 90
  },
  spatialReference: {
    wkid: 4490
  },
  lods: [
    {
      level: 1,
      levelValue: 0,
      resolution: 0.703125,
      scale: 295497593.05875003
    },
    {
      level: 2,
      levelValue: 1,
      resolution: 0.3515625,
      scale: 147748796.52937502
    },
    {
      level: 3,
      levelValue: 2,
      resolution: 0.17578125,
      scale: 73874398.264687508
    },
    {
      level: 4,
      levelValue: 3,
      resolution: 0.087890625,
      scale: 36937199.132343754
    },
    {
      level: 5,
      levelValue: 4,
      resolution: 0.0439453125,
      scale: 18468599.566171877
    },
    {
      level: 6,
      levelValue: 5,
      resolution: 0.02197265625,
      scale: 9234299.7830859385
    },
    {
      level: 7,
      levelValue: 6,
      resolution: 0.010986328125,
      scale: 4617149.8915429693
    },
    {
      level: 8,
      levelValue: 7,
      resolution: 0.0054931640625,
      scale: 2308574.9457714846
    },
    {
      level: 9,
      levelValue: 8,
      resolution: 0.00274658203125,
      scale: 1154287.4728857423
    },
    {
      level: 10,
      levelValue: 9,
      resolution: 0.001373291015625,
      scale: 577143.73644287116
    },
    {
      level: 11,
      levelValue: 10,
      resolution: 0.0006866455078125,
      scale: 288571.86822143558
    },
    {
      level: 12,
      levelValue: 11,
      resolution: 0.00034332275390625,
      scale: 144285.93411071779
    },
    {
      level: 13,
      levelValue: 12,
      resolution: 0.000171661376953125,
      scale: 72142.967055358895
    },
    {
      level: 14,
      levelValue: 13,
      resolution: 8.58306884765625e-5,
      scale: 36071.483527679447
    },
    {
      level: 15,
      levelValue: 14,
      resolution: 4.291534423828125e-5,
      scale: 18035.741763839724
    },
    {
      level: 16,
      levelValue: 15,
      resolution: 2.1457672119140625e-5,
      scale: 9017.8708819198619
    },
    {
      level: 17,
      levelValue: 16,
      resolution: 1.0728836059570313e-5,
      scale: 4508.9354409599309
    },
    {
      level: 18,
      levelValue: 17,
      resolution: 5.3644180297851563e-6,
      scale: 2254.4677204799655
    },
    {
      level: 19,
      levelValue: 18,
      resolution: 2.68220901489257815e-6,
      scale: 1127.23386023998275
    },
    {
      level: 20,
      levelValue: 19,
      resolution: 1.341104507446289075e-6,
      scale: 563.616930119991375
    }
  ]
})
2、各gis平台的服务配置地址

WebTileLayer以url模板的方式加载，url 模板是一个字符串，类似于绝对 URL，但带有许多占位符字符串，源会评估这些字符串以决定要加载哪些切片。

url 模板可以遵循  https://some.domain.com/{level}/{col}/{row}/ 的模式，其中  level 对应于缩放级别， column 和  row 分别表示切片列和行 。它还可以遵循https://some.domain.com/{z}/{x}/{y}/  的模式，其中 z 对应于缩放级别， x 和 y 表示沿 x 和 y 轴的图块位置 

（1）超图发布的wmts服务

以下图为例，配置地址为：

https://iserver.supermap.io/iserver/services/map-china400/wmts100/China/default/Custom_China/{level}/{row}/{col}.png

（2）geoserver发布的wmts服务

url模板为

http://localhost:8080/geoserver/gwc/service/wmts/rest/{layers}/{style}/{TileMatrixSet}/{TileMatrixSet}:{level}/{row}/{col}?format=image/png

找到服务的layers、style、TileMatrixSet替换上述url中的占位符，以下图为例，配置地址为：

​http://localhost:8080/geoserver/gwc/service/wmts/rest/sf:restricted//EPSG:4326/EPSG:4326:{level}/{row}/{col}?format=image/png

选中所需图层，点击进入下面页面

（3）航天宏图空间服务管理发布的wmts服务

<1>影像服务

http://localhost:10012/rasterserver/image/WMTS/1.0/{layer}/getTile/{z}/{y}/{x}

用服务的名称替换上述url中的占位符layer

<2>矢量服务

http://localhost:10012/mapserver/layer/WMTS/1.0/{layer}/{styleId}/{Request}/{z}/{y}/{x}

用服务的名称替换上述url中的占位符layer，用服务的样式id替换styleId占位符，用接口名（getTile获取地图瓦片、getcapabilities获取服务元数据）替换Request

二、加载wms图层-使用 BaseDynamicLayer 方式加载

使用BaseDynamicLayer加载，加载方法如下，除了实现方法，针对不同平台发布的wms服务的配置地址也很重要。下面都会详细讲解。

1、加载方法
import BaseDynamicLayer from '@arcgis/core/layers/BaseDynamicLayer'
/**
 * 加载wms图层-使用BaseDynamicLayer方式加载
 * @param {Object} view 地图视图
 * @param {Object} map 地图
 * @param {Object} options
 *   -@param {String} url 图层服务地址
 */
export function addWMSLayer(view, map, options) {
  const CustomWMSLayer = BaseDynamicLayer.createSubclass({
    properties: {
      mapUrl: null,
      mapParameters: null
    },

    getImageUrl: function (extent, width, height) {
      const urlVariables = this._prepareQuery(
        this.mapParameters,
        extent,
        width,
        height
      )
      const queryString = this._joinUrlVariables(urlVariables)
      return this.mapUrl + '?' + queryString
    },

    _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: (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 mapUrl = options.url.substr(0, options.url.indexOf('?'))
  const mapParameters = {
    service: 'WMS',
    request: 'GetMap',
    format: 'image/png',
    transparent: 'TRUE',
    styles: '',
    version: '1.1.1',
    layers: '', // 图层
    width: '{width}',
    height: '{height}',
    srs: 'EPSG:{wkid}', // 坐标系，默认读取map的坐标系
    bbox: '{xmin},{ymin},{xmax},{ymax}'
  }
  const params = getUrlParam(options.url)
  Object.keys(params).forEach((key) => {
    if (params[key]) {
      mapParameters[key] = params[key]
    }
  })
  // 必须配置跨域
  const layer = new CustomWMSLayer({
    mapUrl: mapUrl,
    mapParameters: mapParameters
  })

  if (options.title != undefined && options.title != null) {
    layer.title = options.title
  }
  if (options.opacity != undefined && options.opacity != null) {
    layer.opacity = options.opacity
  }
  if (options.index != undefined && options.index != null) {
    map.add(layer, options.index)
  } else {
    map.add(layer)
  }
}

const getUrlParam = (url) => {
  // str为？之后的参数部分字符串
  const str = url.substr(url.indexOf('?') + 1)
  // arr每个元素都是完整的参数键值
  const arr = str.split('&')
  // result为存储参数键值的集合
  const result = {}
  for (let i = 0; i < arr.length; i++) {
    // item的两个元素分别为参数名和参数值
    const item = arr[i].split('=')
    result[item[0]] = item[1]
  }
  // eslint-disable-next-line no-undef
  return result
}
2、各gis平台的服务配置地址

基础url+参数

（1）超图发布的wms服务

以下图为例，配置地址为：

https://iserver.supermap.io/iserver/services/map-china400/wms111/China?layers=China&srs=EPSG:4326

（2）geoserver发布的wms服务

以下图为例，配置地址为：

http://localhost:8080/geoserver/tiger/wms?layers=tiger:poly_landmarks&srs=EPSG:4326

webgis开发12138
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ArcGIS微课1000例】0107：ArcGIS加载在线历史影像服务WMTS
「 刘一哥与GIS的故事」
04-03 639
ArcGIS基于在线服务，通过访问历史影响WMTS服务，可以将全球范围内历史影像加载进来，如下所示：
ArcGIS API for JavaScript4.8 实例
10-26
包含大量的ArcGIS API for JavaScript4.8的开发实例，可用于WebGIS开发者学习资料，内容全面，并且能正常执行。
arcgis js 4.x加载超图发布的wms服务并进行空间属性查询
最新发布
傲骨雄风的博客
11-04 958
【代码】arcgis js 4.x加载超图发布的wms服务并进行空间属性查询。
ArcGIS API for JavaScript 加载天地图WMTS图层
huangli
04-30 3306
原文地址：ArcGIS API for JavaScript 加载天地图WMTS图层 本文介绍了ArcGIS API for JavaScript如何加载天地图WMTS图层，包括地理坐标系、投影坐标系下的矢量和影像地图。读完本文可以使用同样方法加载高德、百度等地图服务。 预览 在线预览：http://giser.xyz/demo/TianDiTu/index.html ...
使用ArcGIS JS API加载WMTS图层的两种方式
wml00000的博客
04-06 5883
文章目录前言方式一方式二 前言 某些项目可能多方参与，每一方使用的GIS平台有时会有所不同，这时为了统一各方地图服务，通常会发布OGC标准的WMTS地图服务供各方使用。ArcGIS API for JavaScript提供了专门加载WMTS服务的类WMTSLayer,通过一些配置参数后即可以添加图层；另外ArcGIS API 还提供了类TiledMapServiceLayer,通过继承该类也可以自...
ArcGIS API for JS 3.x 加载wmts格式天地图
比海更深
07-20 1797
require([&amp;amp;quot;esri/map&amp;amp;quot;, &amp;amp;quot;dojo/domReady!&amp;amp;quot;], function (Map) { var map = new Map(&amp;amp;quot;map&amp;amp;quot;, { center: [120, 34.5], zoom: 8,
ArcGisforjavaScript最全中文API
05-24
ArcGisforjavaScript最全中文API
ArcGIS API for JavaScript学习
weixin_43395693的博客
08-29 3318
三、ArcGIS API for JavaScript 类包 3.1 API API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。——百度百科 An application programming interface (API) is an interface or communication pro
Arcgis api for JavaScript开发基础及控件学习
mjy555的博客
03-09 4745
Arcgis api for JavaScript基础及控件学习
如何在ArcGIS中加载云南天地图WMTS服务？
heroyuan2011的博客
06-08 1622
一、打开云南省地理信息公共服务平台二、找到开发资源——本地服务资源三、主题分类包括，影像地图、电子地图、行政驻地、POI服务、矢量服务、注记服务等，时效性上影像最近更新到2023年3月 四、查看服务详情，打开服务URL五、打开WMTS链接六、找打下面的网址，就是ARCGIS中构建WMTS服务的网址七、在 ARCGIS中构建WMTS服务
ArcMap和ArcGIS Pro加载星图地球wmts数据服务
ghgfsasxda的博客
02-17 4386
中科星图加载
基于ArcGIS API for JavaScript加载百度各种类型切片地图
03-24
基于ArcGIS API for JavaScript加载百度各种类型切片地图，资源包括封装的BaiduLayer模块，示例页面。
ArcGIS API for JavaScript4.10加载高德地图
01-16
使用ArcGIS API for JavaScript4.10加载高德地图和高德影像，通过扩展BaseTileLayer来自定义GaodeMapLayer模块。
ArcGIS API for Javascript3加载天地图
12-21
利用ArcGIS API for Javascript3最新版本【3.23】加载天地图，包括矢量图、影像图、地形图，并包含标注图层。
ArcGIS API for JavaScript 4.22版 API+SDK
03-10
ArcGIS API for JavaScript用于构建高性能的WebGIS应用程序，同时结合现代网络技术和强大的地理空间功能，利用ArcGIS Online、ArcGIS Server发布的地图服务以及网络上的其他服务内容，使用户在web端能够进行应用程序...
【ArcGIS JS】ArcGIS API for JavaScript加载天地图
热门推荐
猴扯
12-17 1万+
关于ArcGIS调用天地图的方法，还有两篇博客可以参考，一个是esri针对SDK for Android，另一个是LZU-GIS扩展dojo。这里我在这两篇文章的基础上提供一种直接调用相关API的方法，基于ArcGIS API for JavaScript v3.18。 一、WMTS服务 WMTS服务即网络地图瓦片服务，不同于WMS、WFS、WCS可以简单一句url的GET请求调用一张地...
ArcGIS API for JS 加载geoserver发布的WMS服务
MLAY
02-21 8298
一、geoserver发布WMS服务 具体发布过程可参考我之前的博客：https://blog.csdn.net/qq_32492777/article/details/87715386 二、geoserver中打开地图服务 例如我的请求地址是：http://localhost:8686/geoserver/test/wms 三、ArcGIS API for JS 加载g...
ArcGIS打开山东天地图WMTS服务
Sdnu08gis的专栏
03-09 5958
1、在浏览器中打开山东天地图首页：山东省地理信息公共服务平台 2、进入资源中心，在左侧服务资源列表中选择影像地图，找到山东省影像地图，点击详细信息查看服务地址等信息 3、 详情页面最下面，点击查看能力文档 4、在浏览器地址栏复制能力文档地址 http://www.sdmap.gov.cn/tileservice/SDRasterPubMap?service=WMTS&request=GetCapabilities 5、 打开ArcMap，在Catalog中找到GIS Ser
arcgis api for js 4.x 加载另类wmts地图
08-07 1081
首先使用WebTileLayer类的createSubclass方法创建并重写一个TileLayer的图层类： var WMTSMeratorLayer2 = WebTileLayer.createSubclass([JSONSupport], { declaredClass: "WMTSMeratorLayer", normalizeCtorArgs: function (b, c) { return "string" === typeof b
用arcgis api for javascript写加载天地图的完整页面代码
02-22
可以参考以下示例代码实现加载天地图的完整页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>ArcGIS API for JavaScript 示例</title> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.16/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer" ], function (Map, MapView, WebTileLayer) { // 创建天地图WebTileLayer let tdLayer = new WebTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", subDomains: ["t0"] }); // 将图层添加到地图 let map = new Map({ basemap: { baseLayers: [tdLayer] } }); // 创建地图视图 let view = new MapView({ container: "viewDiv", map: map, center: [116.46, 39.92], zoom: 6 }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值