一、在页面上放置一个地图
以下会有一个完整的可运行的例子。首先，创建一个html文件，复制如下代码，并在浏览器中打开即可。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/java script"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/java script">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
在浏览器中显示效果如下：
二、需要理解上述demo所发生的机制
在一个网页中包含一个地图，仅仅需要做三个事情
1. 引入
2. OpenLayers
库
2. 地图容器
3. java script创建一个简单的地图
1.引入OpenLayers库
<script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/java script"></script>
第一部分就是引入java script库，在这里只需指向openlayers.org站点获取全部的java script库。在实际生产环境中，需要构建一个定制化版本库，只需要包含应用需要的模块即可。
注意：如果应用想要在老旧的版本上运行，像IE浏览器或者Android4.x，则需要在加载
OpenLayers之前加入另外一个脚本。
<script src="https://cdn.polyfill.io/v2/polyfill.min.jsfeatures=requestAnimationFrame,Element.prototype.classList"></script>
2.地图容器
<div id="map" class="map"></div>
应用程序中地图包含在一个<div>的HTML标签元素中，通过这个<div>，可以通过CSS样式控制地图的属性，像宽，高和边框等。如下的CSS样式用于使地图高度400px、宽度和浏览器窗口一样。
<style>
.map {
height: 400px;
width: 100%;
}
</style>
3.java script创建一个简单的地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
通过上面的java script代码段，地图对象在非洲东海岸放大的OSM层创建的。针对这块代码，我们来逐步讲解
var map = new ol.Map({ ... });
这一句创建了一个OpenLayers地图对象，就其本身，它不能起到任何作用，因为它本身不附带任何层和交互。
target: 'map'
为了是地图对象和<div>产生联系，地图对象需要在参数中设置一个目标，可以通过<div>的id的值来绑定。
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
layers: [ ... ]这个数组用于定义地图中可用的图层列表，当前第一次也是唯一的图层是平铺图层。
OpenLayers中的图层使用包含源的类型（图像，平铺或者矢量）来定义。源是用来获取地图图块的协议。
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
地图对象的另一部分就是视图部分，视图允许指定地图的中心，分辨率和旋转。定义视图最简单的方法就是定义一个中心点和缩放级别。注意当缩放级别为0时是缩小。此处视图的中心是通过经纬度坐标系确定的，因为使用的唯一图层是Spherical Mercator投影（EPSG:3857），可以在线路中重新投影，以便能够在正确的坐标上缩放地图。