相关资料

• https://segmentfault.com/a/1190000044688235
• https://zhuanlan.zhihu.com/p/641436984
• https://blog.csdn.net/m0_74149462/article/details/147503856
• https://www.cnblogs.com/asdlijian/p/13518837.html
• openlayers中文文档
  • https://www.openlayers.vip/apidoc/

实现效果

• https://www.earthol.com/gd/
• https://map.bmcx.com/

示例代码

<template>
  <div class="app">
    <div class="map-container" ref="map_ref"></div>
  </div>
</template>

<script>
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import XYZ from "ol/source/XYZ.js";

export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // const map = new Map({
      //   target: this.$refs.map_ref,
      //   layers: [
      //     new TileLayer({
      //       source: new XYZ({
      //         url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
      //       }),
      //     }),
      //   ],
      //   view: new View({
      //     center: [0, 0],
      //     zoom: 2,
      //   }),
      // });

      // 创建卫星图层
      const satelliteLayer = new TileLayer({
        source: new XYZ({
          url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          maxZoom: 18,
        }),
        opacity: 0.9,
        zIndex: 1,
      });

      // 创建街道图层作为备用
      const streetLayer = new TileLayer({
        source: new XYZ({
          url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
          maxZoom: 18,
        }),
        zIndex: 0,
        visible: false,
      });
      const map = new Map({
        target: this.$refs.map_ref,
        layers: [satelliteLayer, streetLayer],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.map-container {
  height: 500px;
  // background-color: orange;
}
</style>