OpenLayers调用arcgis server发布的地图服务

本文介绍了两种调用ArcGIS Server地图服务的方法:REST和WMS。详细展示了如何配置OpenLayers来显示地图服务,并指出了地图投影设置的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有两种方式可以调用arcgis server发布的地图服务,一种是rest,一种是wms。 
地图的投影为900913,arcgis server为10.0版本,地图服务的空间参考为3857。
 
与Google Map相对应的ArcGis投影文件:

众所周知,Google Map的投影参考为"WGS 84 Web墨卡托",定义为 EPSG:900913 或者 EPSG:3857 (EPSG:3785)。
与此相对应的ArcGis的投影坐标系名称为:WGS 1984 Web Mercator。ArcEngine 下,代号为"102113"。

如果openlayers需要调用arcgis server的地图,需要做相应的坐标转换。

采用在openlayers客户端重投影方式设为102113。

 
ArcGIS93Rest方式:
 1 var layer = new OpenLayers.Layer.ArcGIS93Rest(
 2                  "地理单元动物种类分布图",
 3                  "http://ws02/ArcGIS/rest/services/cgcxdldydwzl/MapServer/export",
 4                  {
 5                      layers: "show:0,1,2,3",
 6                      TRANSPARENT: true
 7                  },
 8                 {
 9                      isBaseLayer:false,
10                      visibility: true,
11                      projection: 'EPSG:102113',
12                      format:"image/png"
13                }
14  );
15 this.map.addLayer(layer);

 

WMS方式:
1 var layer = new OpenLayers.Layer.WMS("地理单元动物种类分布图", "http://ws02/arcgis/services/cgcxdldydwzl/MapServer/WMSServer?",
{
2 layers : "0,1,2,3", 3 format : "image/png", 4 transparent : "true" 5 },
{
6 isBaseLayer : false, 7 singleTile : false, 8 projection: new OpenLayers.Projection("EPSG:102113"), 9 });
10 this.map.addLayer(layer);

 








转载于:https://www.cnblogs.com/janehlp/p/4443921.html

<think>好的,我现在要解决用户的问题:如何在HTML网页中集成并显示由ArcGIS Server发布的WMS地图服务。用户可能对前端开发有一定了解,但可能对ArcGIS服务集成不太熟悉。我需要逐步引导他们完成整个过程,同时确保引用相关的参考资料。 首先,我需要回忆一下调用WMS服务的基本步骤。通常,这涉及到使用JavaScript库,比如OpenLayers或Leaflet。根据引用[1]中提到使用WMTS服务的URL结构,但用户问的是WMS,不过结构可能类似。需要确认ArcGIS Server的WMS服务的URL格式是否正确,可能类似于http://服务器地址/arcgis/services/服务名/MapServer/WMSServer。 接下来,用户需要在HTML中引入合适的地图库。引用[3]提到了在layers标签下添加arcgis切片图层信息,但这里应该使用WMS而不是切片。可能需要使用OpenLayers,因为引用[1]和引用[5]提到了OpenLayersArcGIS API的结合。 然后,配置WMS图层参数是关键。根据引用[2],需要填写坐标系如EPSG:4326,以及边框和经纬度范围。这些参数在初始化图层时必须正确设置,否则地图可能无法显示。 另外,引用[4]提到图层名称的问题,如果请求不到服务,需要检查layers参数是否正确。例如,ArcGIS发布的WMS可能有不同的图层命名规则,可能需要通过查看服务的GetCapabilities文档来确认正确的图层名称。 可能遇到的问题包括跨域问题,这时候需要在ArcGIS Server中启用CORS,或者配置代理。此外,网络请求是否成功可以通过浏览器的开发者工具查看,如引用[4]所述。 现在,我需要整理步骤:首先引入OpenLayers库,然后创建地图容器,配置WMS图层参数,包括URL、版本、图层名称、格式、坐标系等,最后初始化地图并添加图层。同时,要提醒用户检查图层名称和网络请求,确保服务可用。 还要考虑是否需要添加其他参数,比如透明度或样式。最后,提供示例代码,并指出可能的问题排查点,比如检查控制台日志,确认服务URL正确,以及图层是否存在。 总结,整个流程需要分步骤说明,结合代码示例,引用相关的引用资料,并给出常见问题解决方法,帮助用户顺利完成集成。</think>要在HTML网页中集成ArcGIS Server发布的WMS地图服务,可以通过以下步骤实现: ### 步骤说明 1. **引入地图库** 使用OpenLayers或Leaflet等开源库,这里以OpenLayers为例: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> </head> ``` 2. **创建地图容器** 在HTML中添加承载地图的`div`元素: ```html <body> <div id="map" style="width: 100%; height: 600px;"></div> </body> ``` 3. **配置WMS服务参数** 根据ArcGIS Server的WMS服务元数据设置参数(需提前获取服务的`GetCapabilities`文档): ```javascript const wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://<ArcGIS服务器地址>/arcgis/services/<服务名称>/MapServer/WMSServer', params: { 'LAYERS': '0', // 图层名称,需根据服务配置调整[^4] 'VERSION': '1.3.0', // WMS协议版本 'FORMAT': 'image/png', // 图像格式 'CRS': 'EPSG:4326' // 坐标系类型[^2] }, serverType: 'mapserver' // 指定服务类型 }) }); ``` 4. **初始化地图并添加图层** 设置地图视图中心点和缩放级别: ```javascript const map = new ol.Map({ target: 'map', layers: [wmsLayer], view: new ol.View({ center: ol.proj.fromLonLat([120.3, 31.5]), // 无锡市经纬度示例 zoom: 10 }) }); ``` ### 注意事项 - **服务验证** 访问`http://<服务器地址>/arcgis/services?t=json`确认服务列表,通过`GetCapabilities`请求获取图层详细信息 - **跨域问题** 若出现CORS错误,需在ArcGIS Server的`crossdomain.xml`中添加域名白名单 - **坐标系匹配** 确保地图视图的投影(如`ol.View`中的`projection`参数)与WMS服务的`CRS`声明一致[^2] ### 完整代码示例 ```html <!DOCTYPE html> <html> <head> <title>ArcGIS WMS集成示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> </head> <body> <div id="map" style="width: 100%; height: 600px;"></div> <script> const wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://gis.example.com/arcgis/services/UrbanMap/MapServer/WMSServer', params: {'LAYERS': '0', 'VERSION': '1.3.0', 'CRS': 'EPSG:4326'}, serverType: 'mapserver' }) }); const map = new ol.Map({ target: 'map', layers: [wmsLayer], view: new ol.View({ center: ol.proj.fromLonLat([120.3, 31.5]), zoom: 10 }) }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值