Vue2+ol6初始化加载OSM底图

最新推荐文章于 2024-04-22 14:19:27 发布

百年内必成大牛

最新推荐文章于 2024-04-22 14:19:27 发布

阅读量934

点赞数

分类专栏： Openlayer Vue2 文章标签： vue.js 前端 javascript gis

本文链接：https://blog.csdn.net/qq465908194/article/details/122361326

版权

Openlayer 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

需求

从头开始，，通过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>