[项目地址:https://gitee.com/fan-caixia/tianditumap)

微信截图_20240619163825.png

代码结构：

• 服务端代码

public/index.html

<script
type="text/javascript"
src="https://api.tianditu.gov.cn/api?v=4.0&tk=天地图密钥"
</script>

代码片段:

<!--
以山西临汾为例，绘制边界线
 -->

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

<script>
import * as PointsData from "../../utils/pointslinfen.js";

export default {
  props: {},
  data() {
    return {
      bounds: [],
    };
  },
  mounted() {
    this.tdtMap = new window.T.Map("mapDiv", {
      attributionControl: false,
      inertia: false,
    });
    setTimeout(() => {
      this.onLoad();
    }, 500);
  },

  created() {},
  methods: {
    MarkerClick(e) {
      console.log(e.lnglat.getLng() + "," + e.lnglat.getLat(), "坐标信息");
    },

    onLoad() {
      // 先清除坐标
      let newMarker = this.tdtMap.getOverlays(); // 获取到了地图上的所有点

      for (let i = 0; i < newMarker.length; i++) {
        this.tdtMap.removeOverLay(newMarker[i]);
      }

      var zoom = 8;

      // 根据经纬度设置中心点
      this.tdtMap.centerAndZoom(
        new window.T.LngLat("111.646", "36.0067"),
        zoom
      );

      this.tdtMap.setStyle("indigo"); // map.setStyle是用来设置颜色的
      // this.tdtMap.setStyle('black');
      //向地图上添加自定义标注
      var marker = new window.T.Marker(
        new window.T.LngLat("111.646", "36.0067")
      );
      marker.addEventListener("click", this.MarkerClick);

      this.tdtMap.addOverLay(marker);

      this.setlinfenArea(); // 绘制边界线
    },

    setlinfenArea() {
      // 获取行政区划边界信息
      let res = PointsData.default.PointsData;

      var countries = res.features;
      var sc = countries[0];

      var bounds = sc.geometry.coordinates[0][0];

      this.drawLine(bounds);
    },

    drawLine(lines) {
      // 绘制边界线
      let style = {
        color: "#81a5b9",
        weight: 3,
        opacity: 1,
        lineStyle: "solid", // 实线;dashed虚线
        fillColor: "transprent",
        fillOpacity: 0, // 透明度
      };
      let points = [];
      lines.forEach((line) => {
        // lines是边界经纬度组成的数组
        var point = new window.T.LngLat(line[0], line[1]);
        points.push(point);
      });
      // console.log(points)
      var poly = new window.T.Polygon(points, style);
      this.tdtMap.addOverLay(poly);
    },
  },
};
</script>

<style lang="less" scoped>
#mapDiv {
  width: 100%;
  height: 500px;
}
</style>