1、申请天地图key

1.1注册账号

注册地址：https://uums.tianditu.gov.cn/register

1.2 申请开发者

登录后，申请开发者https://console.tianditu.gov.cn/api/register

1.3 创建应用

点击控制台，创建应用

在这里插入图片描述

1.4 天地图key

在这里插入图片描述

2、天地图api使用

2.1首先再vue的public文件夹下面的index.html引入天地图js

 <script
      type="text/javascript"
      src="http://api.tianditu.gov.cn/api?v=4.0&tk=自己天地图的key"
    ></script>

在这里插入图片描述

2.2在vue页面里面

在这里插入图片描述

2.2 给天地图加图层

在这里插入图片描述

3 、地图操作

3.1放大缩小

在这里插入图片描述

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
        map: '',
        zoom: 18
    };
  },
  computed: {},
  mounted() {
    this.map = new T.Map("map");
    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
    this.map.enableScrollWheelZoom();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

3.2移动地图位置并指定缩放精度

将地图中心点，移动到指定位置，同时指定缩放精度

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
    };
  },
  computed: {},
  mounted() {
    this.map = new T.Map("map");
    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
    this.map.enableScrollWheelZoom();
    setTimeout(() => {
      // 将地图中心点，移动到指定位置，同时指定缩放精度
      this.map.panTo(new T.LngLat(116.64899, 40.12948), 12);
    }, 2000);
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

3.3 地图设置指定缩放等级

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
    };
  },
  computed: {},
  mounted() {
    this.map = new T.Map("map");
    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
    this.map.enableScrollWheelZoom();
    setTimeout(() => {
      // 设置地图的缩放等级
      this.map.setZoom(14);
    }, 2000);
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

3.4 设置地图不能被拖拽，两秒后开启拖拽地图

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
    };
  },
  computed: {},
  mounted() {
    this.map = new T.Map("map");
    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
    this.map.enableScrollWheelZoom();
    this.map.disableDrag();
    setTimeout(() => {
      alert("地图可以拖拽");
      // 设置地图的缩放等级
      this.map.enableDrag();
    }, 2000);
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

3.5 获取地图的可视区域

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

4、地图参数设置

4.1设置地图中心点及缩放级别

根据指定的经度、纬度、缩放级别设置地图中心点

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

4.2 是否允许地图双击鼠标放大、是否允许鼠标滚轮放大缩小地图、是否允许鼠标拖拽地图、是否允许键盘操作地图

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

5 、地图信息获取

5.1 获取地图中心点位置、获取当前缩放级别

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

6 、自定义图层

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
    };
  },
  computed: {},
  mounted() {
    var imageURL =
      "http://t0.tianditu.gov.cn/img_w/wmts?" +
      "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
      "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=天地图key";

    // 创建自定义图层对象
    var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
    var config = { layers: [lay] };
    //   初始化地图对象

    var map = new T.Map("map", config);
    var zoom = 18;
    map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
    map.enableScrollWheelZoom();
    // this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

7、叠加其他的WMS服务图层

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
        <input
          type="button"
          value="叠加WMS 服务图层"
          @click="
            addWmsLayer(
              'topp:states',
              'http://localhost:8080/assets/logo'
            )
          "
        /><br />
        <input
          type="button"
          value="删除wms 服务图层"
          @click="delWmsLayer"
        /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
    addWmsLayer(layers, url) {
      const config = {
        version: "1.1.0", //请求服务的版本
        request: "GetMap",
        layers: layers,
        transparent: true, //输出图像背景是否透明
        styles: "", //每个请求图层的用","分隔的描述样式
        format: "image/png", //输出图像的类型
      };
      this.getWms(url, config);
    },
    getWms(url, config) {
      if (this.wmsLayer) {
        this.map.removeLayer(this.wmsLayer);
      }
      this.wmsLayer = new T.TileLayer.WMS(url, config);
      this.map.addLayer(this.wmsLayer);
    },
    delWmsLayer() {
      this.map.removeLayer(this.wmsLayer);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

8、添加基本控件

添加缩放控件、添加比例尺、添加鹰眼控件、添加版权信息、加载地图类型控件、添加符号控件

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
        <input
          type="button"
          value="叠加WMS 服务图层"
          @click="
            addWmsLayer('topp:states', 'http://localhost:8080/assets/logo')
          "
        /><br />
        <input
          type="button"
          value="删除wms 服务图层"
          @click="delWmsLayer"
        /><br />
        <input
          type="button"
          value="添加缩放控件"
          @click="addZoomControl"
        /><br />
        <input
          type="button"
          value="添加比例尺控件"
          @click="addScaleControl"
        /><br />
        <input
          type="button"
          value="添加鹰眼控件"
          @click="addOverViewMapControl"
        /><br />
        <input
          type="button"
          value="添加地图版权控件"
          @click="addcopyControl"
        /><br />
        <input
          type="button"
          value="添加地图类型控件"
          @click="addMapType"
        /><br />
        <input
          type="button"
          value="添加符号类控件 "
          @click="addMilitarySymbols"
        /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
    addWmsLayer(layers, url) {
      const config = {
        version: "1.1.0", //请求服务的版本
        request: "GetMap",
        layers: layers,
        transparent: true, //输出图像背景是否透明
        styles: "", //每个请求图层的用","分隔的描述样式
        format: "image/png", //输出图像的类型
      };
      this.getWms(url, config);
    },
    getWms(url, config) {
      if (this.wmsLayer) {
        this.map.removeLayer(this.wmsLayer);
      }
      this.wmsLayer = new T.TileLayer.WMS(url, config);
      this.map.addLayer(this.wmsLayer);
    },
    delWmsLayer() {
      this.map.removeLayer(this.wmsLayer);
    },
    addZoomControl() {
      if (this.zoomControl) {
        return;
      }
      this.zoomControl = new T.Control.Zoom();
      this.map.addControl(this.zoomControl);
      this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
    },
    addScaleControl() {
      if (this.scaleControl) {
        return;
      }
      this.scaleControl = new T.Control.Scale();
      this.map.addControl(this.scaleControl);
    },
    addOverViewMapControl() {
      if (this.overViewMapControl) {
        return;
      }
      this.overViewMapControl = new T.Control.OverviewMap({
        isOpen: true,
        size: new T.Point(200, 200),
        // 设置小地图，鹰眼的初始化大小
      });
      this.map.addControl(this.overViewMapControl);
    },
    addcopyControl() {
      if (this.copyControl) {
        return;
      }
      this.copyControl = new T.Control.Copyright({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化地图版权的位置
      });
      this.map.addControl(this.copyControl);

      // 返回地图的可视区域
      const bs = this.map.getBounds();
      // 添加版权信息
      this.copyControl.addCopyright({
        id: 10,
        content: `<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
        bounds: bs,
      });
    },
    addMapType() {
      if (this.mapTypeControl) {
        return;
      }
      this.mapTypeControl = new T.Control.MapType();
      this.map.addControl(this.mapTypeControl);
    },
    addMilitarySymbols() {
      // if (this.militarySymbols) {
      //     return
      // }
      //允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom();
      const militarySymbols = new T.Control.militarySymbols({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化符号位置
      });
      this.map.addControl(militarySymbols);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

9 、地图右键菜单

9.1 简单添加右键菜单

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
        <input
          type="button"
          value="叠加WMS 服务图层"
          @click="
            addWmsLayer('topp:states', 'http://localhost:8080/assets/logo')
          "
        /><br />
        <input
          type="button"
          value="删除wms 服务图层"
          @click="delWmsLayer"
        /><br />
        <input
          type="button"
          value="添加缩放控件"
          @click="addZoomControl"
        /><br />
        <input
          type="button"
          value="添加比例尺控件"
          @click="addScaleControl"
        /><br />
        <input
          type="button"
          value="添加鹰眼控件"
          @click="addOverViewMapControl"
        /><br />
        <input
          type="button"
          value="添加地图版权控件"
          @click="addcopyControl"
        /><br />
        <input
          type="button"
          value="添加地图类型控件"
          @click="addMapType"
        /><br />
        <input
          type="button"
          value="添加符号类控件 "
          @click="addMilitarySymbols"
        /><br />
        <input type="button" value="添加右键菜单" @click="addMenu" /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
      menus: "",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
    addWmsLayer(layers, url) {
      const config = {
        version: "1.1.0", //请求服务的版本
        request: "GetMap",
        layers: layers,
        transparent: true, //输出图像背景是否透明
        styles: "", //每个请求图层的用","分隔的描述样式
        format: "image/png", //输出图像的类型
      };
      this.getWms(url, config);
    },
    getWms(url, config) {
      if (this.wmsLayer) {
        this.map.removeLayer(this.wmsLayer);
      }
      this.wmsLayer = new T.TileLayer.WMS(url, config);
      this.map.addLayer(this.wmsLayer);
    },
    delWmsLayer() {
      this.map.removeLayer(this.wmsLayer);
    },
    addZoomControl() {
      if (this.zoomControl) {
        return;
      }
      this.zoomControl = new T.Control.Zoom();
      this.map.addControl(this.zoomControl);
      this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
    },
    addScaleControl() {
      if (this.scaleControl) {
        return;
      }
      this.scaleControl = new T.Control.Scale();
      this.map.addControl(this.scaleControl);
    },
    addOverViewMapControl() {
      if (this.overViewMapControl) {
        return;
      }
      this.overViewMapControl = new T.Control.OverviewMap({
        isOpen: true,
        size: new T.Point(200, 200),
        // 设置小地图，鹰眼的初始化大小
      });
      this.map.addControl(this.overViewMapControl);
    },
    addcopyControl() {
      if (this.copyControl) {
        return;
      }
      this.copyControl = new T.Control.Copyright({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化地图版权的位置
      });
      this.map.addControl(this.copyControl);

      // 返回地图的可视区域
      const bs = this.map.getBounds();
      // 添加版权信息
      this.copyControl.addCopyright({
        id: 10,
        content: `<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
        bounds: bs,
      });
    },
    addMapType() {
      if (this.mapTypeControl) {
        return;
      }
      this.mapTypeControl = new T.Control.MapType();
      this.map.addControl(this.mapTypeControl);
    },
    addMilitarySymbols() {
      // if (this.militarySymbols) {
      //     return
      // }
      //允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom();
      const militarySymbols = new T.Control.militarySymbols({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化符号位置
      });
      this.map.addControl(militarySymbols);
    },
    addMenu() {
      this.menus = new T.ContextMenu({
        width: 50,
      });
      const menu1 = new T.MenuItem("放大", this.zoomIn);
      const menu2 = new T.MenuItem("缩小", this.zoomOut);
      this.menus.addItem(menu1);
      this.menus.addItem(menu2);
      this.map.addContextMenu(this.menus);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

9.2 添加带有分割线的右键菜单

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
        <input
          type="button"
          value="叠加WMS 服务图层"
          @click="
            addWmsLayer('topp:states', 'http://localhost:8080/assets/logo')
          "
        /><br />
        <input
          type="button"
          value="删除wms 服务图层"
          @click="delWmsLayer"
        /><br />
        <input
          type="button"
          value="添加缩放控件"
          @click="addZoomControl"
        /><br />
        <input
          type="button"
          value="添加比例尺控件"
          @click="addScaleControl"
        /><br />
        <input
          type="button"
          value="添加鹰眼控件"
          @click="addOverViewMapControl"
        /><br />
        <input
          type="button"
          value="添加地图版权控件"
          @click="addcopyControl"
        /><br />
        <input
          type="button"
          value="添加地图类型控件"
          @click="addMapType"
        /><br />
        <input
          type="button"
          value="添加符号类控件 "
          @click="addMilitarySymbols"
        /><br />
        <input type="button" value="添加右键菜单" @click="addMenu" /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
      menus: "",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
    addWmsLayer(layers, url) {
      const config = {
        version: "1.1.0", //请求服务的版本
        request: "GetMap",
        layers: layers,
        transparent: true, //输出图像背景是否透明
        styles: "", //每个请求图层的用","分隔的描述样式
        format: "image/png", //输出图像的类型
      };
      this.getWms(url, config);
    },
    getWms(url, config) {
      if (this.wmsLayer) {
        this.map.removeLayer(this.wmsLayer);
      }
      this.wmsLayer = new T.TileLayer.WMS(url, config);
      this.map.addLayer(this.wmsLayer);
    },
    delWmsLayer() {
      this.map.removeLayer(this.wmsLayer);
    },
    addZoomControl() {
      if (this.zoomControl) {
        return;
      }
      this.zoomControl = new T.Control.Zoom();
      this.map.addControl(this.zoomControl);
      this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
    },
    addScaleControl() {
      if (this.scaleControl) {
        return;
      }
      this.scaleControl = new T.Control.Scale();
      this.map.addControl(this.scaleControl);
    },
    addOverViewMapControl() {
      if (this.overViewMapControl) {
        return;
      }
      this.overViewMapControl = new T.Control.OverviewMap({
        isOpen: true,
        size: new T.Point(200, 200),
        // 设置小地图，鹰眼的初始化大小
      });
      this.map.addControl(this.overViewMapControl);
    },
    addcopyControl() {
      if (this.copyControl) {
        return;
      }
      this.copyControl = new T.Control.Copyright({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化地图版权的位置
      });
      this.map.addControl(this.copyControl);

      // 返回地图的可视区域
      const bs = this.map.getBounds();
      // 添加版权信息
      this.copyControl.addCopyright({
        id: 10,
        content: `<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
        bounds: bs,
      });
    },
    addMapType() {
      if (this.mapTypeControl) {
        return;
      }
      this.mapTypeControl = new T.Control.MapType();
      this.map.addControl(this.mapTypeControl);
    },
    addMilitarySymbols() {
      // if (this.militarySymbols) {
      //     return
      // }
      //允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom();
      const militarySymbols = new T.Control.militarySymbols({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化符号位置
      });
      this.map.addControl(militarySymbols);
    },
    // addMenu() {
    //   this.menus = new T.ContextMenu({
    //     width: 50,
    //   });
    //   const menu1 = new T.MenuItem("放大", this.zoomIn);
    //   const menu2 = new T.MenuItem("缩小", this.zoomOut);
    //   this.menus.addItem(menu1);
    //   this.menus.addItem(menu2);
    //   this.map.addContextMenu(this.menus);
    // },
    addMenu() {
      this.menus = new T.ContextMenu({
        width: 70,
      });
      const menu1 = new T.MenuItem("放大", this.zoomIn);
      const menu2 = new T.MenuItem("缩小", this.zoomOut);
      const menu3 = new T.MenuItem("放大最大", this.setZoom);
      const menu4 = new T.MenuItem("查看全国", this.setTotal);
      this.menus.addItem(menu1);
      this.menus.addItem(menu2);
      this.menus.addSeparator();
      this.menus.addItem(menu3);
      this.menus.addItem(menu4);
      this.map.addContextMenu(this.menus);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述

9.3获取右键菜单的坐标

<template>
  <div class="home">
    天地图
    <div id="map">
      <div class="btns">
        <input type="button" value="放大 +" @click="ZoomUp" />
        <input type="button" value="缩小 -" @click="ZoomDown" />
        经度：<input type="text" v-model="lng" />
        <br />
        纬度:<input type="text" v-model="lat" />
        <br />
        缩放级别：<input type="text" v-model="zoom" />
        <br />
        <input type="button" value="设置中心点" @click="setCenterAndZoom" />
        <input
          type="button"
          value="开启双击放大地图"
          @click="enableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="禁止双击放大地图"
          @click="disableDoubleClickZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标滚轮缩放地图"
          @click="enableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="禁止鼠标滚轮缩放地图"
          @click="disableScrollWheelZoom"
        /><br />
        <input
          type="button"
          value="允许鼠标惯性拖拽"
          @click="enableInertia"
        /><br />
        <input
          type="button"
          value="禁止鼠标惯性拖拽"
          @click="disableInertia"
        /><br />
        <input
          type="button"
          value="允许键盘操作地图"
          @click="enableKeyboard"
        /><br />
        <input
          type="button"
          value="禁止键盘操作地图"
          @click="disableKeyboard"
        /><br />
        <input
          type="button"
          value="获取地图中心点坐标"
          @click="getCenter"
        /><br />
        <input
          type="button"
          value="获取当前地图的缩放级别"
          @click="getZoom"
        /><br />
        <input
          type="button"
          value="叠加WMS 服务图层"
          @click="
            addWmsLayer('topp:states', 'http://localhost:8080/assets/logo')
          "
        /><br />
        <input
          type="button"
          value="删除wms 服务图层"
          @click="delWmsLayer"
        /><br />
        <input
          type="button"
          value="添加缩放控件"
          @click="addZoomControl"
        /><br />
        <input
          type="button"
          value="添加比例尺控件"
          @click="addScaleControl"
        /><br />
        <input
          type="button"
          value="添加鹰眼控件"
          @click="addOverViewMapControl"
        /><br />
        <input
          type="button"
          value="添加地图版权控件"
          @click="addcopyControl"
        /><br />
        <input
          type="button"
          value="添加地图类型控件"
          @click="addMapType"
        /><br />
        <input
          type="button"
          value="添加符号类控件 "
          @click="addMilitarySymbols"
        /><br />
        <input type="button" value="添加右键菜单" @click="addMenu" /><br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      map: "",
      zoom: 18,
      lng: "116.64899",
      lat: "40.12948",
      menus: "",
    };
  },
  computed: {},
  mounted() {
    this.initMap();
  },
  methods: {
    ZoomUp() {
      // 放大一级地图
      this.map.zoomIn();
    },
    ZoomDown() {
      // 缩小一级地图
      this.map.zoomOut();
    },
    initMap() {
      this.map = new T.Map("map");
      this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), this.zoom);
      this.map.enableScrollWheelZoom();
      const bs = this.map.getBounds(); //获取可视区域
      var bssw = bs.getSouthWest(); //可视区域左下角
      var bsne = bs.getNorthEast(); //可视区域右上角
      // 可视区域变化，缩放等级、屏显分辨率、中心点 lng 经度  lat 纬度
      console.log("bssw", bssw);
      console.log("bsne", bsne);
    },
    setCenterAndZoom() {
      this.map.centerAndZoom(new T.LngLat(this.lng, this.lat), this.zoom);
    },
    enableDoubleClickZoom() {
      this.map.enableDoubleClickZoom();
    },
    disableDoubleClickZoom() {
      this.map.disableDoubleClickZoom();
    },
    enableScrollWheelZoom() {
      this.map.enableScrollWheelZoom();
    },
    disableScrollWheelZoom() {
      this.map.disableScrollWheelZoom();
    },
    enableInertia() {
      this.map.enableInertia();
    },
    disableInertia() {
      this.map.disableInertia();
    },
    enableKeyboard() {
      this.map.enableKeyboard();
    },
    disableKeyboard() {
      this.map.disableKeyboard();
    },
    getCenter() {
      const c = this.map.getCenter();
      alert(`经度 ${c.getLng()}  纬度：${c.getLat()}`);
    },
    getZoom() {
      alert(`当前地图缩放级别为：${this.map.getZoom()}`);
    },
    addWmsLayer(layers, url) {
      const config = {
        version: "1.1.0", //请求服务的版本
        request: "GetMap",
        layers: layers,
        transparent: true, //输出图像背景是否透明
        styles: "", //每个请求图层的用","分隔的描述样式
        format: "image/png", //输出图像的类型
      };
      this.getWms(url, config);
    },
    getWms(url, config) {
      if (this.wmsLayer) {
        this.map.removeLayer(this.wmsLayer);
      }
      this.wmsLayer = new T.TileLayer.WMS(url, config);
      this.map.addLayer(this.wmsLayer);
    },
    delWmsLayer() {
      this.map.removeLayer(this.wmsLayer);
    },
    addZoomControl() {
      if (this.zoomControl) {
        return;
      }
      this.zoomControl = new T.Control.Zoom();
      this.map.addControl(this.zoomControl);
      this.zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
    },
    addScaleControl() {
      if (this.scaleControl) {
        return;
      }
      this.scaleControl = new T.Control.Scale();
      this.map.addControl(this.scaleControl);
    },
    addOverViewMapControl() {
      if (this.overViewMapControl) {
        return;
      }
      this.overViewMapControl = new T.Control.OverviewMap({
        isOpen: true,
        size: new T.Point(200, 200),
        // 设置小地图，鹰眼的初始化大小
      });
      this.map.addControl(this.overViewMapControl);
    },
    addcopyControl() {
      if (this.copyControl) {
        return;
      }
      this.copyControl = new T.Control.Copyright({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化地图版权的位置
      });
      this.map.addControl(this.copyControl);

      // 返回地图的可视区域
      const bs = this.map.getBounds();
      // 添加版权信息
      this.copyControl.addCopyright({
        id: 10,
        content: `<a href="http://wwww.baidu.com">这里是自定义版权控件的位置，可以加超链接</a>`,
        bounds: bs,
      });
    },
    addMapType() {
      if (this.mapTypeControl) {
        return;
      }
      this.mapTypeControl = new T.Control.MapType();
      this.map.addControl(this.mapTypeControl);
    },
    addMilitarySymbols() {
      // if (this.militarySymbols) {
      //     return
      // }
      //允许鼠标滚轮缩放地图
      this.map.enableScrollWheelZoom();
      const militarySymbols = new T.Control.militarySymbols({
        position: T_ANCHOR_TOP_LEFT,
        // 初始化符号位置
      });
      this.map.addControl(militarySymbols);
    },
    // addMenu() {
    //   this.menus = new T.ContextMenu({
    //     width: 50,
    //   });
    //   const menu1 = new T.MenuItem("放大", this.zoomIn);
    //   const menu2 = new T.MenuItem("缩小", this.zoomOut);
    //   this.menus.addItem(menu1);
    //   this.menus.addItem(menu2);
    //   this.map.addContextMenu(this.menus);
    // },
    // addMenu() {
    //   this.menus = new T.ContextMenu({
    //     width: 70,
    //   });
    //   const menu1 = new T.MenuItem("放大", this.zoomIn);
    //   const menu2 = new T.MenuItem("缩小", this.zoomOut);
    //   const menu3 = new T.MenuItem("放大最大", this.setZoom);
    //   const menu4 = new T.MenuItem("查看全国", this.setTotal);
    //   this.menus.addItem(menu1);
    //   this.menus.addItem(menu2);
    //   this.menus.addSeparator();
    //   this.menus.addItem(menu3);
    //   this.menus.addItem(menu4);
    //   this.map.addContextMenu(this.menus);
    // },
    addMenu() {
      this.menus = new T.ContextMenu({
        width: 100,
      });
      const menu1 = new T.MenuItem("放大", this.zoomIn);
      const menu2 = new T.MenuItem("缩小", this.zoomOut);
      const menu3 = new T.MenuItem("放大最大", this.setZoom);
      const menu4 = new T.MenuItem("查看全国", this.setTotal);
      const menu5 = new T.MenuItem("右键获取坐标", this.LngLat);
      this.menus.addItem(menu1);
      this.menus.addItem(menu2);
      this.menus.addSeparator();
      this.menus.addItem(menu3);
      this.menus.addItem(menu4);
      this.menus.addSeparator();
      this.menus.addItem(menu5);
      this.map.addContextMenu(this.menus);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  #map {
    width: 100vw;
    height: 90vh;
    position: relative;
    .btns {
      position: absolute;
      width: 200px;
      min-height: 200px;
      border: 1px solid red;
      top: 10;
      left: 10;
      z-index: 999;
    }
  }
}
.flex {
  display: flex;
}
.flex-s {
  display: flex;
  justify-content: space-between;
}
</style>

在这里插入图片描述