天地图开发指南

编程语言 2024-01-08 20:24:08 阅读次数: 0

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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/q4717529/article/details/132533480
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022