OpenLayers6学习笔记（四）—— 使用XYZ的方式加载高德地图

高德在线瓦片地址：

http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7

参数说明：

• lang=zh_cn设置中文、lang=en设置英文
• scl=1表示含注记，scl=2表示不含注记
• style=6为影像地图，style=7为矢量图，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=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=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 '

• 影像路网（含路网、含注记）

 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 '

使用XYZ方式加载高德地图

        OpenLayers提供ol.source.XYZ类来加载在线瓦片地图数据源，通常情况下，要加载不同的在线瓦片地图源，只需要更改ol.source.XYZ的参数url即可。

import React from "react";
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import { fromLonLat } from 'ol/proj';
import { defaults } from 'ol/control'; 
import 'ol/ol.css'
import styles from './Map.less'



export default class GaodeMap extends React.Component{
  constructor(props){
    super(props)
    this.state = {
    }
    // 地图
    this._map = {}
  }

  componentDidMount(){
    this._initMap()
  }

  /**
   * 初始化地图
   */
  _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=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 '
    // 影像路网（含路网、含注记）
    // 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 '
    this._map = new Map({
      // 挂载到id为map的div容器上
      target:'map',
      // 设置地图图层
      layers:[
        // 创建一个使用高德地图源的瓦片图层
        new TileLayer({ 
          source:new XYZ({
            url:url
          })
         }),
      ],
      // 设置地图视图
      view:new View({
        // OpenLayers默认使用EPSG:3857，fromLonLat将EPSG:4326的坐标转化为EPSG:3857的坐标
        center:fromLonLat([104.066301,30.572961]),
        // 地图显示层级为10
        zoom:10,
      }),
      controls:defaults({
        // 移除归属控件
        attribution:false,
        // 移除缩放控件
        zoom:false,
        // 移除旋转控件
        rotate:false
      })
    })
  }

  render(){
    return (
    <div>
      <div id="map" className={styles.map} style={{width:'100vw',height:'100vh'}}></div>
    </div>)
  }
}

参考文章

OpenLayers教程十二：多源数据加载之使用XYZ的方式加载瓦片地图