openlayer初步加载地图

vue项目搭好后，直接用node js安装ol,

           

安装好后可以看看安装的版本；我用的是5..2的版本

           

然后看官网相对应版本的文档，都是英文文档;

官方文档：    http://openlayers.org/en/latest/apidoc/

　　然后引入所需要的js;

　　    

 先加载出地图： 

  　　 

 

          

　　　

 效果图：

　　

 

 　　使用离线地图时，重点注意的是：坐标系的问题，在写代码的时候坐标必须要和下载的离线地图的坐标系要保持一致；如果不一致，中心坐标会和地图偏移很远

　　 我用的是EPSG：3857的，所以center中心坐标 不是大家了解的经纬度的写法;

　　

这一点代码就可加载出地图；

因为业务需求；我所做的是要在地图上加点，画线，保存在数据库，然后可以通过点击点或者线在地图弹出popu框来展示相关信息， 对于画好的点、线点击还可以修改保存；

后面对地图的一些操作我会分享出来；