openLayers6系列理论基础——Map篇

openLayers6系列理论基础——Map篇

        最近开源GIS这块尝试的比较多，leaflet、ol等都接触了一下，主要是因为项目中有需求，想了解下这些开源的GIS到底哪些好用。学习一个新的API，首先就是撸官网，查找各种API的具体用法。

ol开发首先离不开的就是map，map是一切操作的开始，下面具体介绍下map这个api。

一、map基本构成

初始化一幅地图(map)，至少需要一个可视区域(view)，一个或多个图层( layer)， 和 一个地图加载的目标 HTML 标签(target)。

任何一map至少需要三个要素：

1、容器：解决地图在哪里显示的为题

2、数据源：解决显示啥数据的问题

3、视图：解决地图显示的坐标、范围、等级的问题。

• layer：管理图层的，决定了加载什么类型图层
• view：视图，决定了坐标系、视图范围等
• controls：控件入口，类似于比例尺、zoom、等
• target：关联dom，让地图显示在哪个dom上

二、map的使用

import ol from 'openlayers';
var  map =new ol.Map({options?});

三、map的options选项

名称	类型	描述
controls	module：ol / Collection〜Collection。< 模块：ol / control / Control〜Control > | Array。< 模块：ol / control / Control〜Control >	最初添加到地图的控件。如果未指定， module:ol/control~defaults则使用。
pixelRatio	数字 （默认为window.devicePixelRatio）	设备上物理像素与设备无关像素（dip）之间的比率。
interactions	module：ol / Collection〜Collection。< 模块：ol / interaction / Interaction〜Interaction > | Array。< 模块：ol / interaction / Interaction〜Interaction >	最初添加到地图的互动。如果未指定， module:ol/interaction~defaults则使用。
keyboardEventTarget	HTMLElement | 文件 | 串	监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例如，如果将此选项设置为 document键盘，则交互将始终触发。如果未指定此选项，则库在其上侦听键盘事件的元素是地图目标（即，用户为地图提供的div）。如果不是 document，则需要重点关注目标元素以发出关键事件，这要求目标元素具有tabindex属性。
layers	Array。< 模块：ol / layer / Base〜BaseLayer > | module：ol / Collection〜Collection。< module：ol / layer / Base〜BaseLayer > | 模块：ol / layer / Group〜LayerGroup	图层。如果未定义，则将渲染没有图层的地图。请注意，层是按提供的顺序渲染的，因此，例如，如果要使矢量层出现在图块层的顶部，则它必须位于图块层之后。
maxTilesLoading	数字 （默认为16）	同时加载的最大瓦片数。
moveTolerance	数字 （默认为1）	光标必须移动的最小距离（以像素为单位）才能被检测为地图移动事件，而不是单击。增大此值可以使单击地图更容易。
overlays	module：ol / Collection〜Collection。< module：ol / Overlay〜Overlay > |Array。< module：ol / Overlay〜Overlay >	叠加层最初已添加到地图。默认情况下，不添加任何覆盖。
target	HTMLElement | 串	映射的容器，元素本身或id元素的。如果在构造时未指定，则module:ol/Map~Map#setTarget必须调用渲染地图。
view	模块：ol / View〜View	地图的视图。除非在构造时或通过指定了层源，否则不会获取任何层源 module:ol/Map~Map#setView。

四、Map的方法

• addControl （控件）：将给定的控件添加到地图

• addInteraction (交互)：将给定的交互添加到map中

• addLayer（layer）：将给定的图层添加到Map的顶部，如果要在map中的其他位置添加层，请使用getLayers()和上提供的方法 module:ol/Collection~Collection

• addOverlay(overlay)：将给定的叠加图层添加到Map中

•  

五、Map的事件：

• click 点击事件，双击将两个触发该事件
• dblclick 双击事件
• moveend 地图被移动后触发
• movestart 地图开始移动时触发
• postrender 地图被渲染后触发
• singleclick 单击事件