使用openlayers加载OSM地图

一,安装ol

cnpm i ol -S

二,在components文件夹下面新建olmap.vue





修改APP.vue如下






目录结构:

使用openlayers加载OSM地图_第1张图片

三,运行结果

使用openlayers加载OSM地图_第2张图片

注意:有时候加载出来的地图只显示一半,此时只需要将APP.vue中的app样式中的text-align属性设为‘left’即可

使用openlayers加载OSM地图_第3张图片

你可能感兴趣的:(openlayers)