ArcGis常用服务介绍及Arcgis,Openlayers,Leaflet加载

1 ArcGis常用服务介绍

1.1 地图服务 (Map Service / MapServer)

最常见的服务类型，通常以 /MapServer 结尾。可以把它看作是一张能够通过网络访问的电子地图。用户通过平移、缩放等操作来查看地图。

查看动态地图：服务器根据请求实时绘制地图图片并返回。
使用预生成切片：对于访问量大的底图，可以预先渲染成图片切片（/tile），以提升显示速度。
查询与识别：支持点击查询要素属性、按条件查找等操作。
提供网络分析：如果地图中包含网络数据，可以启用路径规划等功能。

1.2 要素服务 (Feature Service / FeatureServer)

一般是通过 POST 请求查询的服务，通常以 /FeatureServer 结尾。主要暴露地图背后的矢量数据（点、线、面），可以像操作本地数据库一样通过网络操作这些数据。

查询要素：支持强大的属性查询 (where) 和空间查询，并返回要素的几何图形和属性。
在线编辑：支持对要素进行增、删、改操作，实现数据的协同编辑。
数据同步：支持创建数据的复本，供移动端在离线环境下编辑，网络恢复后再同步到服务器。

1.3 影像服务 (Image Service / ImageServer)

一种专门用于共享和管理栅格数据（如卫星影像、高程数据）的服务。

动态处理：在访问时实时对影像进行动态镶嵌、裁剪、正射校正、重投影等处理，无需生成多份数据。
高效浏览：通过动态降低分辨率，实现海量影像数据的快速浏览。
影像分析：支持影像分类、变化检测等高级分析功能。

2 使用ArcGIS，Openlayers，Leaflet加载ArcGis不同服务

库名	版本
ArcGIS Maps SDK for JavaScript	5.0
Openlayers	10.8.0
Leaflet	1.9.4

ArcGis在线地图服务：https://server.arcgisonline.com/arcgis/rest/services

Esri 示例服务器：https://sampleserver6.arcgisonline.com/arcgis/rest/services

可以看到提供了许多服务，其中包括不少地图服务，要素服务，影像服务：

2.1 加载ArcGis地图服务

2.1.1 加载切片

进入其中一个地图服务中https://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer,可以看到如下信息：

其中 Single Fused Map Cache: true 和存在Tile Info属性，表示该服务有缓存切片，可以使用

使用ArcGIS Maps SDK for JavaScript的TileLayer加载切片
使用openlayers的TileLayer和XYZ源方式加载切片
使用leaflet的L.esri.tiledMapLayer（Esri官方的esri-leaflet包）加载切片

2.1.2加载动态地图

使用ArcGIS Maps SDK for JavaScript的MapImageLayer加载
使用openlayers的ImageLayer和ImageArcGISRest源方式加载
使用leaflet的L.esri.dynamicMapLayer（Esri官方的esri-leaflet包）加载

2.2 加载ArcGis要素服务

使用ArcGIS Maps SDK for JavaScript的FeatureLayer加载
使用openlayers的VectorLayer和Vector source方式加载
使用leaflet的L.esri.featureLayer（Esri官方的esri-leaflet包）加载

2.3 加载ArcGis影像服务

使用arcgis javascript api的FeatureLayer加载
使用openlayers的VectorLayer和Vector source方式加载
使用leaflet的L.esri.featureLayer（Esri官方的esri-leaflet包）加载

2.4 总结对比

服务类型	ArcGIS	OpenLayers	Leaflet + Esri Leaflet
地图切片服务 (预缓存)	TileLayer	TileLayer + XyzSource(如果这里使用TileArcGISRest，需要服务支持/export)	L.esri.tiledMapLayer
动态地图服务 (实时渲染)	MapImageLayer	ImageLayer + ImageArcGISRest	L.esri.dynamicMapLayer
要素服务	FeatureLayer	VectorLayer + VectorSource + EsriJSON	L.esri.featureLayer
影像服务	ImageryLayer	ImageLayer + ImageArcGISRest	L.esri.imageMapLayer

3 代码

ArcGis

javascript 复制代码

  // 使用推荐的动态导入方式
  const [Map, MapView, TileLayer, MapImageLayer, FeatureLayer, ImageryLayer] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js",
  "@arcgis/core/layers/TileLayer.js",
  "@arcgis/core/layers/MapImageLayer.js",
  "@arcgis/core/layers/FeatureLayer.js",
  "@arcgis/core/layers/ImageryLayer.js"
  ]);
  const map = new Map({
  basemap: "topo-vector", // 设置底图
  layers: [
  // 1. 地图切片服务 (预缓存)
  new TileLayer({
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
  }),
  // 2. 动态地图服务 (实时渲染)
  new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
  sublayers: [{ id: 0, visible: true }] // 可选：控制子图层可见性[reference:12]
  }),
  // 3. 要素服务
  new FeatureLayer({
  url: "https://services3.arcgis.com/xxxx/arcgis/rest/services/Parks/FeatureServer/0"
  }),
  // 4. 影像服务
  new ImageryLayer({
  url: "https://landsat2.arcgis.com/arcgis/rest/services/Landsat_8/ImageServer"
  })
  ]
  });
  const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-118.805, 34.027],
  zoom: 13
  });

Openlayers

javascript 复制代码

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import ImageLayer from 'ol/layer/Image';
import VectorLayer from 'ol/layer/Vector';
import TileArcGISRest from 'ol/source/TileArcGISRest';
import XYZ from 'ol/source/XYZ';
import ImageArcGISRest from 'ol/source/ImageArcGISRest';
import VectorSource from 'ol/source/Vector';
import EsriJSON from 'ol/format/EsriJSON';

const map = new Map({
  target: 'map',
  layers: [
    // 1. 地图切片服务 (预缓存)
    new TileLayer({
      source: new XYZ({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
      })
      //source: new TileArcGISRest({如果使用TileArcGISRest，需要服务支持导出/export才可以请求成功
      //  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer'
      //})
    }),
    // 2. 动态地图服务 (实时渲染)
    new ImageLayer({
      source: new ImageArcGISRest({
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
        params: { 'LAYERS': 'show:0,1' } // 可选：控制显示哪些子图层[reference:13]
      })
    }),
    // 3. 要素服务
    new VectorLayer({
      source: new VectorSource({
        format: new EsriJSON(),
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=json',
        strategy: bbox // 可选：按视图范围加载策略[reference:14]
      })
    }),
    // 4. 影像服务 (与动态地图服务用法相同)
    new ImageLayer({
      source: new ImageArcGISRest({
        url: 'https://landsat2.arcgis.com/arcgis/rest/services/Landsat_8/ImageServer'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

Leaflet

javascript 复制代码

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@3.0.11/dist/esri-leaflet.js"></script>

<div id="map" style="height: 500px;"></div>

<script>
  const map = L.map('map').setView([0, 0], 2);

  // 1. 地图切片服务 (预缓存)
  L.esri.tiledMapLayer({
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
  }).addTo(map);

  // 2. 动态地图服务 (实时渲染)
  L.esri.dynamicMapLayer({
    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
    layers: [0, 1] // 可选：控制显示哪些子图层[reference:15]
  }).addTo(map);

  // 3. 要素服务
  L.esri.featureLayer({
    url: "https://services3.arcgis.com/xxxx/arcgis/rest/services/Parks/FeatureServer/0"
  }).addTo(map);

  // 4. 影像服务
  L.esri.imageMapLayer({
    url: "https://landsat2.arcgis.com/arcgis/rest/services/Landsat_8/ImageServer",
    opacity: 0.8 // 可选：设置透明度[reference:16]
  }).addTo(map);
</script>