OpenLayers+天地图+Geoserver+WMS图层服务

最新推荐文章于 2024-11-14 16:31:48 发布

ssyk

最新推荐文章于 2024-11-14 16:31:48 发布

阅读量9.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： GIS WEB前端文章标签： OpenLayers 天地图 geoserver

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/ljg124034929/article/details/69701031

WEB前端同时被 2 个专栏收录

11 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍如何使用OpenLayers框架集成天地图作为底图，并展示如何接入GeoServer提供的WMS图层服务。文章通过示例代码演示了天地图不同图层（路网、卫星影像、文字标注）的加载过程，以及如何配置GeoServer WMS服务参数实现自定义图层的显示。

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

OpenLayers+天地图+Geoserver+WMS图层服务

1.WEB项目集成OpenLayers

版本v3.19.0，下载 v3.19.0-dist.zip；最新版本为v4.0.1

网址： http://openlayers.org/

2.样例代码：

<script type="text/javascript" src="../js/ol-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../css/ol.css" />

function init(){
           var layers=[
                    new ol.layer.Tile({
                       title: "天地图路网",
                         source: new ol.source.XYZ({
                             url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                         })
                  })
              ];
             var map=new ol.Map({
                  layers: layers,
                  target:'map',
                  view:new ol.View({
                      projection: 'EPSG:4326',
                      center:[-124.73142200000001,24.955967],
                      zoom:5
                  }) ,
               controls: ol.control.defaults({
                    attributionOptions: {
                        collapsible: false
                        }
                    })
              });

          /*   var tian_di_tu_road_layer = new ol.layer.Tile({
                title: "天地图路网",
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                })
            });
            map.addLayer(tian_di_tu_road_layer); */

          /*   var tian_di_tu_satellite_layer = new ol.layer.Tile({
                title: "天地图卫星影像",
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
                })
            });
            map.addLayer(tian_di_tu_satellite_layer);*/

            var tian_di_tu_annotation = new ol.layer.Tile({
                title: "天地图文字标注",
                source: new ol.source.XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
                })
            });
            map.addLayer(tian_di_tu_annotation);

            var test = new ol.layer.Tile({
                source:new ol.source.TileWMS({
                    url:'http://192.168.0.XX:8080/geoserver/topp/wms',
                    params:{
                        'LAYERS':'topp:states',//此处可以是单个图层名称，也可以是图层组名称，或多个图层名称
                        'TILED':false
                    },
                    serverType:'geoserver'    //服务器类型
                })
            });
            map.addLayer(test);
   }

<body onload='init();'>
    <div style="position: absolute; top: 50px; left: 80px; width: 300px; height: 100px;">
        <div id='map' style='width:1200px;height:500px;'></div>
    </div>
</body>

3.执行效果

说明：

1).样例以天地图为低图，前端框架使用OpenLayers。

2).GeoServer WMS图层服务和上个样例一样为自带样例。

3).天地图低图图层分天地图路网图层，天地图卫星影像图层，天地图文字标注图层。

4),图层添加时注意图层叠加的先后顺序。

5),同上片，加载WMS图层服务注意图层中心点的和地图级别设置。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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