关于前端: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的形式加载瓦片地图