Vue项目中实现天地图路径规划功能

Vue项目中实现天地图路径规划功能

随着地理信息技术的不断发展，地图服务已经成为现代Web应用的重要组成部分。天地图作为国内领先的地理信息服务提供商，提供了丰富的路径规划功能，包括公交规划和驾车规划。本文将详细介绍如何在Vue项目中实现天地图的路径规划功能，从基础的引入天地图API到复杂的驾车规划线路实现，一步步带你掌握天地图路径规划的核心技术。通过本文的学习，你将能够轻松地在自己的项目中集成天地图路径规划功能，为用户提供便捷的地图导航服务。

天地图的路径规划功能主要分为公交规划和驾车规划两大类。公交规划是根据输入的起点和终点查询公交地铁规划线路，而驾车规划则是根据输入的起点、终点和途经点规划查询驾车路线。这些功能广泛应用于出行规划、物流配送、城市交通管理等领域，为用户提供便捷的导航服务。

要在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.TMAP_HYBRID_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方法中，我们创建了一个地图实例，并设置了地图的中心点和缩放级别。最后，我们添加了一个缩放控件，以便用户可以方便地调整地图的缩放级别。

要实现公交规划功能，我们需要使用天地图的公交规划API。以下是一个简单的示例：

methods: {
  // ...其他方法
  getBusRoute(startPosition, endPosition) {
    const T = window.T;
    const url = "http://api.tianditu.gov.cn/transit?type=busline&postStr={\"startposition\":\"" + startPosition + "\",\"endposition\":\"" + endPosition + "\",\"linetype\":\"1\"}&tk=你的天地图key";

    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        if (data.resultCode === 0) {
          const results = data.results;
          for (const result of results) {
            const lines = result.lines;
            for (const line of lines) {
              const segments = line.segments;
              for (const segment of segments) {
                const segmentLine = segment.segmentLine;
                const points = segmentLine.map((point) => new T.LngLat(point.lng, point.lat));
                const polyline = new T.Polyline(points, {
                  color: "blue",
                  weight: 3,
                  opacity: 0.8,
                });
                this.map.addOverLay(polyline);
              }
            }
          }
        }
      })
      .catch((error) => {
        console.error("Error fetching bus route:", error);
      });
  },
},

在这个方法中，我们首先构建了公交规划的请求URL，然后使用fetch函数发送请求。当接收到响应后，我们解析JSON数据并检查resultCode是否为0（表示请求成功）。如果是，我们遍历结果中的每条线路和每个线段，将线段的坐标点转换为LngLat对象，并创建Polyline对象来绘制路线。最后，我们将Polyline对象添加到地图上作为覆盖物。

驾车规划功能的实现与公交规划类似，但需要处理多个途经点的情况。以下是一个示例：

methods: {
  // ...其他方法
  getDrivingRoute(points) {
    const T = window.T;
    const url = "http://api.tianditu.gov.cn/driving?postStr={\"points\":" + JSON.stringify(points) + "}&tk=你的天地图key";

    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        if (data.status === 0) {
          const routes = data.result.routes;
          for (const route of routes) {
            const path = route.path;
            const points = path.map((point) => new T.LngLat(point.lng, point.lat));
            const polyline = new T.Polyline(points, {
              color: "red",
              weight: 3,
              opacity: 0.8,
            });
            this.map.addOverLay(polyline);
          }
        }
      })
      .catch((error) => {
        console.error("Error fetching driving route:", error);
      });
  },
},

在这个方法中，我们构建了驾车规划的请求URL，其中points参数是一个包含起点、终点和途经点的数组。我们同样使用fetch函数发送请求，并在接收到响应后解析JSON数据。如果请求成功（status为0），我们遍历结果中的每条路线，将路线的坐标点转换为LngLat对象，并创建Polyline对象来绘制路线。最后，我们将Polyline对象添加到地图上作为覆盖物。

为了帮助你更好地理解如何在Vue项目中实现天地图路径规划功能，这里提供一个完整的Vue组件代码示例：

<template>
  <div class="map-container">
    <div id="mapDiv" style="position: absolute; width: 100%; height: 100%"></div>
    <button @click="getBusRoute('116.427562,39.939677', '116.349329,39.939132')">公交规划</button>
    <button @click="getDrivingRoute([{lng: 106.521436, lat: 29.532288}, {lng: 108.983569, lat: 34.285675}, {lng: 116.404449, lat: 39.920423}])">驾车规划</button>
  </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.TMAP_HYBRID_MAP);
      this.map.centerAndZoom(new T.LngLat(105.28501, 27.301693), 5);

      const control = new T.Control.Zoom();
      this.map.addControl(control);
    },
    getBusRoute(startPosition, endPosition) {
      const T = window.T;
      const url = "http://api.tianditu.gov.cn/transit?type=busline&postStr={\"startposition\":\"" + startPosition + "\",\"endposition\":\"" + endPosition + "\",\"linetype\":\"1\"}&tk=你的天地图key";

      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          if (data.resultCode === 0) {
            const results = data.results;
            for (const result of results) {
              const lines = result.lines;
              for (const line of lines) {
                const segments = line.segments;
                for (const segment of segments) {
                  const segmentLine = segment.segmentLine;
                  const points = segmentLine.map((point) => new T.LngLat(point.lng, point.lat));
                  const polyline = new T.Polyline(points, {
                    color: "blue",
                    weight: 3,
                    opacity: 0.8,
                  });
                  this.map.addOverLay(polyline);
                }
              }
            }
          }
        })
        .catch((error) => {
          console.error("Error fetching bus route:", error);
        });
    },
    getDrivingRoute(points) {
      const T = window.T;
      const url = "http://api.tianditu.gov.cn/driving?postStr={\"points\":" + JSON.stringify(points) + "}&tk=你的天地图key";

      fetch(url)
        .then((response) => response.json())
        .then((data) => {
          if (data.status === 0) {
            const routes = data.result.routes;
            for (const route of routes) {
              const path = route.path;
              const points = path.map((point) => new T.LngLat(point.lng, point.lat));
              const polyline = new T.Polyline(points, {
                color: "red",
                weight: 3,
                opacity: 0.8,
              });
              this.map.addOverLay(polyline);
            }
          }
        })
        .catch((error) => {
          console.error("Error fetching driving route:", error);
        });
    },
  },
};
</script>

<style>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}
</style>

这个示例代码包含了一个地图容器和两个按钮，分别用于触发公交规划和驾车规划功能。当用户点击按钮时，相应的规划功能会被调用，并在地图上绘制出规划路线。你可以将这段代码复制到你的Vue项目中，根据需要进行修改和扩展。

通过以上步骤，你已经掌握了在Vue项目中实现天地图路径规划功能的基本方法。无论是公交规划还是驾车规划，你都可以通过调用天地图的API并解析返回的数据来实现。希望本文能帮助你更好地理解和应用天地图的路径规划功能，为你的项目增添更多实用的地图服务。