openlayer : 地图： openlayer 加载互联网地图（谷歌地图/天地图）和遇到的问题

最新推荐文章于 2025-05-26 18:53:39 发布

天有行-地无迹-千秋怎堪一剑扫

最新推荐文章于 2025-05-26 18:53:39 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： openLayer

本文链接：https://blog.youkuaiyun.com/weitaming1/article/details/104535397

openLayer 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用OpenLayers加载天地图的地图服务，包括电子地图、卫星影像图及文字标注图层。解决了常见问题如权限类型错误、文字标注加载失败及卫星影像图显示异常等，同时提供了完整的代码示例。

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

1、怎么部署地图服务的？

2、openlayer 怎么连接互联网地图？

互联网地图是不是可以看出服务器是别人的而已，把原本的ip改成别人的ip就可以了。其他的不变？

3、报错：418

参考：天地图API及服务接口调用418错误

天地图官网 : https://www.tianditu.gov.cn/

天地图key：https://console.tianditu.gov.cn/api/key

注册好个人账户，并且新建一个应用后，获取对应的key后报错：

http://t0.tianditu.com/DataServer?T=vec_w&X=3&Y=2&L=2&tk=我的key

{"msg":"权限类型错误","resolve":"Key权限类型为:服务端，请使用服务端访问！","code":12}

改为浏览器端的就可以了。

天地图问题和解决：

1、文字标注的不知道为什么加不出来。--简单demo的可以。解决：自己也是傻，居然没认真看json中的配置属性。。。
2、其层次只到18, 19就没有了---。
解决：天地图官网上的在线电子地图中最大层数也只有18层。【看来就只能这样了。】【在代码中需要设置maxZoom:18】
3、加载卫星地图
解决：加载好了，也是18层。

还有的问题：

但是加载的卫星影像图的文字图层加载后，在缩放图层的时候，会出现一些显示上的问题。

参考博客： openlayers5加载天地图影像

完整代码

<!DOCTYPE html>
<html>

<head>
    <title>WMTS</title>
    <link rel="stylesheet" href="../../ropeok/ol.css" type="text/css">
    <link rel="stylesheet" href="../../ropeok/css/main.css" type="text/css">
    <script src="../../jquery.js"></script>
    <script src="../../ropeok/rkol.js"></script>
</head>
<style type="text/css">
    body, #map {
        border: 0px;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        font-size: 13px;
    }
    #map{
        width:100%;
        height:100%
        border:1px solid red;
    }
</style>
<body>
<div id="map" class="map"></div>
<script>
    var center = ol.proj.transform([118.113775,24.591268], "EPSG:4326", "EPSG:3857");

    var projection = ol.proj.get("EPSG:4326");
    var resolutions = [0.00118973050291514, 5.9486525145757E-4, 2.97432625728785E-4, 1.5228550437313792E-4,7.614275218656896E-5, 3.807137609328448E-5, 1.903568804664224E-5, 9.51784402332112E-6, 4.75892201166056E-6];
    var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    var origin=[-400, 400];
    var tileGrid = new ol.tilegrid.TileGrid({
        origin: origin, //原点（左上角）
        resolutions: resolutions, //分辨率数组
        matrixIds: matrixIds //矩阵标识列表，与地图级数保持一致
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=我的key'
                }),
                isGroup: true,
                name: '天地图路网-电子地图'
            }),
            new ol.layer.Tile({
                // source: new ol.source.XYZ({
                //     url:"http://t2.tianditu.com/DataServer?T="+"cva_w"+"&X={x}&Y={y}&L={z}&tk=" + "我的key"
                // }),
                source: new ol.source.XYZ({
                    url: 'http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=我的key'
                }),
                isGroup: true,
                name: '天地图文字标注-电子地图'
            }),
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=我的key',
                }),
                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=我的key'
                }),
                isGroup: true,
                name: '天地图文字标注--卫星影像图'
            })



    ],

        view: new ol.View({
            center: center,
            zoom: 12
        })
    });
</script>

</body>

</html>