[項(xiàng)目地址:https://gitee.com/fan-caixia/tianditumap)

微信截圖_20240619163825.png

代碼結(jié)構(gòu)：

• 服務(wù)端代碼

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(), "坐標(biāo)信息");
    },

    onLoad() {
      // 先清除坐標(biāo)
      let newMarker = this.tdtMap.getOverlays(); // 獲取到了地圖上的所有點(diǎn)

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

      var zoom = 8;

      // 根據(jù)經(jīng)緯度設(shè)置中心點(diǎn)
      this.tdtMap.centerAndZoom(
        new window.T.LngLat("111.646", "36.0067"),
        zoom
      );

      this.tdtMap.setStyle("indigo"); // map.setStyle是用來設(shè)置顏色的
      // this.tdtMap.setStyle('black');
      //向地圖上添加自定義標(biāo)注
      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() {
      // 獲取行政區(qū)劃邊界信息
      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", // 實(shí)線;dashed虛線
        fillColor: "transprent",
        fillOpacity: 0, // 透明度
      };
      let points = [];
      lines.forEach((line) => {
        // lines是邊界經(jīng)緯度組成的數(shù)組
        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>