leaflet引入百度地图，封装组件

最新推荐文章于 2024-06-15 20:00:32 发布
最新推荐文章于 2024-06-15 20:00:32 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： web 前端 文章标签： javascript vue.js vue 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44708990/article/details/132204302
版权

文章目录

1、安装相关依赖

npm install leaflet --save

npm install proj4leaflet esri-leaflet --save

2、引入对象

在这里插入图片描述

import Vue from 'vue'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";

Vue.config.productionTip = false;

/* leaflet icon */
// delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});
// 建议在vue文件中引入；避免全局引用
require("proj4");
require("proj4leaflet");

3、自定义地图图层（百度）

3.1 引入地图
/**
 * 地图地址
 * 参数：
 *   type: 地图坐标系，BD09、WGS84等
 *   ApiAuthorization：唯一key
 */
var gisUrl = "https://gis.10010.com:8219/dugis-baidu/tile?x={x}&y={y}&z={z}&type=BD09&ApiAuthorization=baidu-8f34e4fabcf34fbdbdf171868337ae35";
var gisMap = L.tileLayer(gisUrl, {
	subdomains: "0123456789",
	maxZoom: 21,
	minZoom: 3,
	tms: true,
}),
var baiduCRS = new L.Proj.CRS(
    "EPSG:900913", 
    "+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",
    {
       resolutions: (function () {
       	var level = 20;
        var res = [];
        res[0] = Math.pow(2, 18);
        for (var i = 1; i < level; i++) {
          res[i] = Math.pow(2, 18 - i);
        }
        return res;
      })(),
      origin: [0, 0],
      bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
    }
);
// 参数一：地图渲染的元素id；参数二：地图参数配置
this.map = L.map("leaflet_map", {
	crs: baiduCRS,
	center: [23.143262, 113.39896],
	zoom: 12,
	layers: [gisMap],
	zoomControl: false,
});
3.2 地图类型
var normalMapUrl = "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1";
var satelliteMapUrl = "http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46";
// 创建图层
var normalMap = L.tileLayer(normalMapUrl, {
    subdomains: "0123456789",
    maxZoom: 21,
    minZoom: 3,
    tms: true,
}),
satelliteMap = L.tileLayer(satelliteMapUrl, {
  	subdomains: '0123456789',
  	maxZoom: 21,
  	minZoom: 3,
  	tms: true
}),
    
var baseLayers = { 
    "常规地图": normalMap,
	"卫星地图": satelliteMap
}
L.control.layers(baseLayers).addTo(this.map);
3.3 图层
var normalMapUrl = "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
    annotionMapUrl = "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl";

var normalMapOp = L.tileLayer(normalMapUrl, {
	subdomains: "0123456789",
	maxZoom: 21,
	minZoom: 3,
	opacity: 0.6,
	tms: true,
}),
annotionMap = L.tileLayer(annotionMapUrl, {
    subdomains: '0123456789',
    maxZoom: 21,
    minZoom: 3,
    tms: true
});
var overlayLayers = {
    "标注": annotionMap,
  	"半透明": normalMapOp
}
L.control.layers(overlayLayers).addTo(this.map);
3.4 增加控制层级控件
L.control.zoom(
	{
	  	zoomInTitle: "放大",
  		zoomOutTitle: "缩小",
	}
).addTo(this.map);

4、组件拆分

<template>
  <div>
    <div id="leaflet_map" :style="style"></div>
  </div>
</template>
<script>
require("proj4");
require("proj4leaflet");
export default {
  name: "leafletMap",
  props: {
    width: {
      type: String,
      default: "100vw",
    },
    height: {
      type: String,
      default: "100vh",
    },
    top: {
      type: String,
      default: "0",
    },
    left: {
      type: String,
      default: "0",
    },
    maxZoom: {
      type: Number,
      default: 21,
    },
    minZoom: {
      type: Number,
      default: 3,
    }
  },
  data() {
    return {
      map: null,
      baiduCRS: null,
      zoomLevel: 0,
      mouseDown: false,
      centerPoint: {}
    };
  },
  computed: {
    style() {
      return 
        'width:' + this.width + 
        ';height: ' + this.height + 
        ';margin-top:' + this.top + 
        ';margin-left:' + this.left;
    }
  },
  mounted() {
    this.addMap();
  },
  methods: {
    getMap() {
      return this.map;
    },
    setEvent() {
      this.map.on('mouseup', (e) => {
        this.mouseDown = false;
        this.zoomLevel = this.map.getZoom();
        this.centerPoint = this.map.getCenter() 
      })
      this.map.on('mousedown', (e) => {
        this.mouseDown = true;
      })
      // this.map.on('mousemove', (e) => {
      //   if(!this.mouseDown) {
      //     return ;
      //   }
      //   console.log(e.latlng);
      // })  
    },
    addMap() {
      var baiduCRS = new L.Proj.CRS(
        "EPSG:900913",
        "+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",
        {
          resolutions: (function () {
            var level = 20;
            var res = [];
            res[0] = Math.pow(2, 18);
            for (var i = 1; i < level; i++) {
              res[i] = Math.pow(2, 18 - i);
            }
            return res;
          })(),
          origin: [0, 0],
          bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
        }
      );

      var normalMapUrl =
          "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
        satelliteMapUrl =
          "http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
        annotionMapUrl =
          "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl",
        gisUrl =
          "https://gis.10010.com:8219/dugis-baidu/tile?x={x}&y={y}&z={z}&type=BD09&ApiAuthorization=baidu-8f34e4fabcf34fbdbdf171868337ae35";

      var normalMap = L.tileLayer(normalMapUrl, {
          subdomains: "0123456789",
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          tms: true,
        }),
        gisMap = L.tileLayer(gisUrl, {
          subdomains: "0123456789",
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          tms: true,
        }),
        normalMapOp = L.tileLayer(normalMapUrl, {
          subdomains: "0123456789",
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          opacity: 0.6,
          tms: true,
        }),
      satelliteMap = L.tileLayer(satelliteMapUrl, {
          subdomains: '0123456789',
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          tms: true
      }),

      annotionMap = L.tileLayer(annotionMapUrl, {
          subdomains: '0123456789',
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          tms: true
      });

      var baseLayers = {
          "地图": normalMap,
          "影像": satelliteMap
      }

      var overlayLayers = {
          "标注": annotionMap,
          "半透明": normalMapOp
      }

      this.map = L.map("grid_map", {
        crs: baiduCRS,
        center: [23.143262, 113.39896],
        layers: [gisMap],
        zoomControl: false,
      });
      L.control.layers(baseLayers, overlayLayers).addTo(this.map);
      L.control
        .zoom({
          zoomInTitle: "放大",
          zoomOutTitle: "缩小",
        })
        .addTo(this.map);
      this.setEvent();
    },
  },
};
</script>
<style lang="less">
#leaflet_map {
  position: fixed;
  top: 0;
}
</style>
谁是张三
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 2702
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
2.（leaflet之家）leaflet加载接入百度地图
地图之家
08-18 478
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='vi
百度LBS地址整合Leaflet地图
Block_yang的博客
05-24 579
百度公司推出了强大的LBS解决方案，包括百度LBS地址转换。百度LBS地址转换是一项提供地理位置信息转换为具体地址的服务。可以将经纬度坐标转化为实际的地址，从而方便开发者在地图应用、导航应用和其他位置相关的应用中使用。百度LBS地址转换基于百度的地图数据和算法，通过将经纬度坐标与百度地图中的位置信息进行匹配，从而确定具体的地址。该服务支持将单个经纬度坐标转换为地址，也支持批量转换多个坐标。
Leaflet加载百度地图
吴道简的博客
04-13 2161
为了验证一下百度地图的影像、矢量、注记等瓦片数据是否是坐标统一的，写了一个简单的leaflet加载百度影像瓦片、矢量瓦片、注记瓦片的页面，叠加在一起，看了一下，果然坐标系是统一的。 <!DOCTYPE html> <html> <head> <title>加载百度地图</title> <meta charset="utf-8"> <style type="text/css"&...
如何在Vue3中使用地图库Leaflet实现地图展示？
最新发布
有我更精彩的博客
06-15 1474
现在我们已经成功在 Vue 3 项目中集成了 Leaflet，并展示了基本功能。接下来，我们可以探索更多高级功能和自定义。例如，为了添加更多自定义标记，您可以修改文件：});} , };});} , };});} , };});} , };});} , };</});} , };</});} , };
leaflet加载百度地图
热门推荐
Jack的世界
10-18 1万+
leaflet加载百度地图 由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样，所以大多数的文章介绍了如何加载例如：天地图，高德地图，腾讯地图等地图，但是唯独百度地图的介绍的不多也有一些感觉是不太合适的，我从这篇文章了解到了他的一些切片规则，然后决定将百度地图拓展出来，给需要他的人使用。 首先需要一些第三方的插件坐标系拓展首先我使用了这个玩意儿。这里需要注意的是，如果你使用的是0.7版
leaflet加载百度地图和其他网络在线地图
08-23
leaflet加载百度地图和其他网络在线地图，包含百度的瓦片、影像以及道路交通实况服务，测试，百度坐标数据无需转换，直接根据经纬度可以显示在正确位置。
2.（leaflet篇）leaflet接入百度地图.zip
05-14
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/116779524
leaflet加载接入百度地图（leaflet篇.2）
地图之家
05-14 7595
完整代码文件在文章末尾处提供 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <!-- L
leaflet加载百度地图(矫正版)
12-20
http://blog.csdn.net/u012087400/article/details/53744756
leaflet加载百度、高德、谷歌、天地图等在线地图
12-26
leaflet加载百度、高德、谷歌、天地图等在线地图
leaflet 加载百度自定义地图
12-01
leaflet 加载百度自定义地图，支持自定义百度地图样式
leaflet加载百度地图底图
08-11
融合leaflet和百度地图底图
vue项目中利用leaflet使用天地图.zip
01-05
2. **Vue2-Leaflet**：Vue.js对Leaflet的封装，便于在Vue组件中使用，安装命令为`npm install vue2-leaflet` 或 `yarn add vue2-leaflet`。 3. **天地图API**：虽然天地图提供JavaScript API，但在这里我们并不直接...
Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
05-20
本示例"Vite+Vue+iClient for Leaflet引入并实现MapV/Echarts第三方可视化库示例"旨在教你如何在基于Vite和Vue3的项目中集成SuperMap的iClient for Leaflet库，并利用Echarts和MapV进行数据的高效可视化。...
Leaflet：封装 leaflet 绘制点和区域
icemwj的博客
10-29 1686
封装 leaflet 绘制点和区域
Angular+Leaflet地图
05-05
通过封装组件，我们可以轻松地在Angular应用中集成地图功能，同时利用Leaflet的灵活性扩展应用的特性和交互。记住，如果在运行时遇到问题，确保已执行`npm install`安装所有必要的依赖。这将确保你的地图组件能正确...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值