说明:发布的地图服务地址可以在geoserver图层OpenLayer预览地址栏中拿到; arcgis服务地址可以在arcgis server manager中拿到; 地图投影为wgs84; 实现代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大缩小</title> <link href="../css/ol.css"> <script src="../js/ol,js.js"></script> <script src="../js/jquery-1.3.1.js"></script> </head> <body> <div id="map" style="height: 100%;"> </div> <script> $(function () { var geoserverlayer=new ol.layer.Tile({ visible: true, source: new ol.source.TileWMS({ url: 'http://localhost:8087/geoserver/ceshi/wms', //geoserver图层地图 params: {'FORMAT': 'image/png', 'VERSION': '1.1.1', tiled: true, STYLES: '', LAYERS: 'ceshi:demo', //图层名 } }) }); var osmlayer=new ol.layer.Tile({ source:new ol.source.OSM() }); var arcgisLayer=new ol.layer.Tile({ source:new ol.source.TileArcGISRest({ url:'http://localhost:6080/arcgis/rest/services/itmsdp/MapServer' }) }) var projection = new ol.proj.Projection({ code: 'EPSG:4326', units: 'degrees', axisOrientation:'neu' }); var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.MousePosition({ className:"ol-mouseposition", coordinateFormat: ol.coordinate.createStringXY(5) }) ]), target: 'map', layers: [ osmlayer,geoserverlayer,arcgisLayer ], view: new ol.View({ projection: projection, center: [129.631215,44.590727], // 定义地图显示中心于经度0度,纬度0度处 zoom: 9 // 并且定义地图显示层级为2 }) }); }) </script> </body> </html> ———————————————— 版权声明:本文为CSDN博主「wo_buzhidao」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/wo_buzhidao/article/details/79151596 |
|
来自: 昵称QAb6ICvc > 《地图制图》