openlayers加载arcgis发布的OGCWMS服务

共5个文件

js：3个

html：1个

css：1个

需积分: 50 61 浏览量 2018-01-09 23:16:48 上传评论收藏 687KB ZIP 举报

OpenLayers 是一个流行的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源和图层类型，包括从不同的Web地图服务（WMS）获取地图图像。ArcGIS是Esri公司开发的全面的地理信息系统，它能够发布OGC（开放地理空间联盟）标准的WMS服务。在这个主题中，我们将深入探讨如何使用OpenLayers来加载由ArcGIS发布的WMS服务。 **OGC WMS服务** OGC Web Map Service（WMS）是一种标准协议，允许客户端（如OpenLayers）请求服务器（如ArcGIS Server）生成地理空间数据的图像。WMS服务通常用于显示地图，但不支持交互式编辑或查询数据。服务返回的图像可以叠加在其他图层上，创建复杂的地图展示。 **ArcGIS与WMS** ArcGIS Server 可以配置为提供WMS服务，这使得非ArcGIS用户也能通过遵守OGC标准的客户端访问地图数据。ArcGIS发布WMS服务时，会将内部的GIS图层转换为符合WMS规范的格式，供外部应用消费。 **加载WMS服务到OpenLayers** 1. **创建地图对象**：我们需要创建一个OpenLayers.Map对象，设置地图的基本属性，如容器ID、投影和初始视图。 ```javascript var map = new OpenLayers.Map('mapDiv', { projection: 'EPSG:4326', displayProjection: 'EPSG:3857', maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), units: 'm' }); ``` 2. **创建WMS图层**：接着，我们需要定义一个WMS图层，提供服务URL、图层名和一些其他参数。 ```javascript var wmsLayer = new OpenLayers.Layer.WMS( "ArcGIS WMS", "http://your_arcgis_server/wms", { layers: 'your_layer_name', format: 'image/png' }, { isBaseLayer: false, transparent: true } ); ``` 这里，`your_arcgis_server/wms`是ArcGIS Server提供的WMS服务URL，`your_layer_name`是你想加载的具体图层名。 3. **添加图层到地图**：将WMS图层添加到地图中。 ```javascript map.addLayer(wmsLayer); ``` 4. **设置初始中心和缩放级别**：为了显示地图，我们需要指定初始的中心点和缩放级别。 ```javascript var center = new OpenLayers.LonLat(-74.0060, 40.7128).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); map.setCenter(center, 10); ``` **进阶功能** 除了基本的加载WMS服务，OpenLayers还提供了许多高级特性，如图层透明度控制、图层切换、动态裁剪等。例如，可以通过监听图层事件来改变图层的透明度： ```javascript wmsLayer.events.register('visibilitychanged', wmsLayer, function() { var opacity = wmsLayer.getOpacity(); // 更新图层透明度的UI或其他逻辑 }); ``` 此外，OpenLayers支持多个WMS图层叠加，你可以根据需要添加更多来自不同服务的图层。通过OpenLayers加载ArcGIS发布的OGC WMS服务，可以让非ArcGIS用户利用丰富的ArcGIS地图数据，实现跨平台的地图应用。理解这些概念和实践操作，对于构建基于Web的地理信息系统至关重要。

资源推荐

资源详情

资源评论

收起资源包目录

learn.zip （5个子文件）

learn

css

jquery-1.11.3.js 278KB

v4.6.3-dist

ol-debug.js 2.56MB

ol.js 529KB

ol.css 4KB

index.html 2KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="js/v4.6.3-dist/ol.css" rel="stylesheet" /> <script src="js/v4.6.3-dist/ol-debug.js"></script> <script src="js/jquery-1.11.3.js"></script> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"> </div> <script type="text/javascript"> var map; $(function () { var format = 'image/png'; var projection = new ol.proj.Projection({ code: 'EPSG:2382', units: 'm', axisOrientation: 'neu', global: false }); var arcgiswmschina = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://222.178.203.72:19005/whst/63/=knbZkgnrs95332//arcgis/services/chinademo2/MapServer/WMSServer', params: { 'FORMAT': format, 'VERSION': '1.3.0', STYLES: '', LAYERS: '0', } }) }); map = new ol.Map({ target: 'map', layers: [ arcgiswmschina, ], view: new ol.View({ projection: projection }) }); var bounds = [540422.5339000002, 3008919.1028000005, 554519.9114999996, 3019022.618099999]; map.getView().fit(bounds, map.getSize()); }); </script> </body> </html>

评论收藏

内容反馈