关于前端:OpenLayers6学习笔记五-使用XYZ的方式加载高德地图

一. 高德地图瓦片

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 的形式加载瓦片地图