Openlayers官方示例详解十二之通过XYZ方式加载瓦片地图

最新推荐文章于 2024-06-17 17:22:02 发布

不睡觉的怪叔叔

最新推荐文章于 2024-06-17 17:22:02 发布

阅读量1w

点赞数 1

分类专栏：开源GIS

本文链接：https://blog.csdn.net/qq_35732147/article/details/85088639

版权

开源GIS 专栏收录该内容

80 篇文章 354 订阅

订阅专栏

一、示例简介

二、代码详解

三、补充

一、示例简介

这个示例展示了通过XYZ格式的URL访问瓦片地图数据，有关XYZ方式加载瓦片地图可以参考这篇文章：万能瓦片加载秘籍。

本示例加载的瓦片地图是Thunderforest的地图数据，Thunderforest的官网地址是：http://www.thunderforest.com/

注意它不是完全免费的开源地图，它的收费规则是：

所以，可以免费使用于个人的爱好项目上。

二、代码详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XYZ</title>
    <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({     // 使用XYZ方式加载瓦片地图
                        url: 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=你注册的Thunderforest的Key'
                    })
                })
            ],
            view: new ol.View({
                center: [-472202, 7530279],
                zoom: 12
            })
        });
    </script>
</body>
</html>

加载结果：

三、补充

许多瓦片地图厂商为了提高瓦片数据加载的效率，往往提供了多个瓦片数据路径（URL），如果为应用程序赋予从多条数据路径选择最优路径的功能，那就能提高瓦片数据加载的效率。

OpenLayers正是有这样的功能，来看通过多条瓦片数据路径加载高德地图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加载高德地图</title>
    <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var urls = [];      // 用于保存高德瓦片地图的所有数据路径(URL)
        for(var i = 0; i < 4; i++){
            urls[i] = 'http://wprd0' + (i + 1) + '.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        }
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        urls: urls,     // 注意这里，这里使用的是所有高德地图瓦片地图路径组成的数组
                    })
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 5
            })
        });
    </script>
</body>
</html>

不睡觉的怪叔叔

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
Openlayers官方示例详解十二之通过XYZ方式加载瓦片地图

目录一、示例简介二、代码详解三、补充一、示例简介这个示例展示了通过XYZ格式的URL访问瓦片地图数据，有关XYZ方式加载瓦片地图可以参考这篇文章：万能瓦片加载秘籍。本示例加载的瓦片地图是Thunderforest的地图数据，Thunderforest的官网地址是：http://www.thunderforest.com/ 注意它不是完全免费的开...
复制链接

扫一扫