openLayers6系列理论基础——Map篇

一时失言乱红尘 2021-07-24 18:57 837阅读 0赞

# openLayers6系列理论基础——Map篇 #

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

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

# 一、map基本构成 #

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

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

# 二、map的使用 #

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

# 三、map的options选项 #

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

# 四、Map的方法 #

*  **addControl （控件）：**将给定的控件添加到地图
 *  **addInteraction (交互)：将给定的交互添加到map中**
 *  **addLayer（layer）：将给定的图层添加到Map的顶部，**如果要在map中的其他位置添加层，请使用`getLayers()`和上提供的方法 [`module:ol/Collection~Collection`][module_ol_Collection_Collection]
 *  addOverlay(overlay)：将给定的叠加图层添加到Map中
 *

# 五、Map的事件： #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/6bbd1a1a425246c8919c089631dcb21b.png
[module_ol_Collection_Collection]: https://openlayers.org/en/latest/apidoc/module-ol_Collection-Collection.html