openlayers 绘制基本地图

openlayers简介

openlayers是一个免费的开源JavaScript库，主要用于绘制地图，功能非常强大，而且容易上手。openlayers可以绘制地图的基本控件，包括比例尺，鹰眼，鼠标位置等，还可以绘制点、线、面等基本图形。
在openlayers5中，通过Map类渲染地图数据有两种方式，一种是canvas，另一种是WebGL。使用canvas渲染地图时，在openlayers地图中绘制图形包括动画的原理和canvas类似，只不过要通过openlayers提供的方法来绘制图形。
下面介绍的是openlayers+vue来绘制基本的openlayers地图

加载openlayers地图

// 用于加载openlayers的地图容器
<template>
   <div id="box">
    <!--
        用于显示地图的容器
    -->
        <div id="map"></div>
   </div> 
</template>
<script>
//加载地图所需要的openlayers类
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {

   mounted(){
       var map=new Map({
           target:'map',//盛放地图的容器
           layers:[//地图的图层，这里可以使用高德地图，或者天地图或者其它所学要的地图的图层，百度上都有
               new TileLayer({
                   source:new OSM()
               })
           ],
           view:new View({//必须
               zoom:2,//显示当前地图的缩放级别
               center:[0,0]//显示当前地图的显示位置
           })
       })
   }
}
</script>
<style scoped>
    #box{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    #map{
        width: 100%;
        height: 100%;
    }
</style>

总结

openlayers学起来还是比较简单的，本人也是openlayers的小白一个，所说的都是最最基本的东西，有哪里说的不对的地方，大佬们可以帮忙改正。