openlayers+vue 快速创建地图

安装ol：npm install ol

<template>
  <div id="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import OSM from "ol/source/OSM";
import { Tile as TileLayer } from "ol/layer";
export default {
  data() {
    return {
      map: null, //地图容器
      view: null, //地图视图
      layers: null, //地图图层
      mapCenter: [103.54269207385511, 33.89413297901926], //中心经纬度
      mapZoom: 4, //缩放层级
    };
  },
  mounted() {
    let osm = new TileLayer({//图层
      source: new OSM(),// 数据源
    });
    this.layers = [osm];
    this.view = new View({
      center: this.mapCenter,
      projection: "EPSG:4326",
      zoom: this.mapZoom,
    });
    this.map = new Map({
      target: "map",
      layers: this.layers,
      view: this.view,
    });
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 100%;
}
</style>