电子地图主流框架：openlayers 与 mapbox
地图源：
高德城市地图：http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}
卫星地图：http://webst0{1-4}.is.autonavi.com/appmaptile?&style=6&x={x}&y={y}&z={z}
标记地图：http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}
天地图：http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥
openlayers入门
01 安装依赖
官网：openlayers.org(查看API)
1.安装npm（安装node.js）
https://nodejs.org/en/download
https://nodejs.org/dist/v22.17.0/node-v22.17.0-x64.msi
npm install 安装全部依赖
npm install package 安装指定包
npm uninstall 包名 移除指定包
npm run 脚本 运行脚本
npm cache clean --force 清理换缓存
npm config set strict-ssl false 禁止安全连接
npm config get registry 查看镜像源
npm config set registryhttps://registry.npmjs.com 修改镜像源
npm config set registryhttps://registry.npmmirror.com 修改镜像源
npm命令功能
npm init 初始化一个新的 package.json 文件，交互式输入信息。
npm init -y 快速创建带有默认设置的 package.json 文件。
npm install package-name 本地安装指定包。
npm install -g package-name 全局安装指定包，使其在系统范围内可用。
npm install 安装 package.json 中列出的所有依赖。
npm install package-name --save-dev 安装包并添加到 devDependencies。
npm update package-name 更新指定的依赖包。
npm uninstall package-name 卸载指定的依赖包。
npm uninstall -g package-name 全局卸载指定的包。
npm list 查看当前项目的已安装依赖包列表。
npm list -g --depth=0 查看全局已安装的依赖包列表（不展开依赖树）。
npm info package-name 查看包的详细信息，包括版本和依赖等。
npm login 登录到 NPM 账号。
npm publish 发布当前包到 NPM 注册表。
npm unpublish package-name 从 NPM 注册表中撤销发布的包（一般限 24 小时内）。
npm cache clean --force 清理 NPM 缓存。
npm audit 检查项目依赖中的安全漏洞。
npm audit fix 自动修复已知的漏洞。
npm run script-name 运行 package.json 中定义的脚本，例如 npm run start。
npm start 运行 start 脚本（等同于 npm run start）。
npm test 运行 test 脚本。
npm build 运行 build 脚本。
npm outdated 列出项目中有可更新版本的依赖包。
npm version patch/minor/major 更新 package.json 中的版本号，自动更新版本。
npm ci 使用 package-lock.json 快速安装依赖，适用于 CI/CD 环境。
2.安装cnpm(使用淘宝 NPM 镜像)
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install [name]
3.安装nvm(管理node.js环境)
https://github.com/coreybutler/nvm-windows/releases
# 查看 nvm 版本
nvm --version
# 列出所有可安装的 Node.js 版本
nvm list-remote
# Windows 上使用
nvm list available
# 安装最新的 LTS 版本
nvm install --lts
# 安装特定版本
nvm install 18.17.0
nvm install 16.20.1
# 列出已安装的版本
nvm list
# 或
nvm ls
# 切换到特定版本
nvm use 18.17.0
# 设置默认版本
nvm alias default 18.17.0
# 查看当前使用的版本
nvm current
# 卸载特定版本
nvm uninstall 16.20.1
4.安装pnpm (配置镜像为淘宝源)
npm install -g pnpm
pnpm get registry
pnpm set registry https://registry.npmmirror.com
pnpm install 安装全部依赖
pnpm add（-D）包名 安装指定包
pnpm remove 移除指定包
pnpm 脚本 运行脚本
5.新建项目
npm init vite
project_name:openlayers_study
framework:Vanilla
variant:Javascript
pnpm i
pnpm i ol
//修改代码
pnpm dev
02 在浏览器中引入地图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
//在浏览器页面中引入一个地图
import './style.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import 'ol/ol.css';
import { XYZ } from 'ol/source';
import OSM from 'ol/source/OSM.js';
// ol是以面向对象的形式来设计api
//map中的配置选项：target 表示地图实例挂载的容器 view表示地图的视图 Layers 表示地图的图层（都有一个底图）source 图层数据源
const map = new Map({
target:'map',
view: new View({
center:[114.3165,30.5264],
zoom:10, //缩放级别
projection:"EPSG:4326",//投影 默认情况下 ol使用的不是经纬度坐标系，使用的是墨卡托投影体系
}),
layers:[
new TileLayer({
source: new XYZ({
url:"http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
}),
// source: new OSM(),
}),
],
});
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#map{
width: 100vw;
height: 100vh;
}
03 加载一个内置服务（OSM）
import 'ol/ol.css';
import OSM from 'ol/source/OSM.js';
//source: new OSM(),
//OSM()内置地图源，需要连接国际互联网使用，国内勿用
04 清晰的Map架构
main.js
import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
const view = new View({
center: [114.25, 30.59],
zoom: 10,
projection: "EPSG:4326",
});
const gaodeSource = new XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
source: gaodeSource,
});
const map = new Map({
target: "map",
view: view,
layers: [gaodeLayer],
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#map{
width: 100vw;
height: 100vh;
}