UniApp邂逅Leaflet：在App端畅游天地图

2023-05-30 01:29:45

在 Uniapp 应用中整合 Leaflet 和天地图：打造交互式地图应用

简介

Uniapp 是一款跨平台开发框架，深受开发者喜爱。Leaflet 是一个轻量级 JavaScript 库，可以轻松创建交互式地图。天地图是由国家测绘地理信息局提供的公共地图服务，包含丰富的地理数据。本文将指导你在 Uniapp 应用中集成 Leaflet 和天地图，打造高品质的地图应用。

安装插件

首先，你需要安装 Leaflet 和天地图插件：

uni-app install @asymmetrik/vue-leaflet
uni-app install @2gis/uni-天地图-uniapp-3d

创建地图组件

在你的 Uniapp 项目中创建一个名为 Map.vue 的组件：

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import AMap from '@2gis/uni-天地图-uniapp-3d';

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map').setView([39.915, 116.397], 13);

      L.tileLayer('https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
        attribution: '&copy; <a href="https://www.google.com/maps">Google</a>',
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
      }).addTo(this.map);

      AMap.initAMapAPI('你的天地图key').then(() => {
        let tdTLayer = new AMap.TileLayer.TianDiTu({
          key: '你的天地图key',
          type: 'vec',
        });

        tdTLayer.addTo(this.map);
      });
    },
  },
};
</script>

集成到 App.vue

在你的 App.vue 文件中引入 Map.vue 组件：

<template>
  <div>
    <Map></Map>
  </div>
</template>

<script>
import Map from './Map.vue';

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