openlayer加载天地图和谷歌地图

最新推荐文章于 2024-07-04 00:59:27 发布

gis小白的成长之路

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量916

点赞数

分类专栏：天地图 openlayer 谷歌地图文章标签： javascript html

本文链接：https://blog.csdn.net/qq_36179257/article/details/105411561

版权

天地图同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

openlayer

1 篇文章 0 订阅

订阅专栏

谷歌地图

1 篇文章 0 订阅

订阅专栏

ol.css和ol.js下载链接: ol.css ol.js

天地图和谷歌地图都是切片地图，对于openlayer，对应图层ol.layer.Tile。数据源source可以是ol.source.WMTS 和 ol.source.XYZ。一般来讲，使用XYZ比较简便，WMTS比较繁琐。下面以谷歌-XYX和天地图-WMTS为例：

1. 谷歌地图-XYZ

XYZ方式只需根据规定组装简单的url即可

var googleMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
    })
});

2. 天地图-WMTS

天地图使用需要申请密钥

http://lbs.tianditu.gov.cn/authorization/authorization.html#example

各类天地图服务

WMTS方式遵从标准的OGC规范，需要计算、指定分辨率、显示级别等，根据WMTS服务加载的标准规范加载天地图

var projection = ol.proj.get("EPSG:4326");   //坐标系
var projectionExtent = projection.getExtent(); //范围
var size = ol.extent.getWidth(projectionExtent) / 256; 
var resolutions = [];
for (var z = 2; z < 19; ++z) {//计算比例尺
    resolutions[z] = size / Math.pow(2, z);
}

//天地图
var tiandiMap = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",
        layer: "vec",
        style: "default",
        matrixSet: "c",
        format: "tiles",
        wrapX: true,
        tileGrid: new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
        })
    })
})

//天地图标注
var tiandiMapapi = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",
        layer: "cva",
        style: "default",
        matrixSet: "c",
        format: "tiles",
        wrapX: true,
        tileGrid: new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
        })
    })
})

使用openlayer需要引入ol.css和ol.js

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <script type="text/javascript" src="js/ol.js"></script>
    <style>
        .ol-overlaycontainer-stopevent {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <input type="radio" name="radio" onclick="mapChange('天地图')" value="天地图" checked> 天地图
        <input type="radio" name="radio" onclick="mapChange('谷歌地图')" value="谷歌地图" > 谷歌地图
    </div>
    <div id="map" style="width: 100%"></div>
    <script>
        var mapChange;
        var projection = ol.proj.get("EPSG:4326");   //坐标系
        var projectionExtent = projection.getExtent(); //范围
        var size = ol.extent.getWidth(projectionExtent) / 256; 
        var resolutions = [];
        for (var z = 2; z < 19; ++z) {//计算比例尺
            resolutions[z] = size / Math.pow(2, z);
        }

        //谷歌地图
        var googleMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
            })
        });
 
        //天地图
        var tiandiMap = new ol.layer.Tile({//矢量地图
            source: new ol.source.WMTS({
                url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",//链接需要添加自己申请的密钥
                layer: "vec",
                style: "default",
                matrixSet: "c",
                format: "tiles",
                wrapX: true,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
                })
             })
         })

        //天地图标注
        var tiandiMapapi = new ol.layer.Tile({//矢量标注
            source: new ol.source.WMTS({
                url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",//链接需要添加自己申请的密钥
                layer: "cva",
                style: "default",
                matrixSet: "c",
                format: "tiles",
                wrapX: true,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
                })
            })
        })
        var map = new ol.Map({
            target: "map",
            view: new ol.View({
                center: [110.316161,20.023143],//中心点
                projection: projection,
                zoom: 8,
                maxZoom: 18,
                minZoom: 1
            })
         });
         
         map.addLayer(googleMapLayer)
         map.addLayer(tiandiMap)
         map.addLayer(tiandiMapapi) 

         //地图切换方法
         mapChange = function(value){
             if (value == '谷歌地图') {
                 googleMapLayer.setVisible(true)
                 tiandiMap.setVisible(false)
                 tiandiMapapi.setVisible(false)
             } else {
                 googleMapLayer.setVisible(false)
                 tiandiMap.setVisible(true)
                 tiandiMapapi.setVisible(true)
             }
         }         
    </script>
</body>
</html>

gis小白的成长之路

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
openlayer加载天地图和谷歌地图

天地图和谷歌地图都是切片地图，对于openlayer，对应图层ol.layer.Tile。数据源source可以是ol.source.WMTS和 ol.source.XYZ。一般来讲，使用XYZ比较简便，WMTS比较繁琐。下面以谷歌-XYX和天地图-WMTS为例： 1. 谷歌地图-XYZ XYZ方式只需根据规定组装简单的url即可var googl...
复制链接

扫一扫