vue项目显示天地图

效果:
在这里插入图片描述
下载安装

在这里插入图片描述
在components下新建LMap.vue
这个页面包括可以切换天地图和谷歌地图
代码:

<template>
  <div class="container">
    <div id="map"></div>
    <div class="control" v-show="showControl">
      <div class="control-button" @click="zoomIn">
        <i class="el-icon-plus"></i>
      </div>
      <div class="control-button" @click="zoomOut">
        <i class="el-icon-minus"></i>
      </div>
      <div class="control-button" @click="fullScreen">
        <i class="el-icon-full-screen"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import * as L from "leaflet";
  import "leaflet/dist/leaflet.css";

  export default{
    props:{
      showControl:{   //定义一个属性,用于判断是否显示右侧控制键
        type:Boolean,     //定义属性类型
        default: true   //属性的默认值
      }
    },
    data(){
      return{
        isSupport: false,
        isFullScreen: false,
        map: null,
        username: localStorage.getItem("userId"),
        mapResourceList: [// 有切图的账户
          "35"
        ],
        maxZoom: 20,
        mapLayer: {
          name: '天地图',
          layers: {
            '天地图': [
              L.tileLayer("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=ab8ff1ae1ca029103e4dc130b366ce26", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
              }),
              L.tileLayer("http://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ab8ff1ae1ca029103e4dc130b366ce26", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
              })
            ],
            '谷歌地图': [
              L.tileLayer("https://so.wo-123.cn/maps/vt?lyrs=y&gl=cn&x={x}&y={y}&z={z}", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
              })
            ]
          },
          thisLayers: []
        }
      }
    },
    mounted() {
      this.isSupport = document.fullscreenEnabled;
      this.initMap();
      // 如果当前账户有航拍高清切图,则在地图上加载切图
      if(-1 != this.mapResourceList.indexOf(this.username)){
        this.mapLayer.layers['天地图'].push(
         L.tileLayer(`http://******/mapResources/gaoqing/******/{z}/{x}/{y}.png`, {
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]})
        );
      }
      //注册监听,监听是否全屏
      document.addEventListener("fullscreenchange", this.screenchange , true);
      let that = this;
      //注册监听,监听F11
      document.addEventListener("keydown", function(e){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 122) {
          //捕捉F11键盘动作
          e.preventDefault(); //阻止F11默认动作
          that.fullScreen();
        }
      } , true);
    },
    methods: {
      initMap() {
        this.map = L.map("map", {
          center: [32.340655, 118.85065], // 地图中心
          zoom: 10, //缩放比列
          minZoom: 1,
          maxZoom: this.maxZoom,
          zoomControl: false, //禁用 + - 按钮
          doubleClickZoom: false, // 禁用双击放大
          attributionControl: false, // 移除右下角leaflet标识
        });
        let layerName = this.mapLayer.name;
        for(let i=0; i<this.mapLayer.layers[layerName].length; i++){
          this.mapLayer.layers[layerName][i].options.maxZoom = this.maxZoom;
          this.mapLayer.layers[layerName][i].addTo(this.map);
          this.mapLayer.thisLayers.push(this.mapLayer.layers[layerName][i]);
        }
      },
      zoomIn(){
        this.map.zoomIn();
      },
      zoomOut(){
        map.value.zoomOut();
      },
      screenchange(){
        if (this.isSupport) {
          document.fullscreenElement ? this.isFullScreen = true : this.isFullScreen = false
        }
      },
      fullScreen(){
        if (this.isSupport) {
          if (document.fullscreenElement) {
            //document.exitFullscreen()退出全屏模式的方法
            document.exitFullscreen();
            this.isFullScreen = false;
          } else {
            //requestFullscreen(),请求全屏的方法
            document.documentElement.requestFullscreen();
            this.isFullScreen = true;
          }
        }
      }
    }
  }
</script>
<style lang="css" scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #map {
    width: 100%;
    height: 100%;
  }
  .control {
    background-color: #ffffff;
    position: absolute;
    right: 1.25rem;
    bottom: 40%;
    z-index: 999;
    border-radius: .125rem;
    font-size: 1.375rem;
    color: #404040;
  }
  .control-button {
    width: 2.3125rem;
    height: 2.3125rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .control-button:nth-child(n+1) {
    border-top: .0625rem solid rgba(0,0,0,0.15);
  }
</style>

在别的页面引用地图

<template>
	<div>
	 <LMap ref="lmap"></LMap>
  </div>
</template>
<script> 
import LMap from "../components/LMap.vue";
import * as L from "leaflet";
import * as turf from "@turf/turf";

export default {
   
  components: {
    LMap,
     },
  }
</script>

就这样就可以了

上面那个包含了选择天地图和谷歌地图的切换,下面这个就是简单地图页面
在components下新建LMap.vue

<template>
  <div class="container">
    <div id="map"></div>
    <div class="control">
      <div class="control-button" @click="zoomIn">
        <i class="el-icon-plus"></i>
      </div>
      <div class="control-button" @click="zoomOut">
        <i class="el-icon-minus"></i>
      </div>
      <div class="control-button" @click="fullScreen">
        <i class="el-icon-full-screen"></i>
      </div>
    </div>
  </div>
</template>

<script  >
  import * as L from "leaflet";
  import "leaflet/dist/leaflet.css";
  import "leaflet.pm";
  import "leaflet.pm/dist/leaflet.pm.css";
  export default{
  data(){
    return{
      isSupport:false,
      map: null,
      maxZoom: 20,
      username: localStorage.getItem("userId"),
      mapResourceList: [// 有切图的账户
        "35"
      ]
  }
},
mounted() {
    this.isSupport = document.fullscreenEnabled;
    this.initMap();
    // 如果当前账户有航拍高清切图,则在地图上加载切图
    if(-1 != this.mapResourceList.indexOf(this.username)){
      let layer = L.tileLayer(`http://****/gaoqing/****/{z}/{x}/{y}.png`, {
        subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]}).addTo(this.map);
      layer.options.maxZoom = 20;
    }
},
methods: {
  initMap() {
    this.map = L.map("map", {
      center: [32.340655, 118.85065], // 地图中心
      zoom: 10, //缩放比列
      minZoom: 1,
      maxZoom: this.maxZoom,
      zoomControl: false, //禁用 + - 按钮
      doubleClickZoom: false, // 禁用双击放大
      attributionControl: false, // 移除右下角leaflet标识
    });
    L.tileLayer("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=ab8ff1ae1ca029103e4dc130b366ce26", {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
    }).addTo(this.map);
    
    L.tileLayer("http://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ab8ff1ae1ca029103e4dc130b366ce26", {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
    }).addTo(this.map);
  },
  fullScreen(){
    if (this.isSupport) {
      // if (document.fullscreenElement) {
        //document.exitFullscreen()退出全屏模式的方法
       

      // } else {
        //requestFullscreen(),请求全屏的方法
       
        document.documentElement.requestFullscreen();
        this.isSupport =false
      }else {
        document.exitFullscreen();
        this.isSupport =true
      }
  },
  zoomIn() {
    this.map.zoomIn();
  },
  zoomOut() {
    this.map.zoomOut();
  }
}
  }

 
 
</script>
<style lang="less" scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #map {
    width: 100%;
    height: 100%;
  }
  .control {
    background-color: #ffffff;
    position: absolute;
    right: 1.25rem;
    bottom: 40%;
    z-index: 999;
    border-radius: .125rem;
    font-size: 1.375rem;
    color: #404040;
  }
  .control-button {
    width: 2.3125rem;
    height: 2.3125rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .control-button:nth-child(n+1) {
    border-top: .0625rem solid rgba(0,0,0,0.15);
  }
</style>
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue 地图离线地图是指基于 Vue 框架开发的应用程序,使用地图离线地图服务提供商提供的地图数据,可以在没有网络的情况下使用地图功能。这种离线地图服务可以有效地解决在人口稀少、网络信号差的区域使用地图功能时出现的卡顿、加载缓慢等问题。 地图是中国的一个在线地图服务提供商,提供全国范围内的地图数据和各种地理信息服务。而对于一些偏远地区,网络信号不稳定,或者用户需要在离线状态下仍然能够使用地图功能,地图离线地图则提供了一种解决方案。用户可以用离线地图软件把地图数据事先下载到本地存储,在没有网络的时候直接使用本地存储的数据进行地图显示和导航。 Vue 框架是一种流行的前端 JavaScript 框架,它具有灵活、轻量、高效等特点,可以快速开发出高品质的 Web 应用程序。对于使用离线地图服务的应用程序,Vue 框架可以提供方便、快捷的开发方式,同时还具备优异的性能和稳定性。 因此,Vue 地图离线地图的出现,能够为用户提供更加完善、便利、稳定的地图服务,满足不同用户在不同情境下对地图功能的需求。 ### 回答2: Vue 地图离线地图是一种拥有高质量地图数据的 Vue 插件,可以帮助开发者快速引入地图离线地图服务到自己的 Vue 项目中。地图离线数据具有高分辨率、高精度和高更新速度等特点,通过该插件,用户可以轻松地向自己的 Vue 项目中添加这些优质的地图数据资源。 该插件使用简单,只需要在项目中安装并引入插件即可。同时,该插件也提供了多种自定义选项,如地图类型、地图控件、地图缩放等等,可以根据用户需求进行灵活配置。 使用 Vue 地图离线地图插件还可以支持多种交互方式,包括鼠标滚轮缩放、平移、双击放大、框选、倾斜等等。此外,插件还提供了一些地图操作API,可以通过编程方式控制地图的行为。 总之,Vue 地图离线地图插件是一个功能强大的地图库,充分满足了 Vue 项目地图服务的需求,而且易于使用和配置,对于需要使用地图离线地图的开发团队来说,是一个值得信赖的解决方案。 ### 回答3: Vue是一种流行的JavaScript框架,它可以用来构建现代化的Web应用程序。而地图则是中国领先的在线地图服务提供商之一。最近,地图发布了一个新的功能,即可供Vue用户使用的离线地图。 离线地图可以在没有互联网连接的情况下使用。这对于那些工作或旅行时没有信号的区域非常有用。Vue用户可以使用地图的离线地图插件来加载和显示地图,提供地图的基本功能,如缩放,平移和搜索。 离线地图数据可以通过下载方式进行提供。此外,Vue地图插件还支持矢量和栅格地图以及地理信息系统(GIS)数据的显示。它还提供了许多其他的自定义选项,以便开发人员可以调整地图的外观和行为来满足他们的具体需求。 总的来说,Vue地图离线地图功能可以使开发人员更容易地构建适用于离线环境的Web应用程序,并且可以提供更好的用户体验。如果您需要一个灵活的、易于使用的离线地图插件,则应考虑使用Vue地图插件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值