vite+vue3项目上openlayers的地图显示问题

最新推荐文章于 2025-07-27 20:22:41 发布

v0_persistent

最新推荐文章于 2025-07-27 20:22:41 发布

阅读量131

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端框架

本文链接：https://blog.youkuaiyun.com/v0_persistent/article/details/148206938

问题原因

DOM操作和数据获取的冲突。

vue文件原代码如下

<template>
  <div>
    <h1>地物显示</h1>
    <router-view />
  </div>
    <div id="maplayer" class="map" ></div>
    <div id="scale-bar" class="ol-scale-line ol-unselectable">
     <div class="ol-scale-line-inner"></div>
    </div>
</template>
  
<script setup>
  import Map from 'ol/Map.js'
  import View from 'ol/View.js';
  import TileLayer from 'ol/layer/Tile.js';

  import { TileSuperMapRest } from '@supermapgis/iclient-ol'
  import { ScaleLine } from '@supermapgis/iclient-ol';


  import { onMounted } from 'vue';  

  // 样式导入
  import '@supermapgis/iclient-ol/css/index';
  import '@supermapgis/iclient-common/css/index';
  import 'ol/control';
  import 'ol/control/ScaleLine'

  // 地图实例化函数
  const initMap = () => {
  // const url = "http://localhost:8090/iserver/services/map-chengdu/rest/maps/chengdu_sheng%40chengdu";
  // const url = "http://localhost:8090/iserver/services/map-cd_data/rest/maps/chengdu_alldata";
  const url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"
  const map = new Map({
      layers: [
          new TileLayer({
              source: new TileSuperMapRest({url: url,wrapX: true,}),
              projection: "EPSG:4326",
        }),
      ],
      view: new View({
          center: [104.08 , 30.75],
          zoom: 2,
          projection:'EPSG:4326'
      }),
      target: 'maplayer',
      controls:[
        new ScaleLine({
          className:'ol-scale-line',
          target:document.getElementById('scale-bar'),
          minWidth:64,
          units:'metric'
      })
      ]
  });
  initMap();
  }
</script>

页面无报错但显示空白（挂载地图容器已经设置大小的情况下）。

解决

使用onMounted生命周期钩子，它在组件的DOM已经被挂载到页面上之后被调用。

<template>
  <div>
    <h1>地物显示</h1>
    <router-view />
  </div>
    <div id="maplayer" class="map" ></div>
    <div id="scale-bar" class="ol-scale-line ol-unselectable">
    <div class="ol-scale-line-inner"></div>
    </div>
</template>
  
<script setup>
  import Map from 'ol/Map.js'
  import View from 'ol/View.js';
  import TileLayer from 'ol/layer/Tile.js';

  import { TileSuperMapRest } from '@supermapgis/iclient-ol'
  import { ScaleLine } from '@supermapgis/iclient-ol';

  import { onMounted } from 'vue';  

  // 样式导入
  import '@supermapgis/iclient-ol/css/index';
  import '@supermapgis/iclient-common/css/index';
  import 'ol/control';
  import 'ol/control/ScaleLine'

  // 等待DOM渲染，通过onMounted确保容器存在，再完成地图初始化，保证地图正常显示
  onMounted(() => {
      initMap();
  });

  // 地图实例化函数
  const initMap = () => {
  // const url = "http://localhost:8090/iserver/services/map-chengdu/rest/maps/chengdu_sheng%40chengdu";
  // const url = "http://localhost:8090/iserver/services/map-cd_data/rest/maps/chengdu_alldata";
  const url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"
  const map = new Map({
      layers: [
          new TileLayer({
              source: new TileSuperMapRest({url: url,wrapX: true,}),
              projection: "EPSG:4326",
        }),
      ],
      view: new View({
          center: [104.08 , 30.75],
          zoom: 2,
          projection:'EPSG:4326'
      }),
      target: 'maplayer',
      controls:[
        new ScaleLine({
          className:'ol-scale-line',
          target:document.getElementById('scale-bar'),
          minWidth:64,
          units:'metric'
      })
      ]
  });
  }
</script>