1.3 第一个地图应用
📦 基于 OpenLayers 10.5.0+ 最新 API
🎯 本章目标
本章节将带你创建第一个 OpenLayers 地图应用，理解核心概念并掌握基础用法。学完本章你将掌握：
- Map、View、Layer 核心概念
- 基础地图的创建方法
- 坐标系统的基本使用
- 简单的事件处理
🏗️ 核心概念
OpenLayers 的核心架构包括：
Map（地图）
地图是应用程序的中心组件，由图层、视图、交互和控件组成：
javascript
import Map from 'ol/Map.js';
const map = new Map({
target: 'map', // 目标 DOM 元素
layers: [], // 图层数组
view: null, // 视图对象
});View（视图）
视图管理地图的可视化参数：
javascript
import View from 'ol/View.js';
const view = new View({
center: [0, 0], // 地图中心点
zoom: 2, // 缩放级别
});Layer（图层）
图层是轻量级容器，从数据源获取数据：
javascript
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
const layer = new TileLayer({
source: new OSM(), // 数据源
});🚀 创建第一个地图
步骤 1：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>步骤 2：导入模块
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';步骤 3：创建地图
javascript
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: [0, 0],
zoom: 2,
}),
});📝 完整示例
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,
}),
});
// 添加点击事件
map.on('click', function(event) {
console.log('点击坐标：', event.coordinate);
});style.css
css
@import "node_modules/ol/ol.css";
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}🌍 坐标系统基础
投影坐标转换
OpenLayers 默认使用 Web Mercator 投影（EPSG:3857）：
javascript
import { fromLonLat } from 'ol/proj.js';
// 经纬度坐标（注意：经度在前，纬度在后）
const beijingLonLat = [116.4074, 39.9042]; // 北京
const beijingWebMercator = fromLonLat(beijingLonLat);
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: beijingWebMercator,
zoom: 10,
}),
});⚠️ 坐标顺序
fromLonLat() 函数期望的坐标格式是 [经度, 纬度]，这与常见的 [纬度, 经度] 顺序相反。
💡 基础实践
事件处理
javascript
// 地图点击事件
map.on('click', function(event) {
const coordinate = event.coordinate;
console.log('点击坐标：', coordinate);
});
// 地图加载完成事件
map.once('rendercomplete', () => {
console.log('地图加载完成');
});响应式设计
javascript
// 窗口大小变化时更新地图
window.addEventListener('resize', () => {
map.updateSize();
});资源清理
javascript
// 组件卸载时清理资源
function cleanup() {
if (map) {
map.dispose();
}
}📚 学习资源
官方文档
下一步学习
🎯 总结
通过本章学习，你已经掌握了：
- ✅ 核心概念：Map、View、Layer 的基本理解
- ✅ 创建地图：从 HTML 到 JavaScript 的完整流程
- ✅ 坐标转换：经纬度与投影坐标的转换
- ✅ 事件处理：基础的地图交互
- ✅ 最佳实践：响应式设计和资源清理
下一步：让我们学习 地图基础操作，掌握更多地图交互功能！