第1章：开发环境搭建——Node.js、Vue/React脚手架与GIS库的安装

说实话，每次带新人做GIS项目，我最怕听到的一句话就是：「环境配好了，但跑不起来。」

我自己踩过的坑，少说也有几十个。从Node版本不兼容，到npm安装卡死，再到CDN引用报404——嗯，今天我把这些经验都整理出来，帮你一次性搞定。

1.1 Node.js：一切的基础

Node.js是什么？说白了，它就是让JavaScript能在服务器上跑的一个运行时环境。我们做GIS前端开发，离不开它。

安装步骤很简单：

1. 去官网下载LTS版本安装包
2. 一路默认安装，记得勾选「Add to PATH」
3. 打开终端，验证安装：node -v 和 npm -v

我个人习惯用nvm（Node Version Manager）来管理多个Node版本。为什么？因为不同项目可能依赖不同版本的Node，你想想看，一个项目用v16，另一个用v20，来回卸载重装多麻烦。

1.2 脚手架：Vue vs React，怎么选？

脚手架说白了就是帮你快速搭好项目骨架的工具。你不用从零开始配置webpack、babel这些——省心省力。

我个人两个都用过，给你一个实在的建议：

对比项	Vue (Vite)	React (Create React App)
上手难度	较低，模板语法直观	中等，JSX需要适应
生态成熟度	中文文档友好	社区资源丰富
GIS集成	Leaflet/Vue2Leaflet	react-leaflet/MapLibre
构建速度	Vite极快	CRA较慢，推荐Vite

我的建议是：如果你刚入门，选Vue + Vite。为什么？因为Vue的模板语法更接近HTML，你写起来不会有割裂感。我在带新人时，用Vue的学员通常三天就能上手写地图组件，而React的学员要一周。

创建Vue项目的命令：

npm create vite@latest my-gis-app -- --template vue
cd my-gis-app
npm install
npm run dev

创建React项目的命令：

npm create vite@latest my-gis-app -- --template react
cd my-gis-app
npm install
npm run dev

1.3 GIS库的安装：npm vs CDN

GIS库怎么装？两种方式：npm安装和CDN引入。我一般这样选：

• npm安装：适合正式项目，方便版本管理和打包优化
• CDN引入：适合快速原型或演示，省去构建步骤

常用GIS库的npm安装：

# Leaflet - 轻量级，适合2D地图
npm install leaflet

# OpenLayers - 功能全面，支持多种投影
npm install ol

# MapLibre GL - 支持3D和矢量切片
npm install maplibre-gl

# Cesium - 三维地球，适合卫星/地形展示
npm install cesium

我在项目中遇到过一个问题：npm安装Leaflet后，样式文件没加载出来。后来发现是忘了导入CSS：

// 在main.js或组件中导入
import 'leaflet/dist/leaflet.css'

嗯，这个坑我踩过两次——第一次是忘了，第二次是路径写错了。你记住就行。

CDN引入方式（适合快速测试）：

<!-- Leaflet CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- MapLibre CDN -->
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />

1.4 本章知识体系总览

下面这张图，是我自己总结的开发环境搭建流程。你照着走，基本不会出问题：

1.5 验证环境是否搭建成功

装完了怎么知道对不对？写个最简单的测试代码：

// 在Vue项目中测试Leaflet
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const map = L.map('map').setView([39.9, 116.4], 13)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)

console.log('地图加载成功！')

如果你在浏览器里看到了北京的地图，恭喜你——环境搭好了。