一、前言
这里,我们直接从一个项目开始。边做边学边补充自己的技术栈。而今天,我们利用OpenLayers来完成一张地图的展示。
首先,你需要:
- 掌握HTML
- 熟悉CSS
- 了解JavaScript
- 有GIS基础
二、开始
<!DOCTYPE html>
<html>
<head>
<title>加载OSM地图</title>
<link href="https://openlayers.org/en/v6.5.0/css/ol.css" rel="stylesheet" type="text/css">
<script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
<style type="text/css">
#mapContainer {
width: 100%;
height: 95%;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
//实例化Map对象加载地图
var map1 = new ol.Map({
//地图容器div的ID
target: 'mapContainer',
//地图容器中加载的图层
layers: [
//加载瓦片图层数据
new ol.layer.Tile({
//图层对应数据源,此为加载OpenStreetMap在线瓦片服务数据
source: new ol.source.OSM()
})
],
//地图视图设置
view: new ol.View({
//地图初始中心点
center: [0, 0],
//地图初始显示级别
zoom: 2
})
});
</script>
</body>
</html>
1. 结构
OpenLayers的核心是Map、 Layer、 Source、View这四个大类,几乎所有的操作都是围绕这他们进行的。
- (Map)可以看作是一个地图容器,我们在这个容器中加载我们想要的地图图层(Layer);
- 而这些图层都有着自己的来源(Source),可以是高德、百度、必应等提供的地图数据,也可以是你自己的json文件等等;
- 当我们加载好了数据之后,再设置它们如何展现在我们眼前(View),即地图的视图:初始的中心点在哪,是要先对焦到全国还是直接看到某一个城市。
- 当然,我们也可以设置与地图的交互功能(Interactions),也可以启用或者关闭像比例尺,缩放等地图功能(Controls)……
2. 地图数据源
明确一张地图展示了什么内容是尤为重要的。
在这次的例子中,我们调用了OpenStreetMap的在线瓦片服务数据,展示了一张与我们寻常见到的高德地图、百度地图不一样,有着自己独特样式的地图。
注意了,在这里就会涉及到几个在面试时HR可能会问到的问题:
- OSM(你所用的地图源)服务是什么格式的类型?
- OpenLyaers是怎么加载这些地图的?
- 使用了什么坐标系?
三、最后
上面提到的3个问题,我现在还没有整理出一个比较好的答案,那次面试我也是有点被hr问懵了因为自己确实学WebGIS的时间太短,很多东西都没了解到。
后续整理好了再回来更新吧。
对了,我上面的图片和代码来源都是**《WebGIS之OpenLayers全面解析 第2版》**这本书,强烈推荐大家买一本或者去图书馆借一本来看一看。
大家也可以去下载这本书里实例的代码来辅助学习。