基于vue利用openlayers加载天地图的影像图，地形图

原创

于 2021-11-22 11:35:24 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#openlayers #天地图 #影像图 #地形图

本文通过Vue项目实例，展示了如何使用OpenLayers库加载天地图的影像图和地形图，提供关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不说直接上代码

影像图

<template>
  <div>
    <div>影像图</div>
    <div class="map" id="olMap"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import {
   
    Tile as TileLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import Map from "ol/Map.js";
import View from "ol/View.js";
export default {
   
   
  data() {
   
   
    return {
   
   
      map: null,
    };
  },
  mounted() {
   
   
    this.initMap();
  },
  methods: {
   
   
    initMap()