Openlayers + Vue 疑难杂症（一）地图构建与容器监听

本文链接：https://blog.csdn.net/weixin_43155640/article/details/107836129

本文介绍了如何使用Vue和OpenLayers构建WebGIS项目，并解决地图容器宽度变化导致的空白区域问题。通过监听侧栏状态，利用MutationObserver和ol.Map的updateSize()方法，动态调整地图尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

使用vue + openlayers初步搭建一个webgis项目；
解决问题：随着侧栏的拉伸/隐藏，地图容器的宽度会发生变化，从而会影响到地图侧边出现空白区域。

关键词： updateSize（）；MutationObserver

步骤：
1. Vue-cli搭建项目
已有的教程很多，就不啰嗦了。
参考教程：vs code创建vue项目

2. 安装并引入Openlayers
有多种方式可以引入openlayers，其中npm的方式最为便捷。
直接VS Code新建终端输入如下命令：

npm install ol

随后在需要用到的Openlayers的.vue文件中import就行了。

3.构建地图
假设目标为MapView.vue文件，MapView.vue的地图构建代码如下：

<template>
<div style="" class="container-fluid">
  <div id="mapview" class="map">        //1.地图容器
    </div>
</div>
</template>
<script>
// import $ from 'jquery'
import 'ol/ol.css'                     //2.引入需要用到的openlayers库
import {
   Map, View} from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import * as olProj from 'ol/proj'

var map = null              //3.地图对象的声明

export default {
   
  name: 'MyMapView',
  data: function () {
   
    return {
   
      // map: null
    }
  },
  methods: {
   
    //  4.地图对象定义
    initMap: function () {
   
      map = new Map({
   
        target: 'mapview',
        layers: [
          new Tile