openlayers入门教程1《初识openlayers》

前言

OpenLayers 它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。 由于官网是纯英文的文档，新手在第一次进行接触的时候多少会感觉到困难且网上的资料也不是很全，所以根据工作接触到业务场景和遇到的问题进行一下沉淀和总结。

1、安装

npm install ol
1

2、初始化地图

2.1 、customMap.js

import Map from "ol/Map";
import View from "ol/View";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default class customMap {
  constructor(options) {
    this.mapUrl = options.mapUrl || "";
    this.target = options.target;
    this.map = null;
  }
 
  /**
   * @description: 初始化地图实例
   */
  init() {
    // 已经初始化就不需要再次初始化了
    if (this.map) return;
 
    // Map 地图实例用来承载我们的配置
    this.map = new Map({
      // 让id为map的div作为地图的容器
      target: this.target,
      // 图层容器: 图层会有很多个  类似于我们吃的千层饼 一层一层叠在一起 这样可以让我们看到更多丰富的内容.
      layers: [
        // 创建一个使用Open Street Map地图源的瓦片图层
        // Tile 加载一个瓦片地图 也就是我们底图
        new Tile({ source: new OSM() }),
      ],
 
      // 设置显示地图的视图: 对我们的地图进行一些配置
      view: new View({
        center: [0, 0], // 定义地图显示中心于经度0度，纬度0度处
        zoom: 2, // 并且定义地图显示层级为2
      }),
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2.2 、index.jsx

import React, { useEffect } from "react";
import customMap from "./libs/customMap";
import "./index.less";
const Acomponent = () => {
  /**
   * @description: 初始化地图
   */
 
  const init = () => {
    const newCustomMap = new customMap({
      url: "",
      target: "map",
    });
    newCustomMap.init();
  };
 
  useEffect(() => {
    init();
  }, []);
 
  return (
    <div className="warp">
      <div id="map"></div>
    </div>
  );
};
 
export default Acomponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.3 、效果

3、一个地图的基本构成

1、Map: 前面我们看到了，我们的所有配置最后都是作为参数传递到Map类中，进行实例化，最终初始化我们的地图，所以Map类就是我们构建一个地图的最基础类，负责将各个部分的内容整合在一起
2、target：指定一个id 作为地图的容器
3、layers：图层容器, 对于一个地图来说我们向上面添加的元素都被视为图层，大家互不干扰丰富我们的地图。
4、source：它是和图层一一对应的，OpenLayers也存在多种不同的数据源，每一种在实现上也对应于一个具体的类，它们都放在包ol.source下面，之前接触过的ol.source.OSM就是其中的一种。 毫无 疑问，它是整个地图背后真正的核心。 如果没有数据，那么渲染引擎将没有任何价值。在数据技术(Data Technology)大行其道的今天，GIS引擎将需要支持各式各样的数据来源。目前ol3也确实是这样做的，已支持多种多样在线或离线的数据源；可以是静态图或者瓦片图；也可以是栅格化的或者矢量的
5、view :控制地图显示的中心位置，范围，层级,后续我们会详细的介绍。