OpenLayers快速开始
目录
本系列关于OpenLayers的翻译基于版本v4.5。
一、在页面上放置一个地图
以下会有一个完整的可运行的例子。首先，创建一个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/javascript"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
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>在浏览器中显示效果如下：
二、需要理解上述demo所发生的机制
在一个网页中包含一个地图，仅仅需要做三个事情
1. 引入
2. OpenLayers
库
2. 地图容器
3. JavaScript创建一个简单的地图
1.引入OpenLayers库
<script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>第一部分就是引入JavaScript库，在这里只需指向openlayers.org站点获取全部的JavaScript库。在实际生产环境中，需要构建一个定制化版本库，只需要包含应用需要的模块即可。
注意：如果应用想要在老旧的版本上运行，像IE浏览器或者Android4.x，则需要在加载
OpenLayers之前加入另外一个脚本。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=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.JavaScript创建一个简单的地图
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
})
});通过上面的JavaScript代码段，地图对象在非洲东海岸放大的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），可以在线路中重新投影，以便能够在正确的坐标上缩放地图。
转载自：https://blog.csdn.net/u012832088/article/details/78631185
