vue2框架集成OpenLayers插件渲染2D地图

地图渲染业务是常见业务场景之一，vue2框架集成OpenLayers插件渲染2D地图今天我们分享一下：

1、创建vue2项目

2、安装 OpenLayers

npm install ol --save

如图：

成功后显示：

3、获取天地图的访问 Key

首次使用需要注册天地图开发者账号 ：国家地理信息公共服务平台天地图。

最终获取KEY，点击查看

4、编写 Vue 组件加载天地图

示例代码：SimpleMap.vue

<template>
  <div id="map-container" ref="mapContainer"></div>
</template>

<script>
import 'ol/ol.css'; // 导入OpenLayers样式
import { Map, View } from 'ol'; // 引入地图和视图类
import TileLayer from 'ol/layer/Tile'; // 瓦片图层
import XYZ from 'ol/source/XYZ'; // XYZ格式数据源

export default {
  name: 'TiandituMap',
  data() {
    return {
      map: null, // 保存地图对象
    };
  },
  mounted() {
    this.initMap(); // 在组件挂载后初始化地图
  },
  methods: {
    initMap() {
      // 天地图 URL 模板（以经纬度坐标为例，使用 EPSG:4326）
        // const tdtUrl = 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=23dda919115f20893ec1182288f8';
         const tdtUrl = 'http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=23dda919115f20893ec1182288f8';
       //const tdtUrl = 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=23dda919115f20893ec1182288f8';
      // 创建瓦片图层，支持 0~7 的子域（防止请求被限制）
      const tdtLayer = new TileLayer({
        source: new XYZ({
          url: tdtUrl,
          wrapX: true, // 水平方向平铺
          tileGrid: null, // 如果需要自定义瓦片层级，可设置此项
          maxZoom: 18, // 天地图支持的最大缩放级别
          minZoom: 1,
          attributions: '© 天地图',
        }),
      });

      // 创建 OpenLayers 地图对象
      this.map = new Map({
        target: this.$refs.mapContainer, // 地图渲染容器
        layers: [tdtLayer], // 添加天地图图层
        view: new View({
          projection: 'EPSG:4326', // 天地图使用 EPSG:4326（经纬度）
          center: [116.397128, 39.916527], // 天安门经纬度
          zoom: 10, // 初始缩放级别
          minZoom: 1,
          maxZoom: 18,
        }),
      });
    },
  },
};
</script>

<style scoped>
#map-container {
  width: 100%;  /* 地图容器宽度 */
  height: 100vh; /* 地图容器高度占满整个页面 */
}
</style>

5、使用该地图组件

在 Vue 项目中引入并使用这个地图组件 YinD.vue。

<template>
  <div>
    <TiandituMap />
  </div>
</template>

<script>
import TiandituMap from './components/SimpleMap.vue'; // 引入地图组件

export default {
  components: {
    TiandituMap,
  },
};
</script>

6、挂载到main.js文件中

import Vue from 'vue'
import App from './YinD.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

7、结果展示

运行 Vue 项目，地图会加载天地图的瓦片，并以天安门为中心进行显示。

8、总结

使用 OpenLayers 加载天地图的瓦片，实现网络地图的展示。
EPSG:4326 是天地图的默认投影系，适合展示地理位置精确的点。
通过简单的设置，Vue2 可以集成丰富的地图功能，适用于各种业务场景。

到此、vue2框架集成OpenLayers插件渲染2D地图完成，下篇我们分享地图中图层叠加和遮罩的业务，敬请期待！