vue3+openlayers项目初始化

DLF_ou2025-09-11 11:42

说明：vue3+vite+cesium项目环境搭建参考上一篇文章:juejin.cn/post/754836...

1、引入ol，创建地图容器

xml 复制代码

<template>     
    <div id="mapBox"></div> 
</template>

2、地图渲染方法

typescript 复制代码

//baseMap.ts 
import { Map, View } from 'ol'; 
import TileLayer from 'ol/layer/Tile'; 
import * as olProj from 'ol/proj'; 
import OSM from 'ol/source/OSM'; 
const initCenter = [114.5, 38]; 
let map: any; 
const initMap = (mapId: string) => {   
    let center = olProj.fromLonLat(initCenter);   
    let layer = new TileLayer({     
        source: new OSM(),   
    })   
    map = new Map({     
        layers: [layer],     
        target: mapId,     
        view: new View({       
            center: center,       
            zoom: 4,       
            maxZoom:20     
        })   
    }) 
}; 
export {   
    initMap 
}

3、实现效果

4、可能出现错误处理

1)引入.ts文件报错：An import path cannot end with a '.ts' extension. Consider importing '../components/BaseMap.js' instead.

这个是由于使用了别名 alias 导致的。以 tsconfig.json 的拓展形式兼容配置

json 复制代码

//在tsconfig.json 文件中加入这一句 
"extends": "./tsconfig.extends.json"

在根目录下创建tsconfig.extends.json文件

json 复制代码

//tsconfig.extends.json 输入以下内容 
{ 
    "compilerOptions": { 
        "baseUrl": ".", 
        "paths": { 
            "@/*": ["src/*"] 
        } 
    } 
}

同时在import对应.ts文件时只具体到文件名，不加.ts后缀。

2)打包后地图无法显示:通过import引入ol，项目打包后切换map路由后会重复创建ol-viewport，导致地图无法显示（此时地图显示在第二个ol-viewport所在的div中，主界面部分显示的是第一个ol-viewport所在div）；

解决:在路由切换时清除map.vue中创建的ol-viewport，如下：

ini 复制代码

onUnmounted(() => { 
    map.dispose(); 
    map = null 
})

注：直接引入ol.js，打包后不会出现该问题。

项目地址：github.com/DLFouge/vue...

欢迎指正与star