OpenLayers加载出来的高德地图看起来还是挺顺眼的，后面都以高德地图为基础来一一实现OpenLayers API中常用的功能，甚至写一些比较复杂酷的deom，比如结合OpenGL实现动画、发光、3d效果等等。如果你对OpenLayers还有点小期待，就先看OpenLayers是如何加载高德地图吧！

一、lang

zh_cn设置中文，en设置英文。

二、size

size基本无作用。

三、scl

scl=1代表注记；
scl=2代表底图（矢量或者影像；

四、style

style=6为影像图；style=7为矢量路网；style=8为影像路网；

五、地图类型

"aMap-img": "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
"aMap-vec": "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
"aMap-roadLabel": "http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}"

高德地图.png

 onMounted(() => {
      new Map({
        target: "map2",
        layers: [
          new Tile({
            source: new XYZ({
              url:  `http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}`
            }),
          }),
        ],
        view: new View({
          center:[-27118403.38733027, 4852488.79124965],
          zoom: 12,
        }),
      });
    });