一. 高德地图瓦片
1. 高德在线瓦片地址：http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7
2. 参数阐明：
- lang=zh_cn设置中文、lang=en设置英文
- scl=1示意含注记，scl=2示意不含注记
- style=6为影像图，style=7为矢量路网，style=8为影像路网
3. 总结为：
矢量路网（含路网，含注记）
url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7';矢量路网（含路网，不含注记）
url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7';影像路网（含路网、含注记）
'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8';影像路网（含路网、不含注记）
url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8';影像图（不含路网、不含注记）
url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6';url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6';
二. 应用XYZ形式加载高德地图
OpenLayers提供ol.source.XYZ类来加载在线瓦片地图数据源，通常状况下，要加载不同的在线瓦片地图源，只须要更改ol.source.XYZ的参数url即可。
import React, { useEffect } from 'react';import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import { defaults } from 'ol/control';import { fromLonLat } from 'ol/proj';import XYZ from 'ol/source/XYZ';import 'ol/ol.css';export default function Index() { useEffect(() => { // 初始化地图 initMap(); }, []) /** * 初始化地图 */ const initMap = () => { let url; // 矢量路网含注记 // url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'; // 矢量路网不含注记 // url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7'; // 影像路网含注记 // url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8'; // 影像路网不含注记 // url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8'; // 影像图（不含路网、不含注记） // url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6'; url = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6'; new Map({ // 挂载到id为map的div容器上 target: 'map', // 设置地图图层 layers: [ new TileLayer({ source: new XYZ({ url: url }) }) ], // 设置地图视图 view: new View({ // 设置空间参考零碎为'EPSG:3857' projection: 'EPSG:3857', // 地图的显示核心 center: fromLonLat([104.066301, 30.572961]), // 地图的显示层级 zoom: 10 }), controls: defaults({ // 移除归属控件 attribution: false, // 移除缩放控件 zoom: false, // 移除旋转控件 rotate: false }) }) } return (<div> <div id='map' style={{ width: '100vw', height: '100vh' }}></div> </div>)}参考文章
OpenLayers教程十二：多源数据加载之应用XYZ的形式加载瓦片地图