OpenLayers快速开始

最新推荐文章于 2024-02-28 16:58:45 发布

秋成

最新推荐文章于 2024-02-28 16:58:45 发布

阅读量1.9w

点赞数 2

分类专栏： OpenLayers 翻译文章标签： OpenLayers 简单实例

翻译同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

OpenLayers

4 篇文章 2 订阅

订阅专栏

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

秋成

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers快速开始

本系列关于OpenLayers的翻译基于版本v4.5。一、在页面上放置一个地图以下会有一个完整的可运行的例子。首先，创建一个html文件，复制如下代码，并在浏览器中打开即可。&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;link rel="stylesheet" href="https...
复制链接

扫一扫