从零开始构建一个GIS应用程序

摘要：本文主要介绍OpenLayers的使用。
一、一个简单的例子(基于ES6语法环境)

const { Vector as VectorSource, OSM } = window.ol.source;`
const { Feature } = window.ol;
const { Point } = window.ol.geom;
const { fromLonLat } = window.ol.proj;
const { Vector as VectorLayer, Tile as TileLayer } = window.ol.layer;
const { View } = window.ol;
const { Style } = window.ol.style;

const source = new VectorSource({
  features: [ 
    new Feature({ geometry: new Point(fromLonLat([32, 12])) }),
    new Feature({ geometry: new Point(fromLonLat([32, 12])) }),
    new Feature({ geometry: new Point(fromLonLat([33, 11])) }),
 ]
})
const layer = new VectorLayer({
  source,
  style() {
    return new Style({
      image: new Icon({ src: 'icon.png' })
    })
  }  
})
const map = new Map({ 
  target: 'map',
  layers: [
    new TileLayer({ source: new OSM() }),
    layer
  ],
  view: new View({
    center: fromLonLat([37.41, 8.82]),
    zoom: 4,
  })
})

以上代码渲染的结果如下图所示，在一个id为map的div容器里渲染出一副底图并且有3个目标点。

image.png

是不是已经被各种构造函数弄的眼花缭乱了？不着急我们慢慢分析。
二、基本概念
1.Map
OpenLayers的核心组件是map（ol.Map）。它被呈现给target容器（例如div，包含地图的网页上的元素）。所有地图属性都可以在构造时配置，或者使用setter方法配置，例如setTarget()。

const map = new Map({ target: 'map' })

2.View
Map不会对中心，缩放级别和地图投影等内容负责，负责这些的是View

map.setView(new View({
  center: [0, 0],
  zoom: 2
}));

3.Source
Source表示数据源，常用的有ol.source.Vector与ol.source.OSM

const osmSource = new OSM(); //底图数据源

4.Layer
Layer是数据的集合与展示，OpenLayers有四种基本类型的Layer:

• ol.layer.Tile - 渲染在网格中提供平铺图像的源，这些网格由特定分辨率的缩放级别组织。
• ol.layer.Image - 渲染以任意范围和分辨率提供地图图像的源。
• ol.layer.Vector - 渲染矢量数据客户端。
• ol.layer.VectorTile - 渲染作为矢量切片提供的数据。

const osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);

三、进阶
当有了基本的概念后，就可以搭建一个只有底图的地图了，那么如何基于地图做实际业务的开发呢？列如在指定的经纬度展示目标点，以及移除目标点。那就需要更多的类，比如Icon, Feature, Point，当需要做事件响应的时候需要Intereaction，当涉及坐标的时候甚至还需要fromLonLat这样的方法。至于使用哪个类，以及这些类的实例有哪些方法，可以参考官网的API文档。

四、总结
回过头再看我们的例子是不是就清晰很多了？可以看出OpenLayers是基与一系列基本的类来构造实例，这些类的实例又进行嵌套组合，最终实现地图的渲染。当需要动态改变地图的某些展现时，需要对构造出来的实例进行setter与getter操作。
刚开始使用OpenLayer的时候有太多不适应，最主要的就是类的嵌套太多，明明可以用一个类实现的配置，非要用2个甚至3个类来实现，最终构造出很多看起来没有作用的实例，例如Point, Source, Style这样的类。
后来才发现这样的好处是可以对逻辑进行解耦，可以快速定位业务需求，并非过度设计，而是恰到好处！