Vue2+ol6初始化加载OSM底图（一）

需求

从头开始，，通过Vue-cli4搭载Vue2+Sass的环境，并配置ol6包，最后实现最简单的加载OSM底图的需求

技术框架

脚手架版本：Vue-cli4

Vue版本：vue2

CSS预处理器：Sass

openlayer版本：6

环境搭载

1、先查看自己Vue脚手架的版本

在cmd中输入vue-V就可以看到当前脚手架的版本

无脚手架的同学，可百度如何全局配置Vue脚手架（由于网上教程很多，此处不再赘述）

2、创建项目

cd到你要创建项目的位置，然后输入命令vue create xxxx(你的项目名称) 然后选择Manually select features ，之后如下图所示，选择你要配置好的环境，像如果我们要安装好Css的预处理器，此时只要选择CSS的部分，然后按下空格即可。

PS：回车是完成，空格才是选择

选择好相应的预处理器后，回车即可完成项目的创建

3、安装openlayer

创建好项目后，进入项目的终端，输入npm install ol -s 即可安装ol的环境

4、加载OSM底图

在components文件夹中创建Map组件，具体逻辑为

1、引入ol的配置包

2、创建ol中Map的类（Map类中必填有如下几项）

• target（存放的div）
• layers（加载的图层）
• view（视图）
  • 类似（arcgis for js api中的MapView）
  • 必填：投影、中心点、缩放层级

Map组件代码如下

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

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
    name:'initMap',
    data() {
        return {
            init2dmap:null
        }
    },
    methods:{
        initMap(){
                this.map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                    source: new OSM()
                    })
                ],
                view: new View({
                    projection: "EPSG:4326",    //使用这个坐标系
                    center: [114.064839,22.548857],  //深圳
                    zoom: 12
                })
                });
        }
    },
    mounted() {
      this.initMap()  
    },
}
</script>

<style lang="scss" scope>
#map{height:100%;}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>

　　

其他注意事项

在创建文件后很多人都不知道项目代码文件的逻辑，所以我简单梳理一下

主要留意src文件夹

• src
  • assets
    • 存放静态文件
  • components
    • 存放组件
  • router
    • 存放路由
  • store
    • VueX
  • style
    • 存放CSS预处理器的样式，方便直接引用
  • views
    • 存放路由跳转的模块