源文档：https://openlayers.org/
中文文档：http://linwei.xyz/ol3-primer/index.html
本文的openlayers的版本是6.14.1，结合vue使用的。

安装ol

npm i ol

地图的重要组成部分

• 地图 Map
  • 是一个入口
• 视图 View
  • 地图的中心点设置、放大、投影、非整数的缩放级别等之类的设置
  • 可以通过map.setView()对地图进行设计
  • center、zoom、projection、constrainResolution
• 图层 Layer
  • 有很多图层，每种图层在实现上都对应于一个类，放在ol.layer下面，比如layer.Title(切片图层)。它允许多个layer重叠且相互之间不干扰。
  • 其分类主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer) 和 矢量图层(Vector Layer) 五种类型，它们都是继承 Layer 类的。
• 数据源 Source
  • 在ol.source包下面，获取layer层的远程数据源。
• 控件 Control
  • 地图全屏、比例尺、鼠标经纬度、缩放控件。
  • FullScreen、MousePosition、ScaleLine、ZoomSlider
• target容器
  • 地图容器

基本使用

地图源的瓦片图层 使用高德资源

<template>
<div>
  <div class="ol-map" ref="olMap"></div>
  </div>
</template>

<script>
  import "ol/ol.css";
  import { Map, View } from "ol";
  import { Tile as TileLayer } from "ol/layer";
  import { XYZ } from "ol/source";
  // fromLonLat方法能将坐标从经度/纬度转换为其他投影
  import { fromLonLat } from "ol/proj";
  export default {
    data() {
      return { map: null };
    },
    components: {},
    computed: {},
    methods: {
      initMap() {
        // 地图源的瓦片图层 使用内置的OSM 它是一种应用瓦片图片作为地图源的地图层
        //const tileLayer = new TileLayer({
        //    source: new OSM()
        //})
        // 地图源的瓦片图层 使用高德
        const tileLayer = new TileLayer({
          source: new XYZ({
            //   http://webrd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scale=1&style=8
            url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
          }),
        });
        this.map = new Map({
          // 设置地图图层
          layers: [tileLayer], //地图源的瓦片图层
          // 设置显示地图的视图
          view: new View({
            center: fromLonLat([120.771441, 30.756433]), //地图中心点 经纬度
            zoom: 15, // 缩放级别-显示层级
            minZoom: 0, // 最小缩放级别
            maxZoom: 18, // 最大缩放级别
          }),
          //olMap为map的地图容器
          target: this.$refs.olMap, // DOM容器
        });
        this.map.addLayer(tileLayer); map.removeOverlay(marker);
      },
    },
    mounted() {
      this.initMap();
    },
  };
</script>

<style lang="less" scoped>
  .ol-map {
    width: 100%;
    height: 500px;
  }
</style>