基于Vue框架开发的页面加载二维地图以及交互

一、在Vue项目中引入二维地图

1.切换到公司的仓库下载地图插件

npm config set registry http://nexus.toops.club/repository/npm-zui/

npm i tongmap-gl

2.在页面上加载二维地图

<template>
  <div style="width: 100%; height: 100%">
    <!-- 加载二维地图 -->
    <tong-gl-map
      :option="option"
      :region="region"
      :location="location"
      @maploadend="maploadend"
      ref="glmap"
    >
       <!-- 在地图上添加图层 -->
      <tong-gl-point-layer
        :option="pointOption"    
        :data="dateList"
      ></tong-gl-point-layer>
    </tong-gl-map>
  </div>
</template>

<script>
export default {
  name: "Map",
  components: { infoPoint },
  data() {
    return {
      location: {},
      //自定义配置图层中的图标
      pointOption: {
        parser: {
          lat: "y",
          lng: "x",
        },
        element: this.getElement(),  // 自定义展示的样式
        mode: "update",
        primaryKey: "id",
        elementOffset: [-6, 6],  //设置自定义元素的偏移
        autoOnView: true,
        zIndex: 5,
        type: "marker",
      },
      region: {
        type: "xyz",
        url: common.commonMapApi,  //配置的瓦片地址
      },
      option: {
        pitch: 125,  // 配置地图默认倾斜度
        backgroundColor: "rgba(0,25,46,0.9)",
        bounds: [   //设置最小边界
          [108.9212, 34.3703],
          [108.9499, 34.3835],
        ],
        maxBounds: [  //设置最大边界
          [104.875, 31.934],
          [112.731, 36.439],
        ],
      },
    };
  },
  computed: {
    dateList() {
      return this.$store.getters.dateList;   //地图上需要展示的点位数据
    },
  },
  methods: {
    /**
     * @name:设置地图指北操作
     * @msg:
     * @param {*}
     * @return {*}
     */
    setMapPointNorth() {
      this.map.setBearing(0);
    },
    /**
     * @name:设置地图不倾斜
     * @msg:
     * @param {*}
     * @return {*}
     */
    setMapnotTilted() {
      this.map.setPitch(0);
    },
    /**
     * @name:设置地图为倾斜
     * @msg:
     * @param {*}
     * @return {*}
     */
    setMaptTilted() {
      this.map.setPitch(125);  // 设置地图的倾斜度，最大值为125
    },
    /**
     * @name:地图放大操作
     * @msg:
     * @param {*}
     * @return {*}
     */
    mapEnlarge() {
      this.map.setZoom(this.map.getZoom() + 1);
    },
    /**
     * @name:地图缩小操作
     * @msg:
     * @param {*}
     * @return {*}
     */
    mapReduce() {
      this.map.setZoom(this.map.getZoom() - 1);
    },
    //地图加载完成事件，添加点位，圈层等操作都要在触发此事件后执行
    maploadend(evt) {
      //加载地图完成获得了地图对象
      this.map = evt.map;
      // 给map增加点击事件
      this.map.on("click", this.addSearchAlert.bind(this));
    },
     /**
     * @name:自定义展示的元素
     * @msg:
     * @param {*}
     * @return {*}
     */
    getElement() {
      return Vue.extend(infoPoint);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

3.设置二维地图显示边界的方法

对应获取边界的地址