OL 快速入门

Snake8859 12/24/2022

# 快速构建地图应用（CDN）

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
     /*
      * 地图表现:必备三要素，
      * 	图层（Layer）
      * 	视图（View）
      * 	目标容器（target）
      *
      * 核心类：Map、Layer、Source、View
      * 渲染方式：ol3中有Canvas、WebGL、DOM
      *         ol5中删除了DOM渲染方式，Canvas（由ol.renderer.Map实现）、
      *								 WebGL（由ol.renderer.Layer实现）
      */
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

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
38
39
40
41
42
43

引入OpenLayers的依赖（传统CDN方式引入或者npm包形式）

传统CDN是传统前端时代，npm包形式是前端工程化时代
创建一个id为map的div容器，作为地图容器，并通过class指定元素的大小
在页面加载的生命周期时使用ol中Map类来创建地图，其中三个与地图相关的核心参数为target、layers和view，它们的作用分别为：
- target：指定地图的容器
- layers：配置地图的图层
- view：指定地图的中心位置、地图缩放级别、地图投影等。
  
  ol中没有在view里面配置投影的，默认使用的是Web墨卡托投影(EPSG:3857)，投影相关的方法在ol.proj的命名空间下。fromLonLat方法是将经纬度的地理坐标转换为投影坐标，默认的目标投影是EPSG:3857。

# 快速构建地图应用（Vite）

除了传统的CDN引入ol，目前前端开发常用还是npm包形式。目前前端工程化解决方案有Webpack、Parcel、Vite等。ol官网的教材目前使用的是Vite。

下面参照官网教材，初始化一个工程化项目，仅需要三行命令即可：

npm create ol-app my-app
cd my-app
npm start

1
2
3

第一行是在创建一个my-app文件夹，并按照ol相关依赖，并拥有一个标准的基础ol启动项，包括index.html、main.js、style.css等。

第二行是进入到my-app文件夹

第三行是启动一个应用服务，能在http://localhost:5173访问您的应用。

一个ol的应用必须包含三个基础模块分别是：

The HTML markup with an element to contain the map (index.html)
The JavaScript that initializes the map (main.js)
The CSS styles that determine the map size and any other customizations (style.css)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quick Start</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@import "node_modules/ol/ol.css";

html,
body {
  margin: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

具体可参考：https://openlayers.org/doc/quickstart.html

引言 OL原理