vue2+天地图

三七初八

于 2024-05-10 14:45:41 发布

阅读量605

点赞数 5

文章标签：开发语言前端 vue.js

本文链接：https://blog.csdn.net/weixin_43870864/article/details/138665325

版权

天地图在vue2中的使用

1. 在index.html中引入，当前是把天地图放在了服务器，这样加载会快

<script src="http://xxxxxxxx/tianditu/tianditu.js"></script>

2. 在vue.config.js中设置全局T

3. 在页面中使用：实现效果：左侧查询指定网关后，可在天地图中显示信息，打点是根据接口返回的经纬度赋值

 configureWebpack: {
    externals: {
      T: "T", // 天地图全局名称
      // 项目内使用时的组件名称: 某外部组件对外暴露的名称
    },
 }

3. 在页面中使用(完整代码)

<template>
  <div class="equipmentMap">
    <el-input
      class="seachInput"
      placeholder="请输入网关名称或SN"
      suffix-icon="el-icon-search"
      @keyup.enter.native="getGatewayData"
      v-model="snOrName"
    >
    </el-input>
    <div class="mapBox" v-if="gatewayData.length">
      <div
        class="mapBox_frame"
        v-for="(item, index) in gatewayData"
        :key="index"
        @click="goIcon(item)"
      >
        <div class="name ellipsis" :title="item.name">
          网关名称：{{ item.name }}
        </div>
        <div class="other ellipsis">分组：{{ item.group.toString() }}</div>
        <div class="other ellipsis">SN:{{ item.sn }}</div>
      </div>
    </div>
    <div id="mapDiv"></div>
  </div>
</template>
<script>
import { list } from "@/api/deviceManagement/gateway";
export default {
  name: "EquipmentOverview",
  data() {
    return {
      gatewayData: [],
      snOrName: "",
      siteArr: [],
      map: null,
    };
  },
  filters: {},
  mounted() {
    this.getGatewayData();
    this.$nextTick(() => {
      this.loadMap();
    });
  },
  methods: {
    getGatewayData() {
      let params = {
        pageNum: 1,
        pageSize: 5000,
        snOrName: this.snOrName,
      };
      list(params).then((response) => {
        if (response.rows) {
          response.rows.map((v) => {
            v.group = [];
            v.deptDtoList.map((m) => {
              v.group.push(m.deptName);
            });
            this.siteArr.push({
              longitude: v.position ? v.position.split(",")[0] : "",
              latitude: v.position ? v.position.split(",")[1] : "",
              name: v.name,
              group: v.group,
              sn: v.sn,
            });
          });
          this.gatewayData = response.rows;
          if (this.siteArr.length > 0) {
            this.setPoint();
          }
        } else {
          this.gatewayData = [];
        }
      });
    },
    loadMap() {
      let that = this;
      let zoom = 16;
      //初始化地图对象
      this.map = new T.Map("mapDiv");
      //设置显示地图的中心点和级别
      let lng = 116.849;
      let lat = 28.202988;
      if (that.lnglat) {
        lng = that.lnglat.split(",")[0];
        lat = that.lnglat.split(",")[1];
      }
      this.map.centerAndZoom(new T.LngLat(lng, lat), zoom);
      //创建缩放平移控件对象
      let control = new T.Control.Zoom();
      //添加缩放平移控件
      this.map.addControl(control);
      this.map.setMinZoom(10);
      this.map.setMaxZoom(17);
    },
    setPoint() {
      const site = this.siteArr;
      site.forEach((item) => {
        // 创建标注对象
        const marker = new T.Marker(
          new T.LngLat(item.longitude, item.latitude),
          {
            icon: new T.Icon({
              iconUrl: require("./marker-icon.png"), // 引入自定义图标位置
              iconSize: new T.Point(18, 26), // 图标大小
            }),
          }
        );
        item.marker = marker;
        // 向地图上添加标注
        this.map.addOverLay(marker);
        // 点位的点击事件，展示弹窗
        this.addClickHandler(item, marker);
      });
    },
    // 点位弹窗
    addClickHandler(content, marker) {
      var T = window.T;
      const that = this;
      marker.addEventListener("click", function (e) {
        var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
        // 弹窗模版
        const sContent = `<div class="module-title" style="color: black;font-size: 14px;">网关名称：${content.name}</div>
       <div class="module-title" style="color: black;font-size: 14px;">分组：${content.group}</div>
       <div class="module-title" style="color: black;font-size: 14px;">SN：${content.sn}</div>
      `;
        // 相对于点偏移的位置
        markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
        that.map.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
      });
    },
    goIcon(item) {
      if (item.position) {
        setTimeout(() => {
          this.map.panTo(
            new T.LngLat(
              item.position ? item.position.split(",")[0] : "",
              item.position ? item.position.split(",")[1] : ""
            ),
            40
          );
          this.siteArr.map((v) => {
            if (v.sn == item.sn) {
              var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
              // 弹窗模版
              const sContent = `<div class="module-title" style="color: black;font-size: 14px;">网关名称：${v.name}</div>
       <div class="module-title" style="color: black;font-size: 14px;">分组：${v.group}</div>
       <div class="module-title" style="color: black;font-size: 14px;">SN：${v.sn}</div>
      `;
              // 相对于点偏移的位置
              markerInfoWin.setContent(sContent, {
                offset: new T.Point(0, -30),
              });
              this.map.openInfoWindow(
                markerInfoWin,
                new T.LngLat(
                  v.longitude ? v.longitude : "",
                  v.latitude ? v.latitude : ""
                )
              ); // 开启信息窗口
            }
          });
        }, 1000);
      } else {
        this.map.closeInfoWindow()
        return;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#mapDiv {
  width: 100%;
  height: 94vh;
}
.seachInput {
  position: absolute;
  z-index: 9999;
  margin: 0.6% 0px 0px 3%;
  width: 300px;
}
.mapBox {
  border: 1px solid #eaecf0;
  background-color: white;
  height: 303px;
  overflow: auto;
  width: 300px;
  position: absolute;
  z-index: 9999;
  margin: 2.7% 0px 0px 3%;
}
.mapBox_frame {
  height: 100px;
  width: 294px;
  background-color: white;
  border-bottom: 1px solid #efeded;
  padding: 14px;
  line-height: 24px;
  .name {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
  }
  .ellipsis {
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /*3表示只显示3行*/
    -webkit-box-orient: vertical;
  }
  .other {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
  }
}
.mapBox_frame:hover {
  background-color: rgb(221, 239, 250); /* 鼠标滑过时的背景颜色 */
  color: white; /* 鼠标滑过时的文本颜色 */
}
::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: rgba(144, 147, 153, 0.3);
}
.easy-scrollbar__wrap::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 20px;
  background: #ededed;
}
/deep/ .tdt-control-container {
  display: none !important;
}
</style>

在这里插入图片描述

实现需求：

选择位置，打点，获取经纬度，也可在搜索框中搜索指定位置进行打点

在这里插入图片描述

<CompDeviceMap
      v-if="mapFlag"
      :locaData="{ location: gatewayForm.address, lnglat }"
      @on-change-mapFlag="changemapFlag"
      @choose-map="chooseMap"
    ></CompDeviceMap>

data(){
lnglat: "", //经纬度
gatewayForm: {
        address:""
      },
}

 methods: {
    chooseMap(val) {
      this.gatewayForm.address = val.location;
      this.lnglat = val.lnglat;
    },
    changemapFlag(val) {
      this.mapFlag = val;
    },
}

子组件CompDeviceMap.vue

<template>
  <div>
    <el-dialog
      :visible.sync="mapFlag_"
      title="选择位置"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <div class="content-div">
          <div class="input-div">
            <span style="padding-top: 5px">当前位置：</span>
            <div>
              <div :class="redBox ? 'redBox' : ''">
                <el-input
                  v-model="location"
                  @input="inputDataChange($event)"
                  @keyup.enter.native="searchLocation()"
                ></el-input>
              </div>
              <div v-if="redBox" class="redText">
                地址的长度在1到100个字符之间
              </div>
            </div>
          </div>
          <el-button type="primary" @click="onSubmit" icon="el-icon-check"
            >确定</el-button
          >
        </div>
        <div id="mapDiv"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    mapFlag: {
      type: Boolean,
      default() {
        return true;
      },
    },
    locaData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      num: 0,
      location: "",
      lnglat: "",
      redBox: false,
      map: null,
    };
  },
  computed: {
    mapFlag_: {
      get() {
        return this.mapFlag;
      },
      set(val) {
        this.$emit("on-change-mapFlag", val);
      },
    },
  },
  methods: {
    loadMap() {
      let that = this;
      let zoom = 16;
      //初始化地图对象
      this.map = new T.Map("mapDiv");
      //设置显示地图的中心点和级别
      let lng = 116.85;
      let lat = 28.202988;
      if (that.lnglat) {
        lng = that.lnglat.split(",")[0];
        lat = that.lnglat.split(",")[1];
      }
      this.map.centerAndZoom(new T.LngLat(lng, lat), zoom);
      //创建缩放平移控件对象
      let control = new T.Control.Zoom();
      //添加缩放平移控件
      this.map.addControl(control);
      this.map.setMinZoom(12);
      this.map.setMaxZoom(17);
      // 根据经纬度进行地图标记
      if (that.lnglat) {
        var marker = new T.Marker(new T.LngLat(lng, lat));
        this.map.addOverLay(marker);
      }
      this.map.addEventListener("click", function (e) {
        //创建标注对象
        that.map.clearOverLays();
        let geocoder = new T.Geocoder();
        geocoder.getLocation(e.lnglat, (res) => {
          var marker = new T.Marker(
            new T.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
          );
          that.map.addOverLay(marker);
          that.searchResult(res);
          that.lnglat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`;
        });
      });
    },
    searchResult(res) {
      if (res.getStatus() == 0) {
        this.location = res.getAddress();
      } else {
        this.location = "";
      }
    },
    onSubmit() {
      if (this.num == 0 && !this.location) {
        this.inputDataChange();
        this.num++;
      } else {
        if (this.location && this.location.length < 101) {
          if (!this.location) {
            this.$message({
              message: "请选择定位地址",
              type: "warning",
            });
            return;
          }
          this.num = 0;
          this.mapFlag_ = false;
          this.$emit("choose-map", {
            location: this.location,
            lnglat: this.lnglat,
          });
        }
      }
    },
    inputDataChange() {
      if (!this.location || this.location.length > 100) {
        this.redBox = true;
      } else {
        this.redBox = false;
      }
    },
    searchLocation() {
      this.map.clearOverLays();
      let geocoder = new T.Geocoder();
      let that = this;
      geocoder.getPoint(this.location, function searchSite(result) {
        that.map.panTo(result.getLocationPoint(), 16);
        //创建标注对象
        var marker = new T.Marker(result.getLocationPoint());
        //向地图上添加标注
        that.map.addOverLay(marker);
        that.lnglat = `${result.getLocationPoint().lat},${result.getLocationPoint().lng}`;
      });
    },
  },
  mounted() {
    if (this.locaData) {
      this.location = this.locaData.location;
      this.lnglat = this.locaData.lnglat;
    }
    this.$nextTick(() => {
      this.loadMap();
    });
  },
};
</script>
<style lang="scss" scoped>
.content-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .input-div {
    span {
      width: 77px;
    }
    display: flex;
    .redText {
      color: #f56c6c;
      font-size: 12px;
    }
    // align-items: center;
  }
}
.redBox {
  /deep/.el-input__inner {
    border: 1px solid #f56c6c !important;
  }
}

#mapDiv {
  width: 100%;
  height: 400px;
}
/deep/ .tdt-control-container {
  display: none !important;
}
</style>