一文了解 gis 相关服务=》及前端地图服务相关总结

文章目录

• • 概要
  • OGC
  • 技术名词解释
  • [cesium 应用案例](#cesium 应用案例)
  • [openlayers 中应用实例](#openlayers 中应用实例)
  • • XYZ服务
    • OSM服务
    • WMS服务
    • WMTS服务
    • WFS服务
  • [mapbox 应用实例](#mapbox 应用实例)
  • • 矢量瓦片服务
    • 栅格瓦片服务
    • WMS服务
    • WFS服务
  • [leaflet 中 地图服务实例](#leaflet 中 地图服务实例)
  • • 加载OpenStreetMap瓦片图层
    • 加载自定义XYZ瓦片图层
    • 加载WMS服务图层
    • 加载WFS服务图层
    • [加载ArcGIS Vector Basemap图层](#加载ArcGIS Vector Basemap图层)
  • [arcgis for javascript 地图服务实例](#arcgis for javascript 地图服务实例)
  • • [加载ArcGIS Online地图服务](#加载ArcGIS Online地图服务)
    • 加载动态地图服务
    • 加载缓存地图服务
    • 加载WMS服务
    • 加载WMTS服务

概要

一、GIS行业基础知识

1. 概念

   • 地理信息系统（GIS）：是一种用于采集、存储、管理、分析和展示地理空间数据的系统。它将地理空间数据（如地形、地貌、土地利用、人口分布等）与属性数据（如建筑物的用途、道路的名称等）相结合，通过空间分析和建模，为资源管理、城市规划、环境监测等众多领域提供决策支持。例如，在城市规划中，GIS可以分析土地利用现状、交通流量等因素，帮助规划师确定最佳的土地开发区域和交通线路规划。
   • 空间数据：空间数据是GIS的核心。它包括矢量数据和栅格数据。矢量数据是由点、线、面等几何对象组成，例如地图上的城市边界（面）、道路（线）、建筑物位置（点）等。栅格数据则是像元矩阵，常用于表示连续的地理现象，如遥感影像中的地形高程、土地覆盖类型等。以土地覆盖分类为例，栅格数据的每个像元可以表示该区域是森林、农田还是城市建设用地等不同类型。
   • 地理坐标系和投影坐标系：地理坐标系是基于地球的经纬度来确定地球上点的位置，如WGS - 84是一种广泛使用的地理坐标系。而投影坐标系是将地球表面的经纬度坐标转换为平面坐标，以便在地图上进行显示和测量。例如，墨卡托投影是一种常用的投影方式，它在航海和网络地图中广泛应用，因为它能保持角度不变，方便导航，但会使高纬度地区的面积变形较大。

2. 实例应用

   • 资源管理方面：林业部门利用GIS管理森林资源。通过卫星遥感获取森林覆盖范围（栅格数据），结合实地调查的树木种类、胸径等属性数据（矢量数据），可以准确评估森林的蓄积量、生长状况等。例如，在森林火灾监测中，利用GIS可以实时监测火灾发生地点（通过卫星定位获取坐标），分析火势蔓延方向（根据地形、植被等空间数据进行模拟），为灭火决策提供支持。
   • 交通领域：交通管理部门使用GIS进行智能交通系统建设。例如，通过在道路上安装传感器获取交通流量数据（属性数据），结合道路的地理位置（矢量数据），可以分析交通拥堵情况，进行交通信号的智能调控。同时，在物流配送中，GIS可以根据送货地址的地理位置、道路状况等因素，规划最优的配送路线，提高配送效率。

二、常用的地图服务

1. 概念
   • 在线地图服务（如百度地图、高德地图）：这些是通过互联网提供地图浏览、导航、地点查询等功能的服务。它们基于大量的地理空间数据，利用云计算和网络技术，为用户提供便捷的地图应用。例如，用户可以在手机上使用这些应用查找附近的餐厅、酒店，或者获取从当前位置到目的地的导航路线。这些地图服务通常会定期更新数据，以保证地图的准确性和时效性。
   • Web GIS服务（如ArcGIS Online）：它是一种基于Web的GIS平台，提供了地图发布、共享和分析功能。用户可以在浏览器中访问和使用GIS功能，如创建自定义地图、进行空间分析等。对于企业和政府部门来说，Web GIS服务可以方便地将地理信息共享给不同的用户群体，例如，环保部门可以通过Web GIS服务发布空气质量监测数据，让公众可以在网页上查看污染分布情况。
2. 实例应用
   • 百度地图 ：
     • 出行导航：用户在城市中开车或步行时，百度地图可以根据用户的实时位置（通过手机的GPS定位），结合道路网络数据（矢量数据），规划最佳的行驶或步行路线。它还会考虑交通拥堵情况（通过与交通管理部门的数据共享或用户反馈），动态调整路线。例如，在上下班高峰期，会引导用户避开拥堵路段。
     • 生活服务：提供周边查询功能，比如查找附近的超市、银行、医院等。当用户搜索"附近的餐厅"时，百度地图会根据用户位置，在其地理数据库中查找附近符合条件的餐厅，并在地图上显示它们的位置和相关信息，如评分、菜系等。
   • ArcGIS Online ：
     • 城市规划：城市规划师可以利用ArcGIS Online发布城市土地利用现状地图，包括不同功能区（如商业区、住宅区、工业区）的分布情况。同时，他们可以在这个平台上进行空间分析，如评估某一区域的开发潜力，通过叠加地形、交通、基础设施等数据图层，计算出适合进行新的建设项目的区域。
     • 应急响应：在自然灾害发生时，应急管理部门可以通过ArcGIS Online快速发布受灾区域地图，包括洪水淹没范围、地震破坏区域等。同时，结合人口分布等数据，可以进行救援资源的分配和调度，确定需要优先救援的区域。

OGC

• OGC（Open Geospatial Consortium）协议：OGC 是一个国际非营利性组织，致力于制定地理空间信息（如地图数据、地球观测数据等）共享和互操作的标准规范。OGC 协议本质上是一系列的接口和编码规则，使得不同地理信息系统（GIS）软件、在线地图服务以及各种地理空间数据提供者之间能够更好地进行数据交换、共享和集成。
  这些协议涵盖了地理空间数据从获取、处理、传输到可视化展示等多个环节。例如，它规定了如何请求地理数据，数据应该以什么样的格式进行传输（如地理标记语言 - GML 格式），以及如何在不同的系统中对相同的数据进行正确的解读和展示。

技术名词解释

1. OGC联盟：非盈利国际标准组织，制定地理信息数据和服务标准，确保GIS软件和数据互操作，曾用名Open GIS Consortium，后更名为OGC。
2. WMS（Web地图服务）
   • 规范：利用地理空间数据制作地图，定义HTTP接口，支持GET和POST请求（多基于GET），可返回PNG、GIF、JPEG等栅格或SVG、WEB CGM等矢量形式地图。
   • 操作及参数
     • GetCapabilities：以xml文档返回服务元数据（如版本号、参数、图层信息等）。
     • GetMap：返回地图影像，参数有版本号、请求名称、图层、样式、坐标系统、包围盒、图片宽高、格式等，还有可选参数如图层样式文件URL、背景颜色、透明度等。
     • GetFeatureInfo（可选）：返回地图上特定要素信息。
     • DescribeLayer（可选）：图层描述信息。
     • GetLegendGraphic（可选）：获取图层图例图片。
3. WFS（Web矢量服务）
   • 规范：返回矢量级GML编码数据，支持对矢量的增删改查操作，通过OGC Filter构造查询条件，支持多种查询方式。
   • 操作
     • GetCapabilities：生成服务性能描述文档（XML）。
     • DescribeFeatureType：返回矢量结构描述文档（XML）。
     • GetFeature：获取矢量实例。
     • LockFeature：处理事务期间矢量类型实例上锁请求。
     • Transaction：编辑现有矢量类型（创建、更新、删除）。
4. WCS（Web栅格服务）
   • 规范：面向空间影像数据，将地理空间数据作为"栅格"或"覆盖"在网上交换。
   • 操作
     • GetCapabilities：返回描述服务和数据集的XML文档。
     • GetCoverage：在确定查询和数据获取方式后，用通用栅格格式返回地理位置值或属性。
     • DescribeCoverageType：请求覆盖层完整描述。
5. WPS（网络处理服务）：用于在Web上提供和执行地理空间处理的国际规范，GeoServer可通过插件支持，可降低数据处理复杂性、连接处理操作、开发可重用过程、集中处理流程和模型、利用服务器运算性能、方便公共使用复杂模型。
6. WMTS（Web地图瓦片服务）
   • 规范：OGC缓存技术标准，定义操作允许用户访问瓦片地图，支持RESTful访问，采用预定义图块方法发布地图，提升服务器伸缩性，降低载荷，但牺牲定制地图灵活性。
   • 操作
     • GetCapabilities：获取服务元信息。
     • GetTile：获取切片。
     • GetFeatureInfo（可选）：获取点选要素信息。
7. WMS-C（Web Mapping Service - Cached）：由OSGeo制定，目的是预先缓存数据提升地图请求速度，已被WMTS和TMS取代，基于其实现有TileCache，曾用参数如bbox和resolutions决定地图层级，后有软件改进为level/x/y参数。
8. TMS（切片地图服务规范）：OSGeo制定，操作允许用户访问切片地图，将切片存本地提升访问速度，支持修改坐标系，是纯RESTful服务，与WMTS本质类似遵循相同切片规则。
9. 常见服务对比
   • WMS：动态地图服务，实时切片，根据请求返回地图可视化结果，速度慢，GeoServer常用。
   • WMTS：预定义图块发布地图，提升服务速度，牺牲灵活性，如天地图使用。
   • WFS：返回纯地理数据，支持矢量事务操作。
   • WCS：面向空间影像数据交换。
   • WPS：提供和执行地理空间处理服务。
   • WMSC（WMS-C）：已被取代，曾用于预先缓存数据提升速度。
   • TMS：瓦片地图服务，与WMTS类似。常见的有WMS、WFS、WMTS、TMS。

cesium 应用案例

1. 理解Cesium中的地理服务框架
   • Cesium是一个用于创建三维地球和地图的JavaScript库。它通过ImageryProvider接口来加载各种地理影像服务。这个接口的不同实现类用于支持不同类型的地理服务，如ArcGisMapServerImageryProvider用于ArcGIS地图服务，BingMapsImageryProvider用于Bing地图服务等。对于自定义地理服务，主要是通过实现或扩展合适的ImageryProvider来完成数据的加载和展示。
2. 自定义瓦片地图服务（以自定义瓦片URL为例）
   • 使用UrlTemplateImageryProvider

     • 原理 ：UrlTemplateImageryProvider允许用户通过一个URL模板来加载瓦片地图。在这个模板中，{x}、{y}和{z}是变量，分别代表瓦片的X坐标、Y坐标和缩放级别。

     • 代码示例 ：

       let customTileLayer = new Cesium.UrlTemplateImageryProvider({
         url: "https://your-custom-tile-server-url/{z}/{x}/{y}.png",
         // 其他可选参数，如最小和最大缩放级别
         minimumLevel: 0,
         maximumLevel: 18
       });
       let viewer = new Cesium.Viewer('cesiumContainer');
       viewer.imageryLayers.addImageryProvider(customTileLayer);

     • 注意事项 ：

       • 确保自定义的URL模板正确，并且服务器能够正确响应瓦片请求。如果服务器返回的瓦片格式不是PNG等常见格式，可能需要指定fileExtension参数来匹配正确的格式。
       • 根据服务器的性能和数据范围，合理设置minimumLevel和maximumLevel参数，避免请求不存在的瓦片或者超出服务器处理能力的缩放级别。
3. 自定义WMS（Web Map Service）服务应用
   • 创建自定义ImageryProvider（如果需要）或直接使用WebMapServiceImageryProvider进行配置

     • 原理 ：如果自定义的WMS服务与标准的WMS服务有一些差异，可能需要创建一个继承自ImageryProvider的类来处理特殊情况。但如果服务比较标准，可以直接使用Cesium.WebMapServiceImageryProvider。这个类通过发送WMS标准请求（如GetMap）来获取地图图像。

     • 代码示例 ：

       var wmsLayer = new Cesium.WebMapServiceImageryProvider({
         url: 'http://your-custom-wms-server-url',
         layers: 'your-custom-layers',
         format: 'image/png',
         // 可以设置代理，如果需要的话
         proxy: new Cesium.DefaultProxy('/proxy/')
       });
       var viewer = new Cesium.Viewer('cesiumContainer');
       viewer.imageryLayers.addImageryProvider(wmsLayer);

     • 注意事项 ：

       • 正确配置layers参数，确保请求的是所需的图层。不同的WMS服务器可能对图层命名和组织方式有所不同，需要根据实际情况设置。
       • format参数应与服务器返回的图像格式一致。如果服务器支持多种格式，可以根据性能和兼容性选择合适的格式。
       • 如果遇到跨域问题，可能需要设置合适的代理。Cesium.DefaultProxy可以用于简单的代理配置，但在实际应用中，可能需要根据服务器环境和安全策略进行更复杂的代理设置。
4. 自定义WFS（Web Feature Service）服务与Cesium的集成（间接方式）
   • 原理 ：Cesium本身主要用于地图影像和地形的展示，没有直接支持WFS的功能用于显示矢量数据。但是可以通过将WFS数据转换为合适的格式（如GeoJSON），然后使用Cesium的DataSource来加载和显示矢量数据。
   • 步骤和代码示例 ：

     • 获取并转换WFS数据 ：

       • 首先，需要使用JavaScript的fetch或其他HTTP请求库从WFS服务器获取数据。假设服务器返回的是GML格式的数据，需要将其转换为GeoJSON格式。

       async function getWfsData() {
         let response = await fetch('http://your-custom-wfs-server-url?request=GetFeature&service=WFS&version=2.0.0&typename=your-feature-type');
         let gmlData = await response.text();
         // 这里需要一个GML到GeoJSON的转换函数，假设为gmlToGeoJson
         let geoJsonData = gmlToGeoJson(gmlData);
         return geoJsonData;
       }

     • 在Cesium中加载矢量数据 ：

       getWfsData().then((geoJsonData) => {
         let dataSource = new Cesium.GeoJsonDataSource();
         dataSource.load(geoJsonData).then(() => {
           let viewer = new Cesium.Viewer('cesiumContainer');
           viewer.dataSources.add(dataSource);
         });
       });

     • 注意事项 ：

       • GML到GeoJSON的转换可能比较复杂，需要根据GML的具体结构和GeoJSON的规范进行准确的转换。可以使用现有的转换库来简化这个过程。
       • 当加载大量矢量数据时，可能会影响性能。需要考虑对数据进行简化（如降低精度、减少要素数量）或者采用合适的加载策略（如分层加载、按需加载）来提高性能。
5. 自定义WCS（Web Coverage Service）服务应用（相对复杂）
   • 原理：WCS主要用于提供栅格数据的原始值，在Cesium中应用需要将其转换为合适的影像格式并正确地进行地理定位。这可能涉及到对WCS返回数据的处理和与Cesium的地形或影像系统的集成。
   • 步骤和代码示例（简化概念） ：

     • 获取和处理WCS数据（假设获取高程数据） ：

       async function getWcsElevationData() {
         let url = 'http://your-custom-wcs-server-url?service=WCS&request=GetCoverage&version=2.0.1&coverage=your-elevation-coverage';
         let response = await fetch(url);
         let wcsData = await response.arrayBuffer();
         // 这里需要对WCS数据进行处理，如解析格式、转换为合适的高程数据格式
         let processedElevationData = processWcsElevationData(wcsData);
         return processedElevationData;
       }

     • 在Cesium中应用高程数据（创建地形提供者） ：

       getWcsElevationData().then((elevationData) => {
         let terrainProvider = new Cesium.HeightmapTerrainProvider({
           url: Cesium.createDataUri({
             buffer: elevationData,
             format: 'binary'
           }),
           // 其他地形参数，如水平和垂直精度
           horizontalScale: 1,
           verticalScale: 1
         });
         let viewer = new Cesium.Viewer('cesiumContainer');
         viewer.terrainProvider = terrainProvider;
       });

     • 注意事项 ：

       • 处理WCS数据需要深入了解WCS返回的格式（如NetCDF、GRIB等）和数据结构。不同的WCS服务器提供的数据格式可能不同，需要根据实际情况进行解析和转换。
       • 在创建地形提供者时，要根据数据的精度和范围合理设置horizontalScale和verticalScale等参数，以确保地形的正确显示。同时，要注意数据的坐标系统和Cesium的坐标系统之间的匹配，可能需要进行坐标转换。

openlayers 中应用实例

XYZ服务

import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

// 创建Stamen Maps图层
const stamenLayer = new TileLayer({
  source: new XYZ({
    url: "https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png"
  })
});

OSM服务

import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

// 创建OpenStreetMap图层
const osmLayer = new TileLayer({
  source: new OSM()
});

WMS服务

import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";

// 创建WMS图层
const wmsLayer = new TileLayer({
  source: new TileWMS({
    url: "https://your-geoserver-url/wms",
    params: {
      LAYERS: "your-layer-name",
      TILED: true
    }
  })
});

WMTS服务

import TileLayer from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get as getProjection } from "ol/proj";
import { getWidth, getTopLeft } from "ol/extent";

const projection = getProjection("EPSG:900913");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}
const tileGrid = new WMTSTileGrid({
  origin: getTopLeft(projectionExtent),
  resolutions: resolutions,
  matrixIds: matrixIds
});

const tiandituLayer = new TileLayer({
  source: new WMTS({
    url: "http://t{s}.tianditu.com/vec_c/wmts",
    layer: "vec",
    matrixSet: "c",
    format: "tiles",
    tileGrid: tileGrid,
    style: "default",
    wrapX: true
  })
});

WFS服务

import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';

const vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: 'https://your-geoserver-url/wfs?service=wfs&version=1.1.0&request=getfeature&typename=your-feature-type&outputformat=application/json&srsname=EPSG:4326',
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});

mapbox 应用实例

矢量瓦片服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-73.985, 40.748],
  zoom: 10
});

map.on('load', function () {
  map.addSource('my_vector_source', {
    type: 'vector',
    url: 'mapbox://your-username.tileset-id'
  });

  map.addLayer({
    id: 'my_vector_layer',
    type: 'fill',
    source: 'my_vector_source',
    'source-layer': 'layer-name',
    paint: {
      'fill-color': '#008000',
      'fill-opacity': 0.5
    }
  });
});

栅格瓦片服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [-73.985, 40.748],
  zoom: 10
});

map.on('load', function () {
  map.addSource('my_raster_source', {
    type: 'raster',
    url: 'https://your-raster-tile-service-url/{z}/{x}/{y}.png',
    tileSize: 256
  });

  map.addLayer({
    id: 'my_raster_layer',
    type: 'raster',
    source: 'my_raster_source'
  });
});

WMS服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: {
    "version": 8,
    "sources": {
      "wms-source": {
        "type": "raster",
        "tiles": [
          "https://your-wms-server-url?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=your-layer-name&STYLES=&SRS=EPSG:3857&BBOX={bbox-epsg-3857}&WIDTH=256&HEIGHT=256&FORMAT=image/png"
        ],
        "tileSize": 256
      }
    },
    "layers": [
      {
        "id": "wms-layer",
        "type": "raster",
        "source": "wms-source"
      }
    ]
  },
  center: [-73.985, 40.748],
  zoom: 10
});

WFS服务

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-73.985, 40.748],
  zoom: 10
});

map.on('load', function () {
  // 使用fetch或其他HTTP请求库获取WFS数据
  fetch('https://your-wfs-server-url?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=your-feature-type&SRSNAME=EPSG:4326&OUTPUTFORMAT=application/json')
   .then(response => response.json())
   .then(data => {
      // 将WFS数据转换为GeoJSON格式
      var geoJSONData = {
        type: 'FeatureCollection',
        features: data.features
      };

      map.addSource('wfs-source', {
        type: 'geojson',
        data: geoJSONData
      });

      map.addLayer({
        id: 'wfs-layer',
        type: 'circle',
        source: 'wfs-source',
        paint: {
          'circle-radius': 5,
          'circle-color': '#FF0000'
        }
      });
    });
});

leaflet 中 地图服务实例

加载OpenStreetMap瓦片图层

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

加载自定义XYZ瓦片图层

var map = L.map('map').setView([37.7749, -122.4194], 14);
L.tileLayer('https://your-tile-server-url/{z}/{x}/{y}.png', {
  attribution: 'Your Attribution',
  maxZoom: 18
}).addTo(map);

加载WMS服务图层

var map = L.map('map').setView([40.7128, -74.0060], 10);
var wmsLayer = L.tileLayer.wms('https://your-wms-server-url', {
  layers: 'your-layer-name',
  format: 'image/png',
  transparent: true,
  attribution: 'WMS Layer Attribution'
});
wmsLayer.addTo(map);

加载WFS服务图层

var map = L.map('map').setView([37, 104], 3);
function loadWFS(url, layer, callback, crs='EPSG:4326', options={}) {
  const params = {
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typeName: layer,
    outputFormat: 'application/json',
    srsName: crs
  };
  const url_str = url + L.Util.getParamString(params, url);
  $.ajax({
    url: url_str,
    dataType: 'json',
    success: function (geojson) {
      var wfsLayer = L.geoJson(geojson, options);
      callback(wfsLayer);
    }
  });
}

loadWFS('http://localhost:8080/geoserver/rest_workspace/ows', 'china_province', function (layer) {
  layer.addTo(map);
});

加载ArcGIS Vector Basemap图层

const apiKey = "your_api_key";
const basemapEnum = "arcgis/navigation";
const startCoords = [-122.4194, 37.7749];
const zoomLevel = 14;

const map = L.map('map', {
  minZoom: 2
}).setView(startCoords, 6);

const tileLayer = L.esri.vector.vectorBasemapLayer(basemapEnum, {
  apiKey: apiKey
});
tileLayer.addTo(map);

arcgis for javascript 地图服务实例

加载ArcGIS Online地图服务

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-122.4194, 37.7749],
    zoom: 12
  });
});

加载动态地图服务

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/ArcGISDynamicMapServiceLayer"
], function(Map, MapView, ArcGISDynamicMapServiceLayer) {
  var map = new Map({
    basemap: "topo"
  });

  var dynamicLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");
  map.addLayer(dynamicLayer);

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-98.5795, 39.8282],
    zoom: 4
  });
});

加载缓存地图服务

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/ArcGISTiledMapServiceLayer"
], function(Map, MapView, ArcGISTiledMapServiceLayer) {
  var map = new Map({
    basemap: "gray"
  });

  var tiledLayer = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
  map.addLayer(tiledLayer);

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [0, 0],
    zoom: 2
  });
});

加载WMS服务

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/WMSLayer"
], function(Map, MapView, WMSLayer) {
  var map = new Map({
    basemap: "osm"
  });

  var wmsLayer = new WMSLayer("http://localhost:8080/geoserver/wms", {
    format: "png",
    resourceInfo: {
      copyright: "GeoServer",
      description: "Test WMS",
      extent: new esri.geometry.Extent(-180, -90, 180, 90, { wkid: 4326 }),
      featureInfoFormat: "text/html",
      layerInfos: [new WMSLayerInfo({ name: "test_layer", title: "Test Layer", queryable: true, showPopup: true })],
      spatialReferences: [4326],
      version: "1.1.1"
    },
    version: "1.1.1",
    visibleLayers: ["test_layer"]
  });

  map.addLayer(wmsLayer);

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [0, 0],
    zoom: 2
  });
});

加载WMTS服务

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/WMTSLayer"
], function(Map, MapView, WMTSLayer) {
  var map = new Map({
    basemap: "satellite"
  });

  var wmtsLayer = new WMTSLayer({
    url: "http://your-wmts-server-url/ogc/wmts",
    layer: "your_layer_name",
    style: "default",
    format: "image/png",
    tileMatrixSet: "your_tile_matrix_set",
    showLegend: true
  });

  map.addLayer(wmtsLayer);

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [0, 0],
    zoom: 2
  });
});