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
### 回答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、付费专栏及课程。

余额充值