1.2 开发环境搭建
🎯 环境搭建目标
本章节将介绍如何快速搭建 OpenLayers 开发环境，重点关注环境配置和工具准备。完成本章学习后，你将拥有：
- ✅ 完整的 OpenLayers 开发环境
- ✅ 现代化的构建工具配置
- ✅ 高效的开发工具设置
- ✅ TypeScript 支持（可选）
🚀 快速开始（推荐）
使用官方脚手架
OpenLayers 提供了官方的项目生成器：
bash
# 创建新项目
npm create ol-app my-map-app
# 进入项目目录
cd my-map-app
# 启动开发服务器
npm start🎉 官方脚手架特性：
- ✅ 预配置的现代构建工具
- ✅ OpenLayers 10.x 最新版本
- ✅ 示例地图代码
- ✅ 开发服务器配置
- ✅ 生产环境构建优化
📁 项目结构
my-map-app/
├── public/
│ └── favicon.ico # 网站图标
├── src/
│ ├── main.js # 主入口文件
│ └── style.css # 样式文件
├── index.html # 主 HTML 文件
├── package.json # 项目配置
├── vite.config.js # 构建配置
└── node_modules/ # 依赖包🛠️ 手动环境搭建
1. 项目初始化
bash
# 创建项目目录
mkdir my-openlayers-project
cd my-openlayers-project
# 初始化 npm 项目
npm init -y2. 安装依赖
bash
# 安装 OpenLayers
npm install ol
# 安装构建工具（推荐）
npm install --save-dev vite3. 创建基础文件
index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenLayers 入门</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="./main.js"></script>
</body>
</html>main.js
javascript
import './style.css';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: [0, 0],
zoom: 2,
}),
});style.css
css
@import "node_modules/ol/ol.css";
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}4. 配置构建工具
package.json 脚本
json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}🔧 开发工具推荐
代码编辑器
Visual Studio Code（推荐）
json
// .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}推荐扩展：
- ES6 String HTML
- JavaScript (ES6) code snippets
- Prettier - Code formatter
- ESLint
WebStorm
- 内置 JavaScript/TypeScript 支持
- 优秀的代码补全和重构
- 集成调试工具
浏览器开发工具
Chrome DevTools
- Console 面板：调试 JavaScript 和查看错误
- Network 面板：监控瓦片加载
- Performance 面板：分析地图渲染性能
- Elements 面板：检查地图 DOM 结构
⚙️ TypeScript 支持（可选）
TypeScript 配置
OpenLayers 10.x 内置 TypeScript 类型定义，无需额外安装 @types/ol：
tsconfig.json
json
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "dist"]
}TypeScript 项目创建
bash
# 使用 TypeScript 模板
npm create ol-app my-ts-app -- --template typescript
# 手动添加 TypeScript
npm install --save-dev typescript类型导入示例
typescript
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import type { FlatStyle } from 'ol/style/flat.js';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: [0, 0],
zoom: 2,
}),
});🚀 运行和构建
开发模式
bash
# 启动开发服务器
npm run dev
# 或者使用 Vite
npx vite生产构建
bash
# 构建生产版本
npm run build
# 预览构建结果
npm run preview📚 学习资源
官方资源
开发工具
- npm create ol-app - 官方脚手架
- Vite - 现代构建工具
- VS Code - 推荐编辑器
🎯 总结
通过本章学习，你已经掌握了：
- ✅ 快速开始：使用官方脚手架创建项目
- ✅ 手动搭建：从零开始配置开发环境
- ✅ 工具配置：VS Code 和浏览器开发工具
- ✅ TypeScript：可选的类型支持配置
下一步：让我们开始创建 第一个地图应用，将环境配置付诸实践！
💡 提示
推荐使用官方脚手架 npm create ol-app 快速开始，它包含了所有必要的配置和最佳实践。