VUE项目 openlayers简单使用

在项目中安装依赖

npm i ol --save

调用相关API

选取一个DOM元素，并进行相关的配置，完整代码：

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

<script>
import Map from "ol/Map";
import View from "ol/View";
// 添加图层
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
//引入样式文件
import "ol/ol.css"

export default {
    name: 'map',
    data() {
        return {
          map: null  
        }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.map = new Map({
          layers:[
            new TileLayer({   //数据源
              source: new OSM()  //openlayers内置的数据源
            })
          ],
          target: 'map',  //绑定页面中DOM元素的id
          view: new View({  //视图配置
            center: [0,0],  //地图中心点坐标，经度0、纬度0
            zoom: 2  //定义地图显示层级为2
          }),
        })
      }
    }
}
</script>

<style scoped lang="stylus">
  #map
    width 500px
    height 500px
</style>

此时，一个简易版的地图就出现了

学习资源：
官方文档：https://openlayers.org/
中文文档： http://linwei.xyz/ol3-primer/ch01/index.html