OpenLayers快速开始

来源：互联网发布：泰坦尼克号真相知乎编辑：程序博客网时间：2024/06/10 20:25

本系列关于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），可以在线路中重新投影，以便能够在正确的坐标上缩放地图。

阅读全文

0 0