vue使用leaflet加载高德/天地图

已于 2023-05-23 11:30:54 修改
阅读量8.3k 收藏 22
点赞数 4
分类专栏： 前端相关 文章标签： vue
于 2021-05-06 10:46:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42707397/article/details/116448685
版权

vue使用leaflet

一、npm下载依赖使用

1、vue npm依赖使用leaflet

  1. npm安装leaflet依赖
npm install leaflet
  1. 新建vue页面，在页面中局部使用leaflet（不在main.js中设置全局使用）
<template>
 <div class="leaflet">
    <div class="container">
      <div id="map" class="map"></div>
    </div>
 </div>
</template>
<script>
import L from "leaflet";
import 'leaflet/dist/leaflet.css';
export default {
  name:'AMap',
  data() {
    return {
      map:""
    }
  },
  methods: {
    
    initMap(){
        this.map = L.map("map", {
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: true, //禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: true // 移除右下角leaflet标识
      });
      let name = L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      ).addTo(this.map);
    //   this.map.removeLayer(name)  // 移除图层
    }
  },
  mounted(){
   this.initMap()
  }
}
</script>

<style scoped>
.leaflet{
  width: 100%;
  height: 600px;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50.1%;
  top: 300px;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.map {
  width: 100%;
  height: calc(100%);
  z-index: 1;
}
</style>

2、leaflet绘制点线面的插件使用（leaflet pm）

  1. 在vue页面中引用pm
import 'leaflet.pm';
import 'leaflet.pm/dist/leaflet.pm.css';
  1. 在initMap()里添加如下代码：
this.map.pm.addControls({
        position: 'topleft',
        drawCircle: false,
      });

完整代码如下：

<template>
 <div class="leaflet">
    <div class="container">
      <div id="map" class="map"></div>
    </div>
 </div>
</template>
<script>
import L from "leaflet";
import 'leaflet/dist/leaflet.css';
import 'leaflet.pm';
import 'leaflet.pm/dist/leaflet.pm.css';
export default {
  name:'AMap',
  data() {
    return {
      map:""
    }
  },
  methods: {
    
    initMap(){
        this.map = L.map("map", {
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: true, //禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: true // 移除右下角leaflet标识
      });
      let name = L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      ).addTo(this.map);
      //   this.map.removeLayer(name)  // 移除图层
      // add leaflet.pm controls with some options to the map
      this.map.pm.addControls({
        position: 'topleft',
        drawCircle: false,
      });
    }
  },
  mounted(){
   this.initMap()
  }
}
</script>

<style scoped>
.leaflet{
  width: 100%;
  height: 600px;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50.1%;
  top: 300px;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.map {
  width: 100%;
  height: calc(100%);
  z-index: 1;
}
</style>
  1. 效果图如下：
    在这里插入图片描述
  2. 其他插件可在官网自行查找使用：leaflet pm官网

二、vue项目手动外部引入leaflet

1、地图加载

1、在public下的index.html里面引入js文件sdk，leaflet资源下载：leaflet资源下载

<script src="./static/js/leaflet.js"></script>
<link rel="stylesheet" href="./static/css/leaflet.css" />
<script src="./static/js/CustomWebSDK.js"></script>

2、加载天地图底图服务

<div id="map"></div>

this.urlhhh = "http://t0.tianditu.gov.cn/img_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
this.map = L.map('map', {
  center: {
    lon: 114, 
    lat: 39
  },
  zoom: 9,
  minZoom: 0,
  maxZoom: 20,
  zoomControl: false,
  crs: L.CRS.CustomEPSG4326
});
//添加放大缩小控件
this.zoomControl = L.control.zoom({ position: 'bottomright' });
this.map.addControl(this.zoomControl);

this.layersContent = L.tileLayer(this.mapUrl,{tileSize:512}).addTo(this.map);

2、加载control控件（放大缩小、测距、测面积）

1、在public下的index.html里面引入Leaflet.Measure文件和样式

 <!-- 引入测量插件js  -->
  <script src="./static/js/Leaflet.Measure.js"></script>
  <!-- 引入测量插件css -->
  <link rel="stylesheet" href="./static/css/Leaflet.Measure.css" />

2、声明使用，代码如下

//1、添加放大缩小控件
this.zoomControl = L.control.zoom({ position: 'bottomright' });
this.map.addControl(this.zoomControl);
// 2.加载测量距离和测量面积的控件
L.Measure = {
  linearMeasurement: "测距", //测量两点间距离
  areaMeasurement: "测面", //测量区域面积
  start: "起点",
  meter: "m",
  kilometer: "km",
  squareMeter: "m²",
  squareKilometers: "km²"
};
L.control.measure({
  position: "topright",
  title: "测量控件",
  collapsed: true,
  color: "#000234"
}).addTo(this.map);

3、完整代码如下：

<template>
  <div style="width:100%;heght:100%;">
    <div id="map" v-if="showMap">
    </div>
    <el-dialog
      title="本地服务列表"
      :visible="!showMap"
      :before-close="handleClose"
      width="30%">
      <el-table
        :data="serviceList"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="服务名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="type"
          label="服务类型"
          :formatter="formatter"
          width="180">
        </el-table-column>
        <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <router-link
          :to="{path: '/server',query:{id:scope.row.id,type:scope.row.type,control:true}}" target='_blank' >
          预览
          </router-link>
          <el-button
          type="text"
          @click="copyUrl(scope.row)">
          复制
          </el-button>
        </template>
      </el-table-column>
      </el-table>
    </el-dialog>
    </div>
</template>

<script>
import {getServiceInfo} from '@/api/datahub'
import {copyText} from "@/utils/utils"
export default {
  data () {
    return {
      serviceList:[],
      map: null,
      mapUrl: ""
    }
  },
  computed:{
    showMap(){
      return this.$route.query.type
    }
  },
  mounted () {
    this.showMap?this.initMapConfig():this.getServiceList();
  },
  activated(){
    this.showMap?this.initMapConfig():this.getServiceList();
  },
  methods: {
    copyUrl(row){
      copyText(window.location.href+"?id="+row.id+"&type="+row.type)
    },
    handleClose(done) {
      this.$router.go(-1)
      done();
    },
    formatter(row) {
      let type=""
      if(row.type=="sl"){
        type="矢量服务"
      }else if(row.type=="yx"){
        type="影像服务"
      }else{
        type="其他"
      };
      return type
    },
    showRow(row){
      this.$router.push("/server?id="+row.id+"&type="+row.type)
    },
    async getServiceList(){ 
    let sl=await getServiceInfo({url:window.baseWebUrl+"/apis/services/list?serviceName=&page=1&rows=99&groupId=&orderBy="});
    let yx=await getServiceInfo({url:window.baseWebUrl+"/apis/dataservice/list?groupId=&dataName=&orderBy=&page=1&rows=99&type=2"});
    this.serviceList=[
        ...JSON.parse(sl.data.data).data.records.map(n=>{
        return {"type":"sl","name":n.name,"id":n.idString}
      }),
      ...JSON.parse(yx.data.data).data.records.map(n=>{
        return {"type":"yx","name":n.alias,"id":n.idString}
      }
     )]
    },
    initMapConfig () {
       if (this.mapUrl != ''&&this.map) {
        this.map.removeLayer(this.layersContent)
      }
      if(this.$route.query.type=='yx'){
        getServiceInfo({url:window.baseWebUrl+"/apis/dataservice/getInfo/"+this.$route.query.id}).then(res=>{
        this.mapUrl=JSON.parse(res.data.data).data.url[0].url.replace("http://127.0.0.1:8021",window.baseWebUrl).replace("http://localhost:8021",window.baseWebUrl).replace("{l}","{z}")
        this.initMap(JSON.parse(res.data.data).data.alias)
        })
      }else if(this.$route.query.type=='sl'){
        getServiceInfo({url:window.baseWebUrl+"/apis/services/getInfo?id="+this.$route.query.id}).then(res=>{
        this.mapUrl=JSON.parse(res.data.data).data.url[0].url.replace("http://127.0.0.1:8021",window.baseWebUrl).replace("http://localhost:8021",window.baseWebUrl).replace("{l}","{z}").replace("{styleId}",JSON.parse(res.data.data).data.styles[0].alias).replace("{tilesize}","512")
        this.map = L.map('map', {
          center: {
            lon: JSON.parse(res.data.data).data.styles[0].center.split("(")[1].split(" ")[0], 
            lat: JSON.parse(res.data.data).data.styles[0].center.split("(")[1].split(" ")[1].split(")")[0]
          },
          zoom: JSON.parse(res.data.data).data.styles[0].level,
          minZoom: 0,
          maxZoom: 20,
          zoomControl: false,
          crs: L.CRS.CustomEPSG4326
        });
        this.layersContent = L.tileLayer(this.mapUrl,{tileSize:512}).addTo(this.map);
        if (this.$route.query.control) {
           this.zoomControl = L.control.zoom({ position: 'bottomright' });
           this.map.addControl(this.zoomControl);
              // 2.加载测量距离和测量面积的控件
            L.Measure = {
              linearMeasurement: "测距", //测量两点间距离
              areaMeasurement: "测面", //测量区域面积
              start: "起点",
              meter: "m",
              kilometer: "km",
              squareMeter: "m²",
              squareKilometers: "km²"
            };
            L.control.measure({
              position: "topright",
              title: "测量控件",
              collapsed: true,
              color: "#000234"
            }).addTo(this.map);
          }
        })
      }
      
    },
    initMap (name) {
      getServiceInfo({url:window.baseWebUrl+"/rasterserver/image/getServiceBBox/"+name}).then(res=>{
        let center=JSON.parse(res.data.data)
        this.map = L.map('map', {
        center: {
          lon: (center[0]+center[2])/2, 
          lat: (center[1]+center[3])/2
        },
        zoom: 10,
        minZoom: 0,
        maxZoom: 20,
        zoomControl: false,
        crs: L.CRS.CustomEPSG4326
      });
      this.layersContent = L.tileLayer(this.mapUrl,{tileSize:512}).addTo(this.map);
      if (this.$route.query.control) {
        this.zoomControl = L.control.zoom({ position: 'bottomright' });
        this.map.addControl(this.zoomControl);
          // 2.加载测量距离和测量面积的控件
        L.Measure = {
          linearMeasurement: "测距", //测量两点间距离
          areaMeasurement: "测面", //测量区域面积
          start: "起点",
          meter: "m",
          kilometer: "km",
          squareMeter: "m²",
          squareKilometers: "km²"
        };
        L.control.measure({
          position: "topright",
          title: "测量控件",
          collapsed: true,
          color: "#000234"
        }).addTo(this.map);
       }
      }) 
    }
  }
}
</script>

<style>
#map{
  width:210vh;
  height:99vh;
  margin: 2px auto;
}
</style>

4、执行效果如下：
在这里插入图片描述

EricFRQ
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
leaflet加载百度、高德、谷歌、天地图等在线地图
12-26
leaflet加载百度、高德、谷歌、天地图等在线地图
基于“vue+leaflet+地图瓦片”实现离线地图服务
weixin_41712594的博客
12-16 5187
离线地图服务是指在没有网络连接的情况下，能够提供地图数据和相关功能的服务。传统的在线地图服务需要实时的网络连接才能加载地图数据，而离线地图服务则将地图数据预先下载到本地设备或服务器中，用户可以在没有网络的环境下使用这些离线地图数据。离线地图服务的主要特点包括：离线访问：用户可以在没有网络连接的情况下使用地图数据，不受网络信号的限制。快速响应：由于地图数据已经存储在本地设备或服务器中，离线地图服务可以更快速地响应用户的请求，提供流畅的地图浏览体验。
vue中leaflet入门
最新发布
m0_70950838的博客
06-06 218
vue中的leaflet入门
Leaflet + Vue使用案例
黄先森的博客
01-10 944
1.获取区域边界JSON数据，下载后放到项目里。
leaflet 加载高德地图
qq_37550440的博客
09-16 3780
效果图： <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https:
地图信息 leaflet +vue3 一个文档让你掌握leaflet基础用法
qq_59598977的博客
01-26 2713
leaflet基本用法，事件，图层，Geo数据
Vue2Leaflet一个Leaflet地图的Vue2组件
08-07
Vue2Leaflet 一个Leaflet地图的Vue2组件
vue中使用leaflet(一)
热门推荐
DXDSuper博客
05-12 2万+
下载leaflet与leaflet.pm leaflet 用于根据坐标自动绘制等操作，leaflet.pm可实现用户手动绘制。 leaflet.pm 参考网址：https://www.npmjs.com/package/leaflet.pm leaflet 参考网址：https://leafletjs.com/reference-1.6.0.html npm install leaflet.pm npm install leaflet 引入，在项目main.js中 import 'leaflet/dist
【Leaflet入门】vue使用leaflet插件
lishuyuli的博客
03-08 2951
最近做的项目需要用到地图服务,之前我使用过高德,百度,天地图一些国内的地图服务,然后有一些需求,国内的这些服务呢可能需要毛爷爷,然后在同事的推荐下使用啦leaflet,这里记录一下使用的方法和一些开发中遇到问题。以上就是今天要讲的内容，本文仅仅简单介绍了如何引入leaflet插件,并且初始化我们map对象。
vue使用leafLet（绘图工具详解）
weixin_45031595的博客
12-06 1万+
安装 leaflet leaflet.pm绘图工具 引入，在项目main.js中 import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用 import * as L from "leaflet"; import "leaflet/dist/leaflet.
Leaflet 加载天地图
yb305
07-14 1974
leaflet加载天地图的矢量图和影像图
vue中使用leaflet地图
weixin_48623317的博客
03-12 8526
vue中使用leaflet地图 根据项目需要学习GIS地图 文章目录vue中使用leaflet地图前言一、引入leaflet地图及插件二、封装创建地图方法1.创建一个文件夹map在文件夹下创建js文件map.js![在这里插入图片描述](https://img-blog.csdnimg.cn/20210312153035715.jpg)2.封装创建地图实例方法3.实现leaflet地图4.leaflet地图展示总结 前言 GIS地图学习 一、引入leaflet地图及插件 npm导入leafle
vue项目中利用leaflet使用天地图.zip
01-05
在Vue组件中使用Leaflet和天地图的步骤如下： 1. **导入依赖**：在组件中引入Vue2-Leaflet和Leaflet库，如： ```javascript import L from 'leaflet'; import { LMap, LTileLayer } from 'vue2-leaflet'; ``` 2. **...
VUE 使用 leaflet
11-04
在vue中使用leaflet，底图引入了天地图,高德,Google等，对leafletApi做了简单封装，可以方便的调用相关Api。 封装的常用方法有： 测距、测面、地图切换、画多边形、画矩形、在地图中添加arcgis服务等
vue中使用高德地图-加载高德地图几种方法
03-12
vue中使用高德地图-加载高德地图几种方法
leaflet-windy，leaflet插件集成高德地图，风场粒子动画
06-21
在本文中，我们将深入探讨如何使用`leaflet-windy`这个Leaflet插件，结合高德地图，实现极夜黑主题的风场粒子动画效果。同时，我们也会提及其他相关技术，如Vue.js的配置和项目构建工具。 首先，`leaflet-windy`是...
Leaflet加载天地图
liuchao的博客
11-27 2813
Leaflet加载天地图
Leaflet 加载高德地图
极限突破者的博客
03-05 6042
高德地图是一款由高德软件提供的数字地图服务，在国内使用较为广泛。高德地图提供了丰富的地图数据和 API 接口，支持 Web、移动端等多种平台。本文中，我们将高德地图的wms服务加入leaflet地图对象，并构建点击事件输出高德坐标和WGS-84坐标； 在这个例子中，我们使用了高德地图的 WMS 服务，通过 方法创建了一个瓦片图层，并将其添加到地图容器中。
leaflet加载高德地图
yb305
07-13 1114
【代码】leaflet加载高德地图。
vue3leaflet加载带经纬度天地图
05-31
要在Vue3Leaflet中加载带有经纬度的天地图，您需要执行以下步骤： 1. 安装 `vue3-leaflet` 和 `leaflet` 包，可以使用 npm 进行安装： ``` npm install vue3-leaflet leaflet --save ``` 2. 安装 `proj4` 和 `leaflet-proj` 包，用于将天地图的坐标系转换为 Leaflet 的坐标系： ``` npm install proj4 leaflet-proj --save ``` 3. 在 `main.js` 中引入所需的包并注册： ```javascript import { createApp } from 'vue' import App from './App.vue' import { LMap, LTileLayer } from 'vue3-leaflet' import 'leaflet/dist/leaflet.css' import 'leaflet-proj' import 'proj4' import './assets/tianditu.css' createApp(App).component('l-map', LMap).component('l-tile-layer', LTileLayer).mount('#app') ``` 4. 在 `App.vue` 中添加地图和图层： ```html <template> <l-map :zoom="zoom" :center="center"> <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer> </l-map> </template> <script> export default { name: 'App', data () { return { zoom: 13, center: [39.9, 116.4], url: 'http://{s}.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=your_token', attribution: '天地图' } } } </script> ``` 其中，`url` 中的 `tk=your_token` 部分需要替换为您申请的天地图开发者 token。 5. 在 `assets` 文件夹中添加 `tianditu.css` 文件，并在其中定义天地图的样式： ```css @import url(http://api.tianditu.gov.cn/api?v=4.0&tk=your_token); .tianditu { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; } ``` 6. 运行项目，即可在 Vue3Leaflet 中加载带有经纬度的天地图。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值