这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

Openlayers是什么

OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。

一个简单的demo

将地图绘制到页面上

您将在下面找到一个完整的工作示例。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<div id="map" class="map"></div>
复制代码

    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
复制代码

  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
    })
  });
复制代码

通过这个代码，就可以加载出一个简单的地图示例。如上所示，想加载出地图，需要三个东西

ol.js
div容器
js初始化代码

1.引入js文件，本章采用的是在线js

  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
复制代码

2.map存放的div容器，通过css控制地图放置的位置与大小

<div id="map" class="map"></div>
复制代码

    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
复制代码

3.初始化代码

  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 图层进行了缩放。让我们分解一下：

以下行创建一个 OpenLayersMap对象。就其本身而言，这没有任何作用，因为它没有附加层或交互。

  var map = new ol.Map({ ... });
复制代码

要将地图对象附加到

，地图对象将 atarget作为参数。该值是id的

：

    target: 'map'
复制代码

该layers: [ ... ]数组用于定义地图中可用的图层列表。现在第一个也是唯一的层是平铺层：

layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  })
]
复制代码

OpenLayers 中的图层定义为包含源的类型（图像、平铺或矢量）。源是用于获取地图图块的协议。

Map对象的下一部分是View. 该视图允许指定地图的中心、分辨率和旋转。定义视图的最简单方法是定义中心点和缩放级别。请注意，缩放级别 0 已缩小。

view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
复制代码

您会注意到center指定的是经纬度坐标 (EPSG:4326)。由于我们使用的唯一图层是球面墨卡托投影 (EPSG:3857)，我们可以即时重新投影它们，以便能够在正确的坐标上缩放地图。

openlayers - 基本原理