天地图带你玩转自驾游路线规划

创作时间:

2025-01-22 04:50:37

作者:

@小白创作中心

天地图带你玩转自驾游路线规划

随着自驾游的日益普及，如何规划一条既省时又省心的路线成为许多车主的难题。天地图，作为国家测绘地理信息局推出的地理信息综合服务网站，提供了强大的路线规划功能，可以帮助我们轻松解决这一问题。本文将详细介绍如何在Vue项目中集成天地图，并实现自驾游路线规划功能。

天地图简介

天地图集成了来自国家、省、市（县）各级测绘地理信息部门，以及相关政府部门、企事业单位、社会团体、公众的地理信息公共服务资源，向各类用户提供权威、标准、统一的在线地理信息综合服务。它不仅提供了基于地理位置的信息浏览、查询、搜索、量算等功能，还特别推出了驾车规划服务，能够根据输入的起点、终点和途经点，智能规划出最佳驾驶路线。

Vue项目集成天地图

要在Vue项目中集成天地图，首先需要在项目中引入天地图的JavaScript API。这可以通过在项目的index.html文件中添加以下代码来实现：

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的天地图key"></script>

接下来，可以在Vue组件中初始化天地图。以下是一个基本的示例：

<template>
  <div class="map-container">
    <div id="mapDiv" style="position: absolute; width: 100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const T = window.T;
      this.map = new T.Map("mapDiv");
      this.map.setMapType(T.TERRAIN_MAP);
      this.map.centerAndZoom(new T.LngLat(105.28501, 27.301693), 5);
      const control = new T.Control.Zoom();
      this.map.addControl(control);
    },
  },
};
</script>

这段代码首先在模板中创建了一个用于显示地图的div容器，然后在组件的mounted生命周期钩子中调用initMap方法初始化地图。在initMap方法中，通过window.T获取天地图对象，并创建一个新的地图实例。通过setMapType方法设置地图类型为地形图，然后通过centerAndZoom方法设置地图的中心点坐标和缩放级别。最后，添加缩放控件以方便用户操作。

实现自驾游路线规划

天地图提供了丰富的驾车规划功能，可以通过调用其API获取路线规划数据。以下是一个简单的示例，展示如何在Vue项目中实现自驾游路线规划：

<template>
  <div class="map-container">
    <div id="mapDiv" style="position: absolute; width: 100%; height: 100%"></div>
    <div class="input-container">
      <input v-model="startPoint" placeholder="请输入起点" />
      <input v-model="endPoint" placeholder="请输入终点" />
      <button @click="planRoute">规划路线</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      startPoint: "",
      endPoint: "",
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const T = window.T;
      this.map = new T.Map("mapDiv");
      this.map.setMapType(T.TERRAIN_MAP);
      this.map.centerAndZoom(new T.LngLat(105.28501, 27.301693), 5);
      const control = new T.Control.Zoom();
      this.map.addControl(control);
    },
    planRoute() {
      const T = window.T;
      const routeService = new T.RouteSearch();
      routeService.getRoute({
        from: this.startPoint,
        to: this.endPoint,
        policy: T.DrivingPolicy.LEAST_TIME,
        onSuccess: (result) => {
          const routeOverlay = new T.Polyline(result.route.trajectory, {
            color: "#FF0000",
            weight: 5,
            opacity: 0.8,
          });
          this.map.addOverLay(routeOverlay);
          this.map.setViewport(result.route.trajectory);
        },
        onError: (error) => {
          console.error("路线规划失败：", error);
        },
      });
    },
  },
};
</script>

在这个示例中，我们在模板中添加了两个输入框用于输入起点和终点，并添加了一个按钮用于触发路线规划功能。在planRoute方法中，我们创建了一个RouteSearch实例，并调用其getRoute方法进行路线规划。通过设置from和to参数指定起点和终点，通过policy参数指定规划策略（这里选择最快路线）。当规划成功时，会创建一个Polyline对象来表示路线，并将其添加到地图上显示。同时，通过setViewport方法调整地图视野以完整显示路线。