入门 （一）

简介

在地图项目的开发中，有时候也需要不依赖于任何公司来开发项目。那么前端地图展示，图层控制就需要一个开源的框架来开发，我一下就相中了（其实是公司要求）。

什么是 是一个开源的类库，主要是用于开发Web GIS客户端。要想完整的开发一个地图项目，还需要后端提供地图瓦片的服务，如可以使用等。它可以轻松地在任何网页中放置动态地图。且能支持移动设备。它可以显示从任何来源加载的地图图块、矢量数据和标记。它易于定制和扩展，能通过简单的 CSS 设置地图控件的样式。使用第三方库来自定义和扩展功能。 基础概念

一个新的框架，详细了解基础概念，有助于我们快速开发。

Map

的核心组件是map (ol/Map)，Map就是地图。它被呈现到目标容器中（例如，div元素）。可以在构造时配置所有映射属性，也可以使用()来设置。Layer、View都是定义在ol/Map下。

View

因为地图不对地图的中心、缩放级别和投影等内容负责。 所以这些功能都是有View来实现的。它的定义在ol/View下。

View有一个(投影)。投影确定中心的坐标系和地图分辨率计算的单位，默认使用墨卡托投影EPSG:3857。

坐标系、投影、EPSG:4326、EPSG:3857

就是图层数据的来源，数据格式可以是 XYZ、WMS 或 WMTS 等 OGC 源以及 或 KML 等格式的矢量数据。它的定义在ol/下。

Layer

Layer表示一个图层。在项目的开发中我们的操作都是在一个个图层上绘制，然后根据层级把图层一层层的绘制上去。

它定义在ol/layer下，有四种基本类型的层。

表示控件，使用按钮来控制地图。

在ol/下，定义了一些内置的控件。如全屏、旋转、缩放、小地图等。

在内置控件不满足需求时也需要我们自定义控件。

交互事件，添加地图和用户的交互事件。

api 文档

开始使用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js">script>

<style>.map {height: 500px;width: 100%;}
style><div id="map" class="map">div>

var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({// 使用高度瓦片图source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})],view: new ol.View({center: ol.proj.fromLonLat([37.41, 8.82]),zoom: 4})
})

通过new ol.Map({ ... });加载地图对象，通过参数绑定元素节点。通过参数定义地图中可用的图层列表。后面图层覆盖前面的图层。通过View参数指定地图的中心、分辨率和旋转。