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} 为影像路网(含路网,含注记)