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

凌往昔

已于 2025-07-28 22:05:34 修改

阅读量80

点赞数

CC 4.0 BY-SA版权

分类专栏： OpenLayers 入门指南文章标签： OpenLayers WebGIS

于 2025-07-28 22:05:11 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u013420816/article/details/148935317

OpenLayers 入门指南专栏收录该内容

10 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

安装并配置好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.ts

import "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>