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

You may also like...