leaflet的简单使用和引入百度地图（vue2.0）

★ 简单使用

1、安装

npm install leaflet --s

2、引入

import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可单独引用
Vue.L = Vue.prototype.$L = L

3、初始化地图

<template>
  <div class="left-let-page">
    <div id="map"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initDate()
  },
  methods: {
    initDate () {
      let map = L.map("map", {
        minZoom: 3,
        maxZoom: 14,
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        crs: L.CRS.EPSG3857
      });
      this.map = map;　　　　//data上需要挂载
      window.map = map;
      L.tileLayer(
        "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(map);
    }
  }
}
</script>
<style scoped lang='less'>
.left-let-page {
  #map {
    width: 100%;
    height: 100vh;
    margin: auto;
  }
}
</style>

效果图：

image.png

★ 引入百度地图

1、引入两个自定地图坐标系proj4leaflet+proj4转换插件

npm install proj4 --save
npm install proj4leaflet --save

2、在src目录下新建文件夹并创建tileLayer.baidu.js，编写百度地图底图调用插件代码：

/*
*tileLayer.baidu.js
*/
// 引用
require('proj4')
require('proj4leaflet')

// const titleD = 'http://127.0.0.1:8886/{z}/{x}/{y}.png'
// const titleD = 'https://api.map.baidu.com/getscript?v=3.0&ak=7pQwLpGQZr0SdQ3vlDp8gu7ExEqjKRG1'
const titleD = 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles='

var urlPath = titleD;
//请引入 proj4.js 和 proj4leaflet.js
L.CRS.Baidu = 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 () {
    level = 19
    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])
});

L.tileLayer.baidu = function (option) {
  option = option || {};

  var layer;
  var subdomains = '0123456789';
  switch (option.layer) {
    //单图层
    case "vec":
    default:
      layer = L.tileLayer(urlPath, {
        name: option.name, subdomains: subdomains, tms: true
      });

      // layer = L.tileLayer('http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'ph' : 'pl') + '&scaler=1&p=1', {
      //   name: option.name, subdomains: subdomains, tms: true
      // });
      break;
    case "img_d":
      layer = L.tileLayer('http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', {
        name: option.name, subdomains: subdomains, tms: true
      });
      break;
    case "img_z":
      layer = L.tileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'sh' : 'sl') + '&v=020', {
        name: option.name, subdomains: subdomains, tms: true
      });
      break;

    case "custom"://Custom 各种自定义样式
      //可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
      option.customid = option.customid || 'midnight';
      // layer = L.tileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=' + option.customid, {
      //     name: option.name, subdomains: "012", tms: true
      // });
      layer = L.tileLayer(urlPath, {
        name: option.name, subdomains: subdomains, tms: true
      });
      break;

    case "time"://实时路况
      var time = new Date().getTime();
      layer = L.tileLayer('http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' + time + '&label=web2D&v=017', {
        name: option.name, subdomains: subdomains, tms: true
      });
      break;

    //合并
    case "img":
      layer = L.layerGroup([
        L.tileLayer.baidu({ name: "底图", layer: 'img_d', bigfont: option.bigfont }),
        L.tileLayer.baidu({ name: "注记", layer: 'img_z', bigfont: option.bigfont })
      ]);
      break;
  }
  return layer;
};

3、使用百度地图地图

<template>
  <div class="left-let-page">
    <div id="map"></div>
  </div>
</template>
<script>
//引用tileLayer.baidu.js
import "@/util/tileLayer.baidu.js"
export default {
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initDate()
  },
  methods: {
    initDate () {
      let map = L.map("map", {
        minZoom: 3,
        maxZoom: 18,
        center: [39.56, 116.20],
        zoom: 8,
        zoomControl: false,
        attributionControl: true,
        crs: L.CRS.Baidu
      });
      L.tileLayer.baidu({ layer: 'vec' }).addTo(map);
    }
  }
}
</script>
<style scoped lang='less'>
.left-let-page {
  #map {
    width: 80vw;
    height: 80vh;
    margin: auto;
  }
}
</style>

效果图：

image.png