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

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、组件拆分