OpenLayer加载geoserver，OSM，ARCGIS发布地图服务

最新推荐文章于 2023-12-28 18:39:28 发布

一个修理地球的人

最新推荐文章于 2023-12-28 18:39:28 发布

阅读量2.8k

点赞数

分类专栏： geoserver openlayer 文章标签： geoserver OpenLayer arcgis osm

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/79151596

版权

openlayer 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

geoserver

7 篇文章 1 订阅

订阅专栏

说明：发布的地图服务地址可以在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>

一个修理地球的人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
OpenLayer加载geoserver，OSM，ARCGIS发布地图服务

说明：发布的地图服务地址可以在geoserver图层OpenLayer预览地址栏中拿到；arcgis服务地址可以在arcgis server manager中拿到；地图投影为wgs84；实现代码如下放大缩小 $(function () { var geoserverlayer=new ol.layer.Ti
复制链接

扫一扫