OpenLayers学习（一）

OpenLayers 配置环境

本小白用的是 ol 5.3.0版本。

• 官网下载 dist 包，用于开发；完整的包还有例子、文档等等，作为参考。
• 创建 html，引入 ol.css 和 ol.js。

<link rel="stylesheet" href="../v5.3.0-dist/ol.css">
<script src="../v5.3.0-dist/ol.js"></script>
1
2

不可或缺的地图四要素

openlayers地图包含：Map、layers、view、source。

• Map 是最大的地图容器，包含多个图层 layers、控件 controls 等。
• layers 是地图图层，重要性不用多说，一般是瓦片图层。
• view 就是地图视图，主要包括投影、缩放等。
• source 才是 layer 的数据来源，调用各种地图服务。

创建地图容器

<div id="map"></div>
1

相应的 CSS 样式

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}
1
2
3
4
5
6
7

实例化地图

<script>
    let map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [120.45, 23.48],
            zoom: 14
        })
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里使用 OSM（OpenStreetMap）作为 source，需要科学上网。
也可以使用天地图（需要申请key），那么代码要这么写：

source: new ol.source.XYZ({
    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + "你的天地图key",
})
1
2
3