关于OpenLayers（以下简称OL），官网对它的介绍是：可以快速地在网页上创建一幅动态地图，可以是瓦片地图、矢量地图以及加载自其它数据源的带有方位的标记，OL的发展极大地促进了各种地理信息的应用，它是完全免费，开源的JavaScript软件包，发行许可证为BSD。我对它了解不多，想要更多详细信息，请移步至官网：https://openlayers.org。
准备
打开官网地址，找到发行版本然后下载，里边包含了JavaScript文件，CSS样式文件以及其他一些帮助文档，把CSS目录下的ol.css和build目录下的ol.js拷贝到地图项目内。
创建地图
一幅完整地图，包含以下要素：地图主体、比例尺、图例、方向、标题等，下面使用OpenLayers创建一幅地图。
容器
地图是要展现在网页上，所以前提是在网页上分配好空间，也就是分配一个包含地图的容器。先创建一个html文档，类似下面这样，设定容器元素为id=map的div元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../static/css//ol.css">
<script src="../static/js/ol.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一幅地图</title>
<style>
#map {
width: 100%;
height: 80vh;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
导入ol.js和ol.css（默认样式表），因为OpenLayers在创建地图时不会设定其大小，所以要自己设定地图的宽度和高度 。
Map
开始编写js代码前，简单了解下OpenLayers的地图构成。
Layer
一张地图可显示多个图层，而图层类型有三种，分别是瓦片、矢量和栅格图片，每一种图层类型都对应特有的数据源，与之相关的类是ol.layer。
Source
是构成图层的数据源，包含免费数据和商业瓦片服务，我的理解是图层是数据源的可视化容器，即source -> layer -> map。与数据源相关的类是ol.source。
创建地图的
View
调整地图的可视窗口，比如地图的中心，地图级别等，与之相关的类是ol.View。
下面编写js代码来创建地图对象。
<script>
var map = new ol.Map({
//指定容器元素
target: 'map',
//图层
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
//视图
view: new ol.View({
center:[0, 0],
zoom: 4
})
});
</script>
关于ol.source.OSM()是OpenLayers封装好的地图接口，只需要调用就好了，非常方便。
运行打开html文件，一幅地图就诞生了。
添加基本控件
这幅地图有点简陋，给它加点装饰，比如比例尺、放大/缩小滑块等控件，与之相关的类是ol.control。
添加控件有两种方法：
- 创建Map对象时，传入controls参数
- 创建Map对象后，使用addControl方法添加控件
第一种方法：
var map = new ol.Map({
target:"map",
layers:[
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view:new ol.View({
center:[13034927,3956748],
zoom:6
}),
controls:[
//旋转控件
new ol.control.Rotate(),
//属性控件
new ol.control.Attribution(),
//比例尺控件
new ol.control.ScaleLine(),
// 显示鼠标在地图上的坐标控件
new ol.control.MousePosition(),
// 放大缩小控件
new ol.control.Zoom(),
//鹰眼控件
new ol.control.OverviewMap({
collapsed: false,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
})
]
});
第二种方法：
var control = new ol.control.Zoom();
map.addControl(control);
修改后的地图耐看了一点，上边的控件是默认样式，没有修改。
注意：
- 关于比例尺控件没有显示是因为它被鹰眼图（缩略图）遮住了，将后者折叠后就能正常显示。
- 添加鹰眼图时，要指定图层，否则是灰白背景。
参考资料：
- https://openlayers.org
- CSDN博主【不睡觉的怪叔叔】部分博客内容
- Ga’bor Farkas.Mastering OpenLayers 3.[D].2017
扫一扫
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
