vue3 openlayers加载天地图卫星图

在 Vue 3 中使用 OpenLayers 加载天地图卫星图

随着地图服务的普及，越来越多的 Web 应用需要集成地图功能。天地图作为中国的一项国家地理信息公共服务平台，提供了丰富的地图数据服务。本文将介绍如何在 Vue 3 项目中使用 OpenLayers 加载天地图的卫星图层。

准备工作

在开始之前，请确保你的 Vue 3 项目中已经安装了 OpenLayers。如果尚未安装，可以通过以下命令进行安装：

npm install ol

创建地图组件

在 Vue 项目中，我们通常会将地图封装为一个组件。以下是一个简单的地图组件示例，它展示了如何初始化 OpenLayers 地图，并加载天地图的卫星图层。

组件模板：

在组件的 <template> 部分，定义地图容器。

<template>
  <div class="tiandituMap" ref="mapContainer" id="mapDiv"></div>
</template>

组件脚本：

在 <script> 部分，首先引入 OpenLayers 所需的资源。然后，在 mounted 钩子中初始化地图，并添加天地图的卫星图层。

<script>
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {getWidth, getTopLeft} from 'ol/extent';
import {get as getProjection, fromLonLat} from 'ol/proj';

export default {
  // ...
  methods: {
    initMap() {
      // 天地图影像底图的WMTS服务地址
      const tiandituUrl = 'https://t0.tianditu.gov.cn/img_w/wmts?tk=您的天地图密钥';

      // 创建WMTS瓦片网格
      const projection = getProjection('EPSG:3857'); // 天地图使用的投影
      const resolutions = [];
      const matrixIds = [];
      const maxResolution = getWidth(projection.getExtent()) / 256;

      for (let i = 0; i < 18; i++) {
        resolutions[i] = maxResolution / Math.pow(2, i);
        matrixIds[i] = i.toString();
      }

      const tileGrid = new WMTSTileGrid({
        origin: getTopLeft(projection.getExtent()),
        resolutions: resolutions,
        matrixIds: matrixIds,
      });

// 创建WMTS图层
      const wmtsLayer = new TileLayer({
        source: new WMTS({
          url: tiandituUrl,
          layer: 'img',
          matrixSet: 'w',
          format: 'tiles',
          projection: projection,
          tileGrid: tileGrid,
          style: 'default',
          wrapX: true
        }),
      });
    }
  }
};
</script>

组件样式：

在 <style> 部分，设置地图容器的样式，确保地图可以正确显示。

<style scoped lang="scss">
.tiandituMap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
</style>

加载天地图卫星图层

在 initMap 方法中，我们首先定义了天地图卫星图层的 WMTS 服务地址。然后，我们创建了一个 WMTS 瓦片网格，设置了地图的投影、分辨率和矩阵 ID。接着，我们创建了一个 WMTS 图层，并将其添加到地图实例中。

const wmtsLayer = new TileLayer({
  source: new WMTS({
    url: tiandituUrl,
    layer: 'img',
    matrixSet: 'w',
    format: 'tiles',
    projection: projection,
    tileGrid: tileGrid,
    style: 'default',
    wrapX: true
  }),
});

设置地图视图

我们将地图的中心点设置为湖南省的经纬度坐标，并转换为 OpenLayers 使用的 EPSG:3857 投影坐标。然后，我们设置了地图的初始缩放级别。

const hunanCenter = fromLonLat([112.9834, 28.11266], 'EPSG:3857');
this.map = new Map({
  layers: [
    wmtsLayer,
  ],
  target: this.$refs.mapContainer,
  view: new View({
    center: hunanCenter,
    zoom: 2,
    projection: projection
  }),
});

结论

通过上述步骤，我们在 Vue 3 应用中成功集成了 OpenLayers 地图，并加载了天地图的卫星图层。这为应用提供了丰富的地理信息展示能力。天地图的卫星图层为用户提供了高质量的影像数据，非常适合用于地图背景展示、地理信息分析等场景。

版本

在vue2项目中如果报错，可以适当降低版本号vue2 项目使用ol openlayers报错

"ol": "^9.0.0",

演示地址

vue3 openlayers加载天地图卫星图

实例代码下载

代码运行环境vue3 vite js nodejs 16