当前位置：首页 > news >正文

OpenLayers 入门指南【四】：项目初始化

news 2025/7/29 11:40:26

安装并配置好Node（此步骤不做赘述，网上很多安装教程）
找到一个文件夹，用于存放项目源码位置，按住Shift+鼠标右键点击在此处打开Powershell调出命令行
在打开的命令行中输入 npx create-vite-template@latest并回车
等待一段时间会出现提示询问是否要安装create-vite-template,直接输入y回车
此时会提示让你输入你的项目名称，这里我以vue-ol-map为我的项目名，可以根据自身需求进行设置。注意不要用中文。
此时会让选择你的项目框架，Vue是默认第一个可以直接回车进入下一步（这里由于命令行颜色问题导致第一个Vue框架看不清楚,可以改命令行背景颜色就能看到了）
此时需要选择包管理器，这里用键盘的↑和↓方向键来选择自己实际在用的包管理器，我用的是 npm，选最后一个，然后回车。
此时询问你是否添加Vue Router，这里用键盘的←和→方向键来选择。看自己需求选择，然后回车。
此时询问你是否添加Pinia，看自己需求选择，然后回车。
此时询问你是否添加ESLint，看自己需求选择，然后回车。
此时需要选择你的UI框架，看自己需求选择，我这里选的Element-Plus，然后回车。
此时询问你是否添加皮肤与布局配置。看自己需求选择，我这里选的No，然后回车。
此时让你选择扩展插件。看自己需求选择。这里用键盘的↑和↓方向键来切换插件，这里用键盘的←和→方向键来勾选和取消勾选插件。选择完插件然后回车。
此时选择CSS预处理器，看自己需求选择。我这里用的是Sass/Scss然后回车
此时构建工具会按照上述选择来创建项目并安装依赖包，等它执行完即可。
此时关闭命令行，用开发工具打开项目并运行起来可以看到这个页面
我们需要对这个模版进行改造，以便我们自己的项目使用

在src/components目录下新建组件OlMap.vue，内容如下：

<template><div id="map-2d-div"><h1>地图容器</h1></div></template><script setup lang="ts" name="olMap"></script><style scoped>#map-2d-div {margin: 0px;padding: 0px;height: 100vh;}</style>

修改路由src/router/index.ts将新建的Index.vue加入到路由中

import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/Index.vue'
import { App } from 'vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: Index}]
})export async function setupRouter(app: App) {app.use(router)// 创建路由守卫// 路由准备就绪后挂载APP实例await router.isReady()
}export default router

修改src/App.vue,移除模版默认的组件引入

<script setup lang="ts"></script><template><RouterView />
</template><style>/* 这里只列出修改项目 */
#app {max-width: 1280px;margin: 0;padding: 0;font-weight: normal;
}
@media (min-width: 1024px) {#app {padding: 0;}
}
</style>

改造后运行的效果
下面就可以按照下一章节来初始化地图了

二、地图引入

安装依赖
```
npm install ol
```
引入OpenLayers的全局样式
```
#main.tsimport "ol/ol.css";
```

创建一个地图（修改上一段的OlMap.vue组件内容）

<template><div id="map-2d-div"></div></template><script setup lang="ts" name="olMap">import { onMounted } from 'vue'import TileLayer from "ol/layer/Tile";import View from "ol/View";import Map from "ol/Map";import { defaults as defaultControls } from "ol/control";import OSM from "ol/source/OSM";onMounted(()=>{const olMap = new Map({target: "map-2d-div",view: new View({projection: 'EPSG:4326',center: [0, 0],zoom: 5,maxZoom: 18,minZoom: 1,}),layers: [new TileLayer({source: new OSM()})],controls: defaultControls({attribution: false,rotate: false,zoom: false,}),})})</script><style scoped>#map-2d-div {margin: 0px;padding: 0px;height: 100vh;}</style>