openlayers引入天地图and将已经在geoserver中发布的图层加载在天地图上

桌酱

已于 2022-03-21 17:19:14 修改

阅读量1.1k

点赞数

分类专栏：地理信息库文章标签： openlayers geoserver

于 2022-03-21 17:17:33 首次发布

本文链接：https://blog.csdn.net/m0_46538057/article/details/123640287

版权

地理信息库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

准备工作

首先需要准备好的东西：

在geoserver中发布的图层或图层组
图层发布可以参考https://blog.csdn.net/weixin_45390094/article/details/112816608
多个图层加入一个图层组统一发布可参考https://blog.csdn.net/weixin_45390094/article/details/112969992
天地图：想要使用在线的天地图接口，需要在天地图官网https://www.tianditu.gov.cn/注册账户，获取密钥，方法可以参考—>天地图密钥获取

实现代码如下：

<!-- 天地图and geoserver的服务 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../v6.12.0/css/ol.css" /> //这里根据自己项目里openlayers的位置来写
    <script src="../v6.12.0/build/ol.js"></script>
    <style>
        .map {
            height: 980px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',            
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥',
                    }),
                    /*isGroup: true,
                    name: '天地图路网'*/
                }),

                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你的密钥'
                    }),
                    /*isGroup: true,
                    name: '天地图文字标注'*/
                }),
				//天地图有多个图层，根据需要加载

                new ol.layer.Tile({
                    // 图层组
                    source: new ol.source.TileWMS({
                        url: 'http://localhost:8080/geoserver/qianying/wms', //  这个地址是在geoserver里面进行图层预览的地址是一致
                        params: {
                            'LAYERS': 'qianying:qianyingmap', // 这里的名字需要与空间定义的一样
                            'TILED': true
                        },
                        serverType: 'geoserver',
                        transition: 0
                    })
                })
            ],
            view: new ol.View({
                center: [111,30], //这里我设置的效果不太对，根据情况修改
                zoom: 5,
            }),
        })

    </script>
</body>

</html>

桌酱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
openlayers引入天地图and将已经在geoserver中发布的图层加载在天地图上

准备工作首先需要准备好的东西：在geoserver中发布的图层或图层组图层发布可以参考https://blog.csdn.net/weixin_45390094/article/details/112816608多个图层加入一个图层组统一发布可参考https://blog.csdn.net/weixin_45390094/article/details/112969992天地图：想要使用在线的天地图接口，需要在天地图官网https://www.tianditu.gov.cn/注册账户，获取密钥，
复制链接

扫一扫

专栏目录