openlayer系列：常见的几种图层加载方式

使用XYZ方式加载地图服务：从天地图到OpenStreetMap和高德,

原创已于 2023-07-26 15:10:37 修改 · 865 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#openlayer #GIS

于 2023-07-21 17:13:20 首次发布

GIS开发同时被 2 个专栏收录

50 篇文章

订阅专栏

openlayer专栏

2 篇文章

订阅专栏

1.XYZ方式加载瓦片

瓦片地图使用金字塔结构组织瓦片，可以说这是一个三维的结构，使用XYZ这样的坐标来精确定位一张瓦片。即Z用于表示地图层级，XY表示某个层级内的平面，X为横坐标，Y为纵坐标，类似于数学上常见的笛卡尔坐标系。

2.常见的几种图层加载方式

2.1加载天地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.0/proj4.js"></script>
</head>
<body>
<div id="map" style="width: 100%;height: 800px">
</div>
</body>openlayer.html
<script type="module">

    const layers = [
        new ol.layer.Tile({
            title: '天地图',
            source:  new ol.source.XYZ({
                url: 'http://t{0-7}.tianditu.gov.cn/DataServer?T=img_c&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}'
            })
        }),
        new ol.layer.Tile({
            title: '天地图标注',
            source:  new ol.source.XYZ({
                url: 'http://t{0-7}.tianditu.gov.cn/DataServer?T=cia_c&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}'
            })
        })
       
    ];

    const map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
            // 初始化地图中心 可以去地图坐标拾取网站获取想要的坐标
            center: [108.339408, 34.261271],
            zoom: 4,
        }),
    });

</script>
</html>

2.2加载OSM

比如我们就可以不用ol.source.OSM类，而用ol.source.XYZ来加载Open Street Map地图，结果一样：

2.3加载高德

<!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 rel="stylesheet" href="../../v7.4.0/css/ol.css" />
    <script src="../../v7.4.0/build/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({  // 使用XYZ方式加载高德地图
                source: new ol.source.XYZ({
                    url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
                })
              })
            ],
            view: new ol.View({
              center: [0, 0],
              zoom: 3
            })
        });
    </script>
</body>
</html>

http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z} 为影像底图（不含路网，不含注记）
http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z} 为矢量地图（含路网，含注记）
http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z} 为影像路网（含路网，含注记）