关于OpenLayersOpenLayers可以很容易地在任何网页中放置动态地图。它可以显示地图瓷砖，矢量数据和标记加载

一、2022年6月8日15:34:52 当前openlayers版本号v6.14.1

二、OpenLayers的开发旨在进一步使用各种地理信息。它是完全免费的开源JavaScript

四、包安装npm install ol

五、CDN引用

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css">

六、下载

七、快速入门

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/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.14.1/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      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>

八、网页添加openlayers地图具备的三个必要条件

引入OpenLayers所需要的文件
放置地图的容器<div>
利用OpenLayersAPInew ol.Map创建map实例

九、基本概念

Map 这是一个地图实例，通过target的值去绑定<div>并进行显示

<div id="map" style="width: 100%, height: 400px"></div>

import Map from 'ol/Map';

var map = new Map({target: 'map'});

View 用于设置地图的中心、缩放级别和投影

import View from 'ol/View';

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

Source 源，图层源

import OSM from 'ol/source/OSM';

var osmSource = OSM();

Layer 图层、源的可视化表示

ol/layer/Tile - 瓦片.
ol/layer/Image - 图片
ol/layer/Vector - 矢量
ol/layer/VectorTile - 矢量瓦片

import TileLayer from 'ol/layer/Tile';

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

import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';

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