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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值