vue项目显示天地图

最新推荐文章于 2024-04-27 12:03:04 发布
最新推荐文章于 2024-04-27 12:03:04 发布
阅读量321 收藏 1
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70947033/article/details/135994471
版权

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

在这里插入图片描述
在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
    评论
vue项目中使用天地图
01-08
1.首先打开天地图注册账号 申请自己所用的key 网址：http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目，这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ this.loadmap() },
在vue中使用天地图dome
05-31
包含轨迹图添加——开始暂停结束、多个标注的显隐、缩放控件、地图换颜色、区域图
Vue加载天地图
分享GIS, .Net
12-28 714
天地图；Vue
天地图显示不全，只显示一部分或者一半_vue 天地图 初始显示一部分
最新发布
2401_84411822的博客
04-27 765
自己第一次在vue项目开发中使用天地图，在使用天地图过程中，遇到很多问题，比如：地图第一次渲染的时候显示不全、添加覆盖物后地图只能进行缩放不能进行拖拽、添加覆盖物后中心点怎么确认、怎么把数据单位米转化为经纬度坐标数据等问题，不过这些提到的问题在开发中都一一解决了。但这篇博文我们要讲的问题是第一个“这个问题耗了我差不多一个上午的时间，不过还好，还可以接受。网上找了几篇博主的文章，自己也试了他们的方法，可能是自己在参考的时候写错了（自己能力问题），导致达不到自己想要的结果。
解决vue中引入天地图显示不全问题，设置setTimeout即可解决！
番茄Salad
11-21 804
index.html中引入天地图api
vue中引入天地图
On the way
06-29 2035
vue中引入天地图 最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法 1、第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。 引入天地图JavaScript API文件 2、第二步，先创建一个Vue中初始化的天地图的JS文件，用于指向天地图类 文件命名为 tianMap.js 写入初始化代码 3、第三步，在单页文件中引入地图初始化封装好的文件 import tianMapfrom ‘…/…/co
Vue中openlayers加载天地图
u011671747的专栏
03-30 1558
<template> <div id="map" ref="rootmap"> <div id="mouse-position"></div> </div> </template> <script> import 'ol/ol.css' import {get as getProjection} f...
【前端】VUE + 天地图
qq_41597232的博客
08-05 2589
vue天地图使用
vue项目引入高德地图
06-19
在vue项目中，添加高德地图。对开发地图的开发人员有一定帮助
vue+esri 山东天地图加载、标注、鼠标移入移除浮层显示隐藏
03-14
VUE+ ESRI 实现山东天地图加载展示， 批量添加标注点； 鼠标移入移除标注点，浮层显示隐藏功能； 点击标注点方法实现； 地图放大缩小、平移事件； 天地图样式 ...
学习笔记 ---- 在Vue.js中加载天地图
weixin_34293902的博客
12-25 2604
写在前面：基于esri-loader插件的createMap实例，实现加载天地图，其中使用了arcgis api for javascript 加载天地图一文中的加载天地图方法。 插件版本号 esri-loader : ^1.4.0 vue : ^2.5.3 vue-template-compiler : ^2.5.3 准备：利用arcgis api for javascript 加载天地图的...
arcgis api 加载天地图js
04-11
arcgis api for js 加载天地图，封装的js文件，用的时候，直接引用，new一下即可。
Vue中使用天地图
m0_37939797的博客
07-13 981
进入天地图的控制台(https://console.tianditu.gov.cn/api/key)，申请一个key。到天地图官网(https://www.tianditu.gov.cn/)注册一个账号。在 vue 的页面代码中进行使用。
Vue 天地图的引入
qq_46130081的博客
10-26 740
效果 1. 去官网国家地理信息公共服务平台 天地图注册登陆成为开发者 2.申请key天地图API 3.得到key 在public/index.js 引入 <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script> 4.添加一个新的js文件 此处我自己命名为tianDiMap 5.在tian...
VUE中接入天地图
qq_45078916的博客
08-29 1321
1.在public/index.html内引入js。
【Vue + 天地图的使用】
qq_43186285的博客
04-30 2780
前言： 接到公司得通知，需要将Vue项目中使用的高德地图(至于高德地图的使用，可能会也写一篇记录博客，也许不会)替换成天地图，之前没有接触过天地图；所以只能请教我的人生导师------度娘了，但是查阅了挺多的记录博客，发现他们记载的都并不详细，有些甚至写了一大堆无关紧要的东西(拜托，首页任务就是要先把地图展示出来再说，其它的功能可以慢慢添加上去，你直接贴一大堆代码上去，甚至部分代码都没有贴上去，别人怎么能看懂)；所以我还是自己记录一下把，免得到时候忘了看自己写的可能比较好一点(虽然其它人也可能看不懂我的，哈
基于Vue的天地图专题(一)
lululutx的博客
11-29 1152
基于Vue的天地图专题(一) 写在前面 工作之余想写点博客，毕竟还没毕业就参加工作，至此已经一年多了。经手的一个项目，主要承担的前端开发，其中由很多模块都是我自己独立开发的，这次就想把天地图这个模块拿出来记录总结一下。天地图这块也比较熟悉，也是我本科毕设题目，想想第一个博客也得心应手一点。^^_ 天地图组件的引用 首先去天地图官网，登录或者注册。 依次点击开发资源-网页Api-新弹出页面右上角控制台 在控制台页面，单击右上角创建新应用，随便填一填巴拉巴拉。 申请成功后记住你的key。 我
vue + 天地图 初始化地图
wjm0519的博客
01-12 1616
前端配置： vue + elementui webpack 1.在index.html中引入天地图js文件 <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=秘钥" type="text/javascript" ></script> 2.在assets下创建一个技术文件，可自定义名称tianditu.js export default { init: function
vue 天地图离线地图
06-26
Vue 天地图离线地图是一种拥有高质量地图数据的 Vue 插件，可以帮助开发者快速引入天地图离线地图服务到自己的 Vue 项目中。天地图离线数据具有高分辨率、高精度和高更新速度等特点，通过该插件，用户可以轻松地向...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值