前言

在工作中，需要在ArcGIS API for JavaScript中加载超图服务，因为超图的rest服务只可以用于Leaflet 、openlayers3 (with MVT) 、MapboxGL 、Tianditu.com，在使用ArcGIS API是无法加载超图的rest服务的（我认知的）。
    在超图的superMap iServer中可以发布符合OGC规则的WMS服务，这时，我们可以通ArcGIS API加载WMS服务的形式加载超图服务。

加载WMS服务要点

visibleLayers：显示图层
extent：加载范围
spatialReference：控件参考
version：WMS服务版本号

实现效果

实现代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with WMS</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>

<script>
var map;
require([
'esri/map', 'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
'dojo/parser', 'dojo/domReady!'
], function (Map, WMSLayer, WMSLayerInfo, Extent, parser) {
parser.parse();

map = new Map('map');
var layer1 = new WMSLayerInfo({
name: 'China',
title: 'Rivers',
spatialReferences: [4326]
});
var resourceInfo = {
extent: new Extent(114, 34, 117, 60, { wkid: 4326 }),
layerInfos: [layer1],
version: "1.1.1"
};

var wmsLayer = new WMSLayer('http://www.supermap.com.cn:8090/iserver/services/map-china400/wms111/China', {
resourceInfo: resourceInfo,
visibleLayers: ['China']
});
map.addLayers([wmsLayer]);

});
</script>
</head>

<body>
<div id="map"> </div>
</body>
</html>
---------------------
作者：idomyway
来源：CSDN
原文：https://blog.csdn.net/idomyway/article/details/84863032
版权声明：本文为博主原创文章，转载请附上博文链接！

（十九）ArcGIS JS 加载WMS服务（超图示例）的更多相关文章

  1. （二十）ArcGIS JS 加载WMTS服务（超图示例）

    前言 在前一篇中说到我们可以通过加载WMS服务解决用ArcGIS API加载超图发布的服务,但是WMS服务在加载效率上是低于切片服务的,加上超图的IServer,无力吐槽,所以,在加载速度的要求下,切 ...

  2. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  3. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  4. arcgis js之调用wms服务

    arcgis js之调用wms服务 定义: export const tdtlayer = async () => { let WMSLayer = await arcgisPackage.WM ...

  5. PIE SDK加载WMS服务数据

    1.   功能简介 WMS服务,WMS是OGC标准中比较简单也是比较重要的标准之一.它全称是“Web Map Service”(网络地图服务):利用具有地理空间位置信息的数据制作地图.其中将地图定义为 ...

  6. Vue（二十九）页面加载过慢问题

    1.使用按需加载 2.路由懒加载

  7. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  8. cesium加载WFS服务(GeoServer发布)

    需求: 为了便于前端渲染数据,自定义图层渲染. 思路: 获取地图服务中的要素进行渲染. 工具: GeoServer 2.6.4,cesium, 思路有了就开始找资料写代码,cesium有接口可以加载W ...

  9. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

随机推荐

  1. 微信公众号支付回调页面处理asp.net

    1.在商家微信商户通中配置回调url 2.在提交订单时传入的回调页面中获取支付成功后或支付失败后的参数,对订单进行处理 public partial class gzpayCallback : Sys ...

  2. [转]Reporting Service部署之访问权限

    本文转自:https://www.cnblogs.com/lonelyxmas/p/4112638.html 原文:Reporting Service部署之访问权限 SQL Server Report ...

  3. 15天学习MVC后的小结(分享经历与想法)

    学习MVC已经有半个月,看了看日历,刚好半个月.分享了好几篇练习的博文:一,<创建第一个MVC应用程序> http://www.cnblogs.com/insus/p/3358560.ht ...

  4. 深入理解读写锁ReentrantReadWriteLock

    1.读写锁的介绍 在并发场景中用于解决线程安全的问题,我们几乎会提供高频率的使用到独占式锁,通常使用java提供的关键字synchronized(关于synchronized可以看这篇文章)或者con ...

  5. Java基础——网络编程（一）

    本文主要记录网络编程的一些基础知识,学了前班部分,对专业术语有些蒙,但是,收货也是很多很多的.观察了自己计算机的进程,查找其他网络地址的IP,对互联网的层次关系有了更深一步的了解.下面多是概念的摘录, ...

  6. 了解java虚拟机—堆相关参数设置（3）

    堆相关配置 -Xmx 最大堆空间 -Xms 初始堆空间大小,如果初始堆空间耗尽,JVM会对堆空间扩容,其扩展上限为最大堆空间.通常-Xms与-Xmx设置为同样大小,避免扩容造成性能损耗. -Xmn 设 ...

  7. EF DataFirst修改数据类型

    在做软件的时候我们可能会遇到这样的问题,就是在使用EF的时候,有时候精度不一样, 我们用整数来计算肯定是比浮点数来得快的,但我在MySQL里面存储的数据类型是decimal的,我生成EF后, 里面的数 ...

  8. 互联网自治域间IP源地址验证技术综述

    一.文章信息 作者:贾溢豪,任罡,刘莹 单位:清华大学 来源:软件学报 时间:2017年 二.基于加密.签名及标记信息 2.1 技术原理 采用端到端验证的设计结构,其中以密钥协商最为常见.通信双方在事 ...

  9. python内置函数每日一学 -- abs()

    abs(x) 官方文档解释: Return the absolute value of a number. The argument may be an integer or a floating p ...

  10. Angular echarts图表自适应屏幕指令

    关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...