OpenLayers 系列学习（一）

妖狐艹你老母 2023-06-28 11:25 7阅读 0赞

### 简单介绍 ###

文章仅为学习笔记，本人也是OpenLayers小白，如有错误，欢迎指正

官网地址：[https://openlayers.org/en/latest/apidoc/module-ol\_Map-Map.html\#addLayer][https_openlayers.org_en_latest_apidoc_module-ol_Map-Map.html_addLayer]

> OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。

### 正文 ###

OpenLayers 3的核心部件是Map（ol.Map）。它被呈现到对象target容器（例如，包含在地图的网页上的div元素）。所有地图的属性可以在构造时进行配置，或者通过使用setter方法，如setTarget（）。

**ol. View负责地图的中心点，放大，投影之类的设置。**

一个ol.View实例包含投影projection，该投影决定中心center 的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。  
放大zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由maxZoom （默认值为28）、zoomFactor （默认值为2）、maxResolution （默认由投影在256×256像素瓦片的有效成都来计算） 决定。起始于缩放级别0，以每像素maxResolution 的单位为分辨率，后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的，直到缩放级别达到maxZoom 。

**Source**  
OpenLayers 3使用ol.source.Source子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式…）等。

**Layer**  
一个图层是资源中数据的可视化显示，OpenLayers 3包含三种基本图层类型：ol.layer.Tile、ol.layer.Image 和 ol.layer.Vector。  
ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩放级别组织的瓦片图片网格组成。  
ol.layer.Image用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。  
ol.layer.Vector用于显示在客户端渲染的矢量数据。

> 需要明白的一点是，Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source，但归纳起来共三种：ol.source.Tile，ol.source.Image和ol.source.Vector。
> 
> 1.  ol.source.Tile对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图，而OpenLayers 3作为一个WebGIS引擎，理所当然应该支持瓦片。
> 2.  ol.source.Image对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。
> 3.  ol.source.Vector对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。
> 
> 我们先了解最为复杂的ol.source.Tile，其叶子节点类有很多，大致可以分为几类：
> 
>  *  在线服务的Source，包括ol.source.BingMaps(使用的是微软提供的Bing在线地图数据)，ol.source.MapQuest(使用的是MapQuest提供的在线地图数据)(注: 由于MapQuest开始收费，ol v3.17.0就移除了ol.source.MapQuest)，ol.source.OSM(使用的是Open Street Map提供的在线地图数据)，ol.source.Stamen(使用的是Stamen提供的在线地图数据)。没有自己的地图服务器的情况下，可直接使用它们，加载地图底图。

一、ol.Map对象的主要属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pmb3JsZXI_size_16_color_FFFFFF_t_70][]

二、Layer的主要属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pmb3JsZXI_size_16_color_FFFFFF_t_70 1][]

### 简单示例  ###

一、创建一个简单的地图

// 创建地图
    new ol.Map({
      // 设置地图图层
      layers: [
         // 创建一个使用Open Street Map地图源的瓦片图层
          new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        // 设置显示地图的视图
          view: new ol.View({
          center: [0, 0], // 定义地图显示中心于经度0度，纬度0度处
          zoom: 2 // 并且定义地图显示层级为2
        }),
        // 让id为map的div作为地图的容器
          target: 'map'
      });

二、移动地图

// 向左移动地图
      function moveToLeft() {
          var view = map.getView();
          var mapCenter = view.getCenter();
          // 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
          mapCenter[0] += 50000;
          view.setCenter(mapCenter);
          map.render();
      }
    
    
    
      // 向右移动地图
      function moveToRight() {
          var view = map.getView();
          var mapCenter = view.getCenter();
      // 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定
          mapCenter[0] -= 50000;
          view.setCenter(mapCenter);
          map.render();
      }
    
    
      // 向上移动地图
      function moveToUp() {
          var view = map.getView();
          var mapCenter = view.getCenter();
      // 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定
          mapCenter[1] -= 50000;
          view.setCenter(mapCenter);
          map.render();
      }
    
    
      // 向下移动地图
      function moveToDown() {
          var view = map.getView();
          var mapCenter = view.getCenter();
      // 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定
          mapCenter[1] += 50000;
          view.setCenter(mapCenter);
          map.render();
      }
    
     // 移动到成都
      function moveToChengDu() {
          var view = map.getView();
      // 设置地图中心为成都的坐标，即可让地图移动到成都
          view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
          map.render();
      }
    
      // 放大地图
      function zoomIn() {
          var view = map.getView();
      // 让地图的zoom增加1，从而实现地图放大
          view.setZoom(view.getZoom() + 1);
      }
    
      // 缩小地图
      function zoomOut() {
          var view = map.getView();
      // 让地图的zoom减小1，从而实现地图缩小
          view.setZoom(view.getZoom() - 1);
      }

参考文章：

[https://blog.csdn.net/zforler/article/details/89281775][https_blog.csdn.net_zforler_article_details_89281775]

[https://www.cnblogs.com/benmumu/p/8081068.html][https_www.cnblogs.com_benmumu_p_8081068.html]

[https://www.cnblogs.com/rjjs/p/9198393.html][https_www.cnblogs.com_rjjs_p_9198393.html]

[https_openlayers.org_en_latest_apidoc_module-ol_Map-Map.html_addLayer]: https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#addLayer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pmb3JsZXI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190413140540143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pmb3JsZXI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pmb3JsZXI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190413140601598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pmb3JsZXI=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_zforler_article_details_89281775]: https://blog.csdn.net/zforler/article/details/89281775
[https_www.cnblogs.com_benmumu_p_8081068.html]: https://www.cnblogs.com/benmumu/p/8081068.html
[https_www.cnblogs.com_rjjs_p_9198393.html]: https://www.cnblogs.com/rjjs/p/9198393.html