Openlayers v6.x 学习记录（一）初步上手

资源：

1、官网：OpenLayers - Welcome

2、框架:  Vue.js

环境搭建

1、安装 OpenLayers 最新插件

npm install -save ol

安装之前的版本：npm install -save ol@5.3.0

2、加载地图瓦片

<template>
  <div id="map"></div>
</template>
import 'ol/ol.css';
import {Feature, Map, View} from "ol";
export default {
  name: "himap",
  props: {},
  data() {
    return {
      map: null
    }
  },
  created() {
    
  },
  mounted() {
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
         source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系 WGS84
        center: [120.377607,36.066643], //青岛
        zoom: 12,
      }),
      controls: [
        new Zoom(),
        new ZoomSlider({}),
        new ScaleLine()
      ]
    });
}

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

效果图